Component libraries are all the rage these days. They make it easy to maintain a consistent look and feel across an application.

I’ve used a variety of different libraries in my career so far, but using a library is very different than knowing exactly what goes into making one.

I wanted a more in depth understanding of how a component library is built, and I want to show you how you can get a better understanding too.

To create this component library, we’re going to use the vue-sfc-rollup npm package. This package is a very useful utility when starting a component library.

If you have an existing library that you want to use the utility with, refer to the documentation they provide.

This package creates a set of files for the project to start out. As their documentation explains, the files it creates includes the following (SFC stands for Single File Component):

• a minimal rollup config
• a corresponding package.json file with build/dev scripts and dependencies
• a minimal babel.config.js and .browserslistrc file for transpiling
• a wrapper used by rollup when packaging your SFC
• a sample SFC to kick-start development
• a sample usage file which can be used to load/test your component/library during development

The utility supports both Single File Components as well as a library of components. It is important to note this sentence from the documentation:

In library mode, there is also an ‘index’ which declares the components exposed as part of your library.

All this means is that there is some extra files generated in the setup process.

Cool, let’s build the library

First you’ll want to install the vue-sfc-rollup globally:

npm install -g vue-sfc-rollup

Once that is installed globally, from the command line, go into the directory where you want your library project to be located. Once you are in that folder, run the following command to initialize the project.

sfc-init

Choose the following options within the prompts:

• Is this a single component or a library? Library
• What is the npm name of your library? (this will need to be unique on npm. I used brian-component-lib)
• Will this library be written in JavaScript or TypeScript? JavaScript (feel free to use TypeScript if you know what you’re doing)
• Enter a location to save the library files: This is the folder name you want your library to have. It will default to the npm name you gave it above so you can just hit enter.

After the setup is complete, navigate to your folder and run an npm install.

cd path/to/my-component-or-lib

npm install

Once that is done, you can open the folder up in your editor of choice.

As stated above, there is a sample Vue component built for us. You can find it inside of the /src/lib-components folder. To see what this component looks like, you can run npm run serve and navigate to http://localhost:8080/

Now let’s add our own custom component. Create a new Vue file inside of the lib-components folder. For this example, I am going to imitate the button used in the freeCodeCamp assignment sections, so I’ll name it FccButton.vue

#vue #npm #javascript #developer