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):
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.
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:
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