VueJS

How to Create and Deploy a Vue Component Library to NPM

Published Jul 18, 2022

Updated Feb 16, 2023

4 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Introduction

When working across multiple Vue projects that share the same design system, it is more efficient and faster to have a component library that you can reference for all your components within the different projects. In this article, we will go through the steps needed to create and deploy a Vue component library to npm, so we can reuse them across various projects.

Create a vue component library
Register library components
Setup a build process
Test locally then publish our library to npm

Create a Vue component library

Setup our Project

Let’s start by creating our Vue project. We would be using yarn for package management.

To start, lets run

npm init

For this tutorial, we are going to create just a single component within our component library. One of the things to consider when building a component library at scale is to allow import of just single components to enable tree shaking.

We would be using this folder structure for our component library:

- src /
  - components /
    - button /
      - button.vue
      - index.ts

    - index.ts

  - styles /
    - components /
        - _button.scss

    - index.scss

- Package.json
- rollup.config.js

Create button component

Let's create a simple button component. We define the basic props our component can accept and compute the class based on the props.

Add this to the button.vue file.

<!-- src/components/button/button.vue -->
<template>
    <button
        v-bind="$attrs"
        :class="rootClasses"
        :type="type"
        :disabled="computedDisabled"
    >
      <slot></slot>
    </button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'DSButton',
    inheritAttrs: false,
    props: {
        /**
         * disabled status
         * @values true, false
         */
        disabled: {
            type: Boolean,
        },
        /**
        * Color of button
        * @values primary, secondary
        */
        variant: {
            type: String,
            validator: (value: string) => {
                return [
                    'primary',
                    'secondary'
                ].indexOf(value) >= 0
            }
        },
        /**
         * type of button
         * @values button, submit
         */
        type: {
            type: String,
            default: 'button',
            validator: (value: string) => {
                return [
                    'button',
                    'submit',
                    'reset'
                ].indexOf(value) >= 0
            }
        },
        /**
         * Size of button
         * @values sm, md, lg
         */
        size: {
            type: String,
            validator: (value: string) => {
                return [
                    'sm',
                    'md',
                    'lg'
                ].indexOf(value) >= 0
            }
        }
    },
    computed: {
        rootClasses() {
            return [
                'ds-button',
                'ds-button--' + this.size,
                'ds-button--' + this.variant
            ]
        },
        computedDisabled() {
            if (this.disabled) return true
            return null
        }
    }
})
</script>

Let's style the button component, added our variant and size classes based on what is specified in the button component file.

Add this to the _button.scss file.

// src/styles/components/_button.scss
$primary: '#0e34cd';
$secondary: '#b9b9b9';
$white: '#ffffff';
$black: '#000000';
$small: '.75rem';
$medium: '1.25rem';
$large: '1.5rem';

.ds-button {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    text-decoration: none;
    outline: none;

    // variant
    &--primary {
        background-color: $primary;
        color: $white;
    }
    &--secondary {
        background-color: $secondary;
        color: $black;
    }

    // size
    &--sm {
        min-width: $small;
    }
    &--md {
        min-width: $medium;
    }
    &--lg {
        min-width: $large;
    }
}

Register library components

Next we need to register our components. To do this, we import all our components into a single file and create our install method.

// src/components/button/index.ts This file exports the install methods as default. For cases where we need to import just this button component in our other projects, it also exports Button which we will use in a bit.

// src/components/button/index.ts
import { App, Plugin } from 'vue'

import Button from './button.vue'

export default {
    install(Vue: App) {
        Vue.component(Button.name, Button)
    }
} as Plugin

export {
    Button as DSButton
}

// src/components/index.ts Lets import all the components in our components folder here. Since we have only our button component, we will imort it.

// src/components/index.ts
import Button from './button'

export {
    Button
}

// src/styles/index.scss Lets import all the components styles into index.scss in our styles folder. This helps us with having one source of export for all of our styles.

// src/styles/index.scss
@import "components/_button";

// src/index.ts Lets import all the components into index.ts in our src folder. Here, we create our install method for all the component. We export DSLibrary as default, and also export all our components.

// src/index.ts
import { App } from 'vue'

import * as components from './components'

const DSLibrary = {
    install(app: App) {
        // Auto import all components
        for (const componentKey in components) {
            app.use((components as any)[componentKey])
        }
    }
}

export default DSLibrary

// export all components as vue plugin
export * from './components'

Lets create a file called shim-vue.d.ts to help us with importing Vue files into our TypeScript files, and remove any linting errors caused by it.

// src/shim-vue.d.ts
declare module '*.vue' {
  import type { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

Setup a build process

In building the library, we need to create a bundled and minidifed of the library that will be shared to npm, for this we would use Rollup. Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger.

build component (vue code)
build styling (scss code)

Install rollup, and all of the rollup modules we would need.

$ npm i -D rollup rollup-plugin-vue rollup-plugin-terser rollup-plugin-typescript2 @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve

Build component (vue code)

we need two major build types for our component library to support various projects.

ES module - It has no requirements or exports
CommonJS module

Lets create a rollup.config.js file in the root folder and paste this there.

import { text } from './build/banner.json'
import packageInfo from './package.json'

import vue from 'rollup-plugin-vue'
import node from '@rollup/plugin-node-resolve'
import cjs from '@rollup/plugin-commonjs'
import babel from '@rollup/plugin-babel'
import { terser } from 'rollup-plugin-terser'
import typescript from 'rollup-plugin-typescript2';

import fs from 'fs'
import path from 'path'

const baseFolderPath = './src/components/'
const banner = text.replace('${version}', packageInfo.version)

const components = fs
    .readdirSync(baseFolderPath)
    .filter((f) =>
        fs.statSync(path.join(baseFolderPath, f)).isDirectory()
    )

const entries = {
    'index': './src/index.ts',
    ...components.reduce((obj, name) => {
        obj[name] = (baseFolderPath + name)
        return obj
    }, {})
}

const babelOptions = {
    babelHelpers: 'bundled'
}

const vuePluginConfig = {
    template: {
        isProduction: true,
        compilerOptions: {
            whitespace: 'condense'
        }
    }
}

const capitalize = (s) => {
    if (typeof s !== 'string') return ''
    return s.charAt(0).toUpperCase() + s.slice(1)
}

export default () => {
    let config = []

    if (process.env.MINIFY === 'true') {
        config = config.filter((c) => !!c.output.file)
        config.forEach((c) => {
            c.output.file = c.output.file.replace(/\.m?js/g, r => `.min${r}`)
            c.plugins.push(terser({
                output: {
                    comments: '/^!/'
                }
            }))
        })
    }
    return config
}

Next, we create a build folder in the root of our project, and add a file called banner.json to it. We want our builds to contain the current app version everytime we build. This file is already imported into the rollup.config.js file, and we use the package version from our package.json to update the version.

{
    "text": "/*! DS Library v${version} */\n"
}

Currently, our config is an empty array. Next, we will add the different builds we want.

entries: path to files we want rollup to bundle external: the external package needed output.format: the bundled file format output.dir: the bundled files directory output.banner: text added to the begining of the file plugins: specify methods used to customize rollup behaviour

First we create an esm build for each component in our library:

    config = [{
         input: entries,
         external: ['vue'],
         output: {
             format: 'esm',
             dir: `dist/esm`,
             entryFileNames: '[name].mjs',
             chunkFileNames: '[name]-[hash].mjs',
         },
         plugins: [
             node({
                 extensions: ['.vue', '.ts']
             }),
             typescript({
                 typescript: require('typescript')
             }),
             vue(vuePluginConfig),
             babel(babelOptions),
             cjs()
         ]
     }],

Next we create a single esm build for all the components:

    config = [
      ...,
     {
         input: 'src/index.ts',
         external: ['vue'],
         output: {
             format: 'esm',
             file: 'dist/ds-library.mjs',
             banner: banner
         },
         plugins: [
             node({
                 extensions: ['.vue', '.ts']
             }),
             typescript({
                 typescript: require('typescript')
             }),
             vue(vuePluginConfig),
             babel(babelOptions),
             cjs()
         ]
     }
   ],

Then we create an cjs build for each component in our library:

    config = [
      ...,
      ...,
     {
         input: entries,
         external: ['vue'],
         output: {
             format: 'cjs',
             dir: 'dist/cjs',
             exports: 'named'
         },
         plugins: [
             node({
                 extensions: ['.vue', '.ts']
             }),
             typescript({
                 typescript: require('typescript')
             }),
             vue(vuePluginConfig),
             babel(babelOptions),
             cjs()
         ]
     }
   ],

After that, we create a single cjs build for each component in our library

    config = [
      ...,
      ...,
      ...,
     {
         input: 'src/index.ts',
         external: ['vue'],
         output: {
             format: 'umd',
             name: capitalize('ds-library'),
             file: 'dist/ds-library.js',
             exports: 'named',
             banner: banner,
             globals: {
                 vue: 'Vue'
             }
         },
         plugins: [
             node({
                 extensions: ['.vue', '.ts']
             }),
             typescript({
                 typescript: require('typescript')
             }),
             vue(vuePluginConfig),
             babel(babelOptions),
             cjs()
         ]
     }

   ],

Finally, we update our package.json with our script command. We need both rimraf (to remove our old dist folder before we create a new bundle) and clean-css (to minify our bundled css file), so lets install:

$ npm i -D rimraf clean-css-cli

now lets update our package.json script

build:vue = rollup and minify build:style = bundled our style from scss to css, add our banner text(version number like we did above) and save in dist/ds-library.css then create a minified version.

For the banner text in our css file, we need to create a print-banner.js file inside the build folder. It takes our banner text, and writes it to the file.


// build/print-banner.js
const packageInfo = require('../package.json')
const { text } = require('./banner.json')

process.stdout.write(text.replace('${version}', packageInfo.version))
process.stdin.pipe(process.stdout)

build:lib = delete dist folder, build vue and style code publish:lib = run our build lib command then publish to npm

    "scripts": {
        "build:vue": "rollup -c && rollup -c --environment MINIFY",
        "build:vue:watch": "rollup -c --watch",
        "build:style": "sass --no-charset ./src/styles/index.scss | node ./build/print-banner.js > dist/ds-library.css && cleancss -o dist/ds-library.min.css dist/ds-library.css",
        "build:lib": "rimraf dist && npm run build:vue && npm run build:style",
        "publish:lib": "npm run build:lib && npm publish"
    },
    "peerDependencies": {
        "vue": "^3.0.0"
    },

Test locally then publish our library to npm

Now that we are done, we can test locally by running npm link in the root directory of this repo and also running npm link "package name" in the root directory of our test project. After this, the package will be available for use in our test package.

Once tested, you can run npm publish:lib to build and deploy to npm.

If you have any questions or run into any trouble, feel free to reach out on Twitter or Github.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Adesoji Temitope
@temitopedavid_@temitopeadesoji

Awesome 3D experience with VueJS and TresJS: a beginner's guide

Awesome 3D experience with VueJS and TresJS: a beginner's guide Vue.js developers are renowned for raving about the ease, flexibility, and speed of development their framework offers. Tres.js builds on this love for Vue by becoming the missing piece for seamless 3D integration. As a Vue layer for Three.js, Tres.js allows you to leverage the power of Three.js, a popular 3D library, within the familiar and beloved world of Vue components. This means you can create stunning 3D graphics and animations directly within your Vue applications, all while maintaining the clean and efficient workflow you've come to expect. TresJS is a library specifically designed to make incorporating WebGL (the web's 3D graphics API) into your Vue.js projects a breeze. It boasts several key features that make 3D development with Vue a joy: - Declarative Approach: Build your 3D scenes like you would any other Vue component, leveraging the power and familiarity of Vue's syntax. This makes it intuitive and easy to reason about your 3D elements. - Powered by Vite: Experience blazing-fast development cycles with Vite's Hot Module Replacement (HMR) that keeps your scenes updated in real-time, even as your code changes. - Up-to-date Features: Tres.js stays on top of the latest Three.js releases, ensuring you have immediate access to the newest features and functionality. - Thriving Ecosystem: The Tres.js ecosystem offers many resources to enhance your development experience. This includes: - Cientos: A collection of pre-built components and helpers that extend the capabilities of Tres.js, allowing you to focus on building your scene's functionality rather than reinventing the wheel (https://cientos.tresjs.org/). - TresLeches: A powerful state management solution specifically designed for 3D applications built with Tres.js (https://tresleches.tresjs.org/). You can try TresJS online using their official Playground or on their StackBlitz starter. But now, let's dive into a quick code example to showcase the simplicity of creating a 3D scene with TresJS. Setup First, install the package: npm install @tresjs/core three And then, if you are using Typescript, be sure to install the types: npm install @types/three -D If you are using Vite, now you need to modify your vite.config.ts file in this way to make the template compiler work with the custom renderer: ` Create our Scene Imagine a 3D scene as a virtual stage. To bring this stage to life, we need a few key players working together: 1. Scene: Think of this as the container that holds everything in your 3D world. It acts as the canvas where all the objects, lights, and the camera reside, defining the overall environment. 2. Renderer: This is the magician behind the curtain, responsible for taking all the elements in your scene and translating them into what you see on the screen. It performs the complex calculations needed to transform your 3D scene into 2D pixels displayed on your browser. 3. Camera: Like a real camera, this virtual camera defines the perspective from which you view your scene. You can position and adjust the camera to zoom in, zoom out, or explore different angles within your 3D world. - To make our camera dynamic and allow canvas exploration, we are going to leverage the client's OrbitControls component. Below are our examples. You will see that we just include the component in our canvas, and it just works. 4. Objects: These actors bring your scene to life. They can be anything from simple geometric shapes like spheres and cubes to complex models like characters or buildings. You create the visual elements that tell your story by manipulating and animating these objects. Starting from the beginning: to create our Scene with TresJS we just need to use our component TresCanvas in our Vue component's template: ` The TresCanvas component is going to do some setup work behind the scenes: - It creates a WebGLRenderer that automatically updates every frame. - It sets the render loop to be called on every frame based on the browser refresh rate. Using the window-size property, we force the canvas to take the width and height of our full window. So with TresCanvas component we have created our Renderer and our Scene. Let's move to the Camera: ` We just have to add the TresPerspectiveCamera component to our scene. NOTE: It's important that all scene-related components live between the TresCanvas component. Now, only the main actor is missing, let's add some styles and our object inside the scene. Our Vue component will now look like: ` And our scene will be: A Mesh is a basic scene object in three.js, and it's used to hold the geometry and the material needed to represent a shape in 3D space. As we can see, we can achieve the same with TresJS using the TresMesh component, and between the default slots, we are just passing our object (a Box in our example). One interesting thing to notice is that we don't need to import anything. That's because TresJS automatically generates a Vue Component based on the three objects you want to use in PascalCase with a Tres prefix. Now, if we want to add some color to our object the Three.js Material class comes to help us. We need to add: ` Conclusion Tres.js not only supercharges Vue.js applications with stunning 3D graphics, but it also integrates seamlessly with Nuxt.js, enabling you to harness the performance benefits of server-side rendering (SSR) for your 3D creations. This opens the door to building exceptional web experiences that are both interactive and performant. With Tres.js, Vue.js developers can leverage a declarative approach, cutting-edge features, and a vast ecosystem to bring their immersive web visions to life. If you want to elevate your Vue.js projects with a new dimension, Tres.js is an excellent choice to explore....

Jun 12, 2024

3 mins

Vue3D

You Can’t Mentor Junior and Senior Engineers the Same with Dan DiGangi

In this episode of the Engineering Leadership series, Dan Gigangi shed light on the crucial role that engineering leaders play in promoting a culture of learning within their organizations, focusing on the importance of adapting communication styles, expanding impact beyond coding, setting long-term visions, and navigating the challenges of transitioning from technical roles to leadership positions. One of the key points emphasized by Dan Gigangi is the significance of adapting communication styles to cater to different skill levels. Effective communication is essential for fostering collaboration and ensuring that complex technical concepts are understood by all team members. By tailoring their communication approaches, engineering leaders can bridge the gap between varying levels of expertise, creating a cohesive and productive work environment. Dan highlights the need for senior engineers to make a broader impact beyond coding. While technical expertise is undoubtedly important, engineering leaders should encourage their team members to think beyond their immediate tasks and consider the larger organizational goals. By empowering senior engineers to take on leadership roles and contribute to strategic decision-making, leaders can foster a culture of innovation and drive long-term success. The conversation between Dan Gigangi and Tracy Lee also emphasizes the importance of setting long-term visions and executing strategic plans for career progression. Engineering leaders should guide their team members in envisioning their professional goals and provide guidance on how to achieve them. By creating a roadmap, leaders can inspire their team members to continuously learn and grow, ultimately driving their own career advancement and contributing to the success of the organization. Dan also discusses the challenges and pitfalls of transitioning from technical roles to leadership positions. While technical expertise is a solid foundation, engineering leaders must also develop non-technical skills such as communication, relationship-building, and strategic thinking. This transition requires a shift in mindset and the ability to navigate complex organizational dynamics. By recognizing and addressing these challenges, aspiring leaders can better prepare themselves for the demands of leadership roles. Download this episode here....

Apr 11, 2024

2 mins

Engineering Leadershipnpm

Understanding Side Effects in VueJS

Introduction In this article, we will talk about side effects in VueJS, and how to prevent some of them. Side effects are not outrightly bad since they might have some usecase like in a setTimeout() function. But we need to try to ensure that we know about these side effects. What are side effects? A side effect is when a function changes or modifies data that does not exist in its local scope. A simple example is a function that receives a parameter which is an Array, and inside that function, it changes the data in that array. Example: ` From this example above, we find out that numberList is been mutated when additem is called. Side Effects in Vue Example 1: Side Effects in Computed Properties Lets try to create a side effect example in a computed property. ` From the example above, we would see that the Unsorted Data and Sorted Data are the same. this.languages data model gets mutated when sortedLanguages is referenced. This is a side effect that can result in unexpected behaviours in your application if not properly handled. Example 2: Side effects wWen Accessing Getters Lets try to create a side effect example when accessing and assigning a getters data model. // store/index.js ` From this example, we would see that the store gets updated when we call (dispatch) the action sortLanguages. This is a side effect that can result in unexpected behaviours in your application, because the languages state is been mutated. How Do We Resolve These Side Effects? - Shallow clone ` When we shallow clone a language's array using the .slice() method, it returns a shallow copy of a portion of the array into a new array object. We do this to prevent a mutation of the language's data model. - Deep clone ` To deep clone, we can simply use json.parse(json.stringify(()) on our data model. JSON.stringify converts the data model to a string which removes references from the data model. JSON.parse converts the string back to an array of objects. In Vue, side effects that modify reactive properties in the store can be hidden and cause unexpected bugs which can be difficult to trace and debug. It's my hope that this article helps you better identify and respond to side effects in VueJS. If you have any questions or run into any trouble, feel free to reach out on Twitter or Github....

Sep 12, 2022

2 mins

Vue

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau

In this episode of the Modern Web Podcast, Danny Thompson sits down with Ferdinand Como and Baptiste Leproux from Nuxt Labs to uncover the story behind Nuxt Studio, a tool that's transforming how developers and non-technical users interact with Nuxt applications. Ferdinand and Baptiste share how Nuxt Studio bridges the gap between developer customization and user-friendly content management. Built to empower agencies, freelancers, and their clients, Nuxt Studio combines powerful features like live previews, Vue component integration, and schema-driven forms to make managing content seamless. The conversation also explores the broader mission of Nuxt Labs—building sustainable open-source tools that enhance developer experience and meet real-world needs. With insights into the future of Nuxt Studio and its potential to scale for larger organizations, this episode is a must-listen for anyone passionate about innovation in web development. Chapters 1. Introduction and Setting the Stage (00:00:00) 2. The Vision Behind Nuxt Studio (00:03:10) 3. Nuxt Studio’s Core Features (00:08:45) 4. Challenges in Building Nuxt Studio (00:16:20) 5. Target Audience and Use Cases (00:22:35) 6. Sustainability in Open Source (00:29:00) 7. The Future of Nuxt Studio (00:35:10) 8. Nuxt Studio’s Role in the Nuxt Ecosystem (00:42:30) 9. Closing Thoughts and What’s Next (00:48:00) 10. Sponsor Shoutout and Wrap-Up (00:53:20) Follow Baptiste Leproux and Ferdinand Coumau Baptiste Twitter: https://x.com/_larbish Ferdinand Twitter: https://x.com/CoumauFerdinand Baptiste Linkedin: https://www.linkedin.com/in/baptiste-leproux-618842b0/ Ferdinand Linkedin: https://www.linkedin.com/in/ferdinand-coumau-nuxt/ Sponsored by This Dot: thisdot.co...

Nov 20, 2024

2 mins

VueNuxtJS

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

How to Create and Deploy a Vue Component Library to NPM

Introduction

Create a Vue component library

Setup our Project

Create button component

Register library components

Setup a build process

Build component (vue code)

Test locally then publish our library to npm

Adesoji Temitope

You might also like

Awesome 3D experience with VueJS and TresJS: a beginner's guide

You Can’t Mentor Junior and Senior Engineers the Same with Dan DiGangi

Understanding Side Effects in VueJS

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau

Let's innovate together!

You might also like

Awesome 3D experience with VueJS and TresJS: a beginner's guide

You Can’t Mentor Junior and Senior Engineers the Same with Dan DiGangi

Understanding Side Effects in VueJS

How Nuxt Studio is Redefining Developer & User Experience with Baptiste Leproux & Ferdinand Coumau