Using Vite to Publish a Vue Component to NPM
Build tools have always been a headache in the world of JavaScript. Evan You wants to transform JavaScript build tools to make it easier for JavaScript to work with. His Solution: Vite.
What is Vite
Vite is a new JavaScript tooling library that aims to streamline JavaScript tooling. Webpack, parcel, and other related JavaScript build tools start to lose performance as the size of an application grows. Vite aims to improve performance while adhering to sets of opinionated conventions.
Why use Vite?
JavaScript tooling sucks; avoid unnecessary headaches by using Vite. Browsers are not able to immediately parse the syntax for popular JavaScript frameworks without babel. There are several build tools available to solve this problem: Webpack, Parcel, and Gulp. If you have ever used any of the tools mentioned earlier, you know it can be a pain to set up the configuration yourself.
Most JavaScript frameworks are supported by a CLI that makes it easy to get a development server up and running with an out-of-the-box configuration. However, if you ever needed to run `eject,` you know these CLI’s are less than ideal. Another problem in the current JavaScript tooling ecosystem is bloat. CRA and Vue-cli install a large number of packages, and all of these packages make builds slower, and with the state of CI/CD, slower builds = higher costs.
This is where Vite comes in. Evan You described his intentions behind Vite at JamstackConf 2021. Essentially, Evan you wanted to build an opinionated tool to cover the gap between meta frameworks and build tools.
Vite Wants to do more inside the build tool, whereas Webpack leaves it open to the developer to handle its configuration. This should reduce the amount of bloat that is packaged alongside modern build tools like CRA or Vue-CLI. Now Vite is at a point where it can do more out of the box than Webpack can do. Vite can handle code-splitting, compiling CSS, and more using best practices.
“It’s a trade-off, really. Webpack is a lot configurable, but in a lot of cases, if these common cases are so similar, maybe just doing them out of the box makes things easier for the end-user.” — Evan You, Jamstack Conf 2021
Vite in Practice
To really understand a tool, you have to learn how to use it. So we will build a component and publish it to NPM. This can be the template for a component library built using Vite. This should give us a feel for how Vite works in established workflows.
Create a new Vite Project
To create a new project using Vite we simply have to follow the common workflow:
using NPM:
npm init vite@latest my-app-nameusing Yarn:
yarn create vite my-app-nameFrom here you will be prompted to choose a framework. We will be choosing Vue, and selecting Vue when prompted to select a variant. You can also use templates for other frameworks such as React and Svelte.
We give the script a second to initialize the new folder, and once its done we can use cd my-app-name and npm install to install all the necessary packages.
Building a Component
After installing the required dependencies, your folder structure should look like this.
Since we are building a component library, we need to add an index file in src/components/ . This will be our build target later in the tutorial.
Now we can create a new component. We will start off with a simple Button component, nothing too fancy. In src/components/ create a file called VButton.vue. This will be our new Button component:
Next import your Button component into src/components/index.js . We will tell vite to package everything in this file at build time, so we should include any components we plan to publish in this file.
Now we need to test out our component. Lucky Vite makes this easy, it comes packaged with Hot Module Replacement, which is standard in most other development tools like create-react-app and vue-cli.
To test our new Button component, we need to go into App.vue . First remove the Vue start template and replace it with our new button. At this point you can also delete src/components/HelloWorld.vue as it will no longer be used. Once your done, your App.vue file should look like this:
Now to see our new component. All we have to do is run yarn dev and that will start the development server. Once the serve is running navigate to http://localhost:3000 to see your button in action.
Add TailwindCSS
Right now our component looks a little bland. Vite makes it really easy to add CSS processing into our app. We will be using TailwindCSS for styling our library in this tutorial. TailwindCSS provides a handful of modular CSS utilities that makes styling a breeze. Check out their docs to learn more.
Start by installing the required Tailwind packages:
yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latestAfter those packages are finished installing we need to initialize Tailwind. To initialize tailwind use npx tailwind init -p this will create a minimal tailwind.config.js file for your configuration and it will also create a postcss.config.js that is already configured.
Next we need to tell tailwind to purge any unused styles in production. This is good practice as you don’t want to ship your library with any unused files as it would create bloat for end-users. To do this, configure the purge attribute in tailwind.config.js . We need to tell tailwind where we are using the styles so it can find the styles we use at build time. Add your index.html and your src directory into the purge configuration option like so:
Next create a css file to load tailwind’s built in styles. Create a new file in src/assets and call it index.js. Your index.js file should look like this:
Import your new css file into the main.js in the root of your directory. This will allow us to use Tailwind’s css utilities in our application.
Finally in App.vue apply some styles to your button. If your development server is already running, then your browser should automatically reload when you save your file.
Now we have a good looking button, and we want to share it to the world!
Configure Vite for Library Mode
To prepare our new component for shipping we need to configure Vite to build for library mode. There are other ways to build for production, such as single-page-apps and multi-page apps. Take a look at the docs to see other build modes.
To tell Vite to build for libary mode, we need to make some changes to the build.lib option in the vite config. Go into your vite.config.js and make the following changes:
So, what did we change? First we told Vite where our components that we want to be packaged are located: this is the entry option. Our entry file for our component library will be components/index.js file, since this is the file where we are exposing the files we wanted packaged. We also specify the name of our library, and the file name for the built files.
Next we need to externalize any dependencies that our library depends on. Since we are building a Vue component library, we need to specific Vue as a global dependency. Finally, since we are building for Vue we need to include Vite’s vue plugin.
Now with the config all finished, we can run vite build which will use a Rollup preset for building shipable libraries in two formats: es and umd. This can be configured in the build.lib option.
Now that our library is built, we can go to the last step: Publishing the library!
Publish to NPM
We are almost done, but before we can publish to NPM we need to make some changes to our package.json so it can be listed correctly on npm. Here is what the recommend package.json should look for your library:
With the package.json configured we can move on to publishing. Don’t forget to bump the version number everytime you make an update to the package. Since this is the first publishing event, our version number will be 0.0.1.
Publishing to NPM
First, make sure that you have an NPM account, since you can’t publish to NPM without one. Follow the signup workflow on NPM. Once your account is created, go inside of your terminal and add your NPM account to your npm config by running: npm adduser. This will add your npm credentials to your .npmrc file on your computer.
Finally, you can run npm publish. There you have it, you have successfully published your Vue Component Library to NPM using Vite!
Thank you for reading this post, I hope you enjoyed it and learned something new! Don’t be afraid to give Vite a try, it is a very powerful tool and has saved me a lot of headaches. If you like this kind of content, you can follow me on Twitter @the_victorv to stay up to date on the hottest trends in programming, business, and the internet!
