March 06, 2018 - VitoMd and the Evil Machine

How to create and publish a Vue.js component

It’s really easy to create a Vue.js component if you know how to do it.

I will give you a step by step guide to create a simple component. I created my Story dice roller and my vue-chessboard component this way, so it works fine.

Step 1) Install

You will need Node and npm installed in your system. An easy way to update Node is to install the n package

Install vue-cli if you don have it.

npm install -g @vue/cli
npm install -g @vue/cli-init
# Maybe you need to add sudo if you don't have writing access to global node modules.

Then we are going to use vue-share-components, an excellent vue-cli template to publish components.

vue init Akryum/vue-share-components vue-dice-roller

Here you have to select some options for your Vue.js component like: name, description, etc

Step 2) Create or use a parent project

Vue.js components are best used from another project. You can check if it’s working correctly while you are developing it.

It’s really easy.

If you don’t have another project to check your component, don’t worry, we can create a new one really quickly using a simple template. Go to another folder and create a new parent project.

vue init webpack-simple vue-component-checker
cd vue-component-checker
npm install
npm run dev

The server should be running on localhost:8080.

Step 3) Link your component and parent project

In you component folder execute npm link. Then go to the parent project folder and link your new component with npm link vue-dice-roller. Now there is a link in the node_module folder so you can access your component from the parent project.

Step 4) Code your component

Access your component and run it.

     cd vue-dice-roller
     npm install
     npm run dev

This templates generated a lot of useful things. We can run a server and we can publish it to npm with just a simple command.

Edit the sample files to whatever you want. For instance src/components/Test.vue to src/components/DiceRoller.vue. Modify the file to change the component name like this:

<template>
  <div id="dice-roller">
    <h1>Hello vue-dice-roller!</h1>
  </div>
</template>

<script>
export default {
  name: 'dice-roller',
  data () {
    return {
      name: 'something',
    }
  },
}
</script>

Modify the first part of src/index.js to export the component correctly, like this:

import DiceRoller from './components/DiceRoller.vue'

// Install the components
export function install (Vue) {
  Vue.component('dice-roller', DiceRoller)
}
// Expose the components
export {
  DiceRoller,
}

Step 5) Using the component

Let’s go to the project folder and modify the html from src/App.vue to import our component.

<template>
  <div id="app">
    <dice-roller/>
  </div>
</template>

<script>
  import {DiceRoller} from 'vue-dice-roller'

  export default {
    name: 'app',
    components: {
      DiceRoller
    },
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

Now run both your component and your project with npm run dev . If you go to localhost:80880 you should see Hello vue-dice-roller!

Step 6) Publish the component to npm

npm publish

The component will be built in production mode before getting published on npm.

Step 7) Completed

There is no step 7. You can go to npm and see your component. Here is mine https://www.npmjs.com/package/vue-dice-roller

If you update the code remember to edit the version field in package.json before publishing.

That’s it. Happy coding

Share this post on Twitter