input-vue3-components

Configuración para la generación de un modulo npm con vue 3 

Favor de leer primero y luego ejecutar las instrucciones

Instalar la siguiente paquetería a nustro proyecto para generar los modulos 

https://www.npmjs.com/package/rollup
npm i rollup

https://www.npmjs.com/package/@rollup/plugin-buble
npm i @rollup/plugin-buble

https://www.npmjs.com/package/rollup-plugin-vue
npm i rollup-plugin-vue

https://www.npmjs.com/package/vue-template-compiler
npm i vue-template-compiler

cada uno de estos paquetes instalarlo con la terminación –save-dev para que se instalen el modo de desarrollo 
ejemplo 

npm i vue-template-compiler –save-dev


paso 2 

En nuestro package.json agregaremos las lineas donde estos modulos aran una referencia a donde nuestro coponete realizara su exportacion que en este caso seria la carpeta dist/ y el nombre de nuestro componete junto con la extencion, tambien de donde probiene el componente que exportaremos

"main": "dist/my-component.umd.js",
  "module": "dist/my-component.esm.js",
  "unpkg": "dist/my-component.min.js",
  "browser": {
    "./sfc": "src/my-component.vue"
  },





Paso 2.1

"name": "input-vue3-components",
"version": "0.1.0",

En esta seccion Podemos versionar nuestra paqueteria y realizar sus distintas versiones.

Paso 3 
Seguido agregaremos estas lineas en el mismo archivo  donde este sera en cargado de exportar el modulo de la paqueteria.
"scripts": {
    "build": "npm run build:umd & npm run build:es & npm run build:unpkg",
    "build:umd": "rollup --config rollup.config.js --format umd --file dist/my-component.umd.js",
    "build:es": "rollup --config rollup.config.js --format es --file dist/my-component.esm.js",
    "build:unpkg": "rollup --config rollup.config.js --format iife --file dist/my-component.min.js"
  },

Paso 4 
Crearemos un archivo llamado rollup.config.js, en este archivo agregaremos lo siguiente y Podemos crearlo a nivel de rais del Proyecto.

import vue from 'rollup-plugin-vue'; // Handle .vue SFC files
import buble from 'rollup-plugin-buble'; // Transpile/polyfill with reasonable browser support
export default {
    input: 'src/index.js', // Path relative to package.json
    output: {
        name: “Nombre de nuestro componente”,
        exports: 'named',
    },
    plugins: [
        vue({
            css: true, // Dynamically inject css as a <style> tag
            compileTemplate: true, // Explicitly convert template to render function
        }),
        buble(), // Transpile to ES5
    ],
};

Paso 5 
Por ultimo en la capeta src crearemos un archivo js llamado index.js donde agregaremos las siguientes líneas del código 

// Import vue component
import component from './'’Agregamos la ruta del componete a exportar’ ';

// Declare install function executed by Vue.use()
export function install(Vue) {
	if (install.installed) return;
	install.installed = true;
	Vue.component('InputReactiveFormSimple', component);
}

// Create module definition for Vue.use()
const plugin = {
	install,
};

// Auto-install when vue is found (eg. in browser via <script> tag)
let GlobalVue = null;
if (typeof window !== 'undefined') {
	GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
	GlobalVue = global.Vue;
}
if (GlobalVue) {
	GlobalVue.use(plugin);
}

// To allow use as module (npm/webpack/etc.) export component
export default component;