Create component to be used via npm

Question

I started working a lot with vue and I started to use it in all projects in the company where I work. And with that, I ended up creating some componentes, in general autocomplete, I know there are many, I’ve used some, but none has met all my needs. However, whenever I go to work on a new project and use the same component, either I recreate it, or I copy and paste.

Then the doubt came to me How to create my component, go up to npmjs for whenever I go to use it, just give a npm install -save ..., and also be able to contribute a little to the community.

Answer 1

You must select all your components separately and indicate which index file (in this case the component file) is in package.json.

Example of form input component using webpack

• First, create a folder and give a git init in it.
• Within it create the component file, in the case of this example the AppFormInput.vue containing the whole structure, logic and style of the component.

• Now, create a package.json (it might be the default for npm init) but you should indicate which file is "main", similarly below:

  "name": "app-form-input",
  "version": "1.0.0",
  "main": "AppFormInput.vue",
  "author": {
  
      "name" : "Dian Carlos"
  
  }
  

After that take the commits and follow the standard steps to move up a project on npm, which you find on https://docs.npmjs.com/getting-started/publishing-npm-packages

With the published component, you will be able to install it with npm i --save app-form-input.

Example of component usage within a file. Vue

<template>

    <div class="form">

        <app-form-input name="titulo"></app-form-input>

    </div>

</template>

<script>

import AppFormInput from 'app-form-input';

export default {

    components : {

        AppFormInput

    }

}

</script>

<style lang="css">

    .form {

        float: left;

        width: 100%;

    }

</style>