Create component to be used via npm

Question

Create component to be used via npm

Navigation

#1 by (4 votes)

1

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

So I came to doubt How to create my component, upload to npmjs for whenever I use it, just give npm install -save ... , and also be able to contribute a bit with the community .

javascript vue.js npm webpack

asked by anonymous 11.12.2017 / 14:35

1 answer

Get the id of the maximum value Consultation with combined criteria

score 4 · Answer 1

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

Sample form input component using webpack

First, create a folder and give it a git init .
In it create the component file, in the case of this example the AppFormInput.vue containing all the structure, logic and style of the component.
Now, create a package.json (it may be the default of npm init) however you should indicate which is the "main" file, similarly below:
```
"name": "app-form-input",
"version": "1.0.0",
"main": "AppFormInput.vue",
"author": {

    "name" : "Dian Carlos"

}
```

Then give the commits and follow the standard steps to upload a project to npm, which you can find at link

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

Example of using the component within a .vue file

<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>