Cómo publicar tu primer componente VueJs en NPM

Fabian Zamudio

Los componentes de Vue por naturaleza están destinados a ser reutilizados. Esto es fácil cuando el componente solo se usa dentro de una sola aplicación. Pero, ¿cómo puede escribir en el componente una vez y usarlo en múltiples aplicaciones? Quizás la solución más fácil es a través de npm.

 

Para facilitar este proceso vamos a usar el repositorio vue-sfc-rollup que con unos simple pasos nos genera todos los archivos necesarios para publicar un "single component" o un "library" (dejo para el lector investigar más sobre las configuraciones del segundo caso). En primer lugar instalaremos esta extensión.

 

npm install -g vue-sfc-rollup

sfc-init


Esto iniciará un proceso de preguntas para generar una configuración general de nuestro componente. Estas opciones son:

 

Is this a single component or a library? {Single Component | Library }

What is the npm name of your component? {nombre de tu componente}

What is the kebab-case tag name for your component? {tag-de-componente}

Enter a location to save the component files: {path/to/your/component}



Luego de este proceso ya tendremos nuestro componente para poder editarlo y agregarle toda la lógica que queramos dentro de la carpeta src/ pero esto ya es tarea de ustedes. Ahora lo que nos queda es publicarlo y para eso es necesario primero que nada tener una cuenta en www.npmjs.com (les dejo un link para saber como es el proceso para crear la cuenta y asociarla en su PC https://docs.npmjs.com/creating-a-new-npm-user-account)


 

# dentro de la carpeta del componente
cd path/to/your/component

# Realizamos el build necesario
npm run build

# Rollup does its thing...done!
# Publicamos el componente (recuerden cambiar la versión en package.json)
npm publish



Listo!! ahora ya tienes tu primer componente publicado en NPM. 

 

  • vuejs
  • npm
  • package
  • json
WRITTEN BY

Software Developer. Follow me: LinkedIn @fabian-zamudio-dev | Github @zamudio-fabian | Twitter @fabian_zamudio