vue3-lib-tmpl

Generador de plantillas para crear librerías de componentes Vue 3 con Tailwind CSS y FontAwesome preconfigurados.

Requisitos

• Node.js 18+
• npm 7+

Uso

npx @luis-angel-martin-dzul/vue3-lib-tmpl <nombre-del-proyecto>

Ejemplo

npx @luis-angel-martin-dzul/vue3-lib-tmpl mi-nueva-libreria

Esto crea una carpeta mi-nueva-libreria/ lista para desarrollar.

Lo que genera

mi-nueva-libreria/
├── index.html                  ← entrada del demo
├── index.js                    ← entry point de la librería
├── package.json                ← nombre y dist configurados automáticamente
├── vite.config.js              ← dev server con Tailwind
├── vite.config.build.js        ← build de librería (vue externo)
├── .gitignore
└── src/
    ├── main.js
    ├── style.css               ← Tailwind + paleta de colores custom
    ├── App.vue                 ← demo de desarrollo
    └── components/
        └── MyComponent.vue     ← componente de ejemplo

Primeros pasos

cd mi-nueva-libreria
npm install
npm run dev

Abre http://localhost:5173 para ver el demo del componente.

Scripts disponibles

| Comando | Descripción | |---|---| | npm run dev | Servidor de desarrollo con hot-reload | | npm run build | Genera los archivos de distribución en dist/ | | npm run preview | Vista previa del build |

Incluido por defecto

• Vue 3 — framework
• Vite — bundler y dev server
• Tailwind CSS v4 — estilos utilitarios con paleta custom en src/style.css
• FontAwesome 6 — iconos disponibles en todos los componentes

Estructura de la librería

Desarrollo local

vite.config.js corre el demo en src/App.vue con soporte completo de Tailwind.

Build para distribución

vite.config.build.js exporta los componentes en dos formatos:

• dist/<nombre>.es.js — ES Module (para bundlers como Vite/Webpack)
• dist/<nombre>.umd.js — UMD (para uso directo en HTML con <script>)

vue se declara como dependencia externa, por lo que no se incluye en el bundle.

Agregar un componente

1. Crea el archivo en src/components/MiComponente.vue
2. Expórtalo en index.js:

import MiComponente from './src/components/MiComponente.vue'

export { MiComponente }

export default {
  install(app) {
    app.component('MiComponente', MiComponente)
  },
}

3. Úsalo en src/App.vue para probarlo durante el desarrollo.

Publicar en npm

npm run build
npm publish --access public

Usar la librería publicada en otro proyecto

npm install mi-nueva-libreria

// Registrar globalmente
import MiLibreria from 'mi-nueva-libreria'
app.use(MiLibreria)

// O importar componente por componente
import { MiComponente } from 'mi-nueva-libreria'

Autor

Luis A Martin Dzul — [email protected]