Skip to content
Alebat

Librería de componentes

Creación y configuración para crear una librería de componentes

Para crear una librería de componentes, lo primero que debemos hacer es crear un nuevo proyecto de Vue 3.

Una vez creado el proyecto, aplicaremos la siguiente configuración:

Creación de .npmignore:

Esto es necesario para que no se suban los archivos innecesarios a npm.

node_modules
src
vite.config.ts
.eslintrc
tsconfig.json

Configuración de package.json:

Añadir los siguientes elementos:

  "name": "catalogue-of-components",
  "version": "0.0.12",
  "description": "Library of Vue 3 components",
  "main": "./dist/catalogue-of-components.umd.js",
  "module": "./dist/catalogue-of-components.es.js",
  "exports": {
    ".": {
      "types": "./dist/types/index.d.ts", // Importante que types esté el primero
      "import": "./dist/catalogue-of-components.es.js",
      "require": "./dist/catalogue-of-components.umd.js"
    },
    "./style": {
      "import": "./dist/catalogue-of-components.css",
      "default": "./dist/catalogue-of-components.css"
    }
  },
  "author": {
    "name": "Desarrollador",
    "email": "desarrollador@alebateducation.com"
  },
  "license": "MIT",
  "files": [
    "dist"
  ],
  "private": false,

En el apartado de scripts, añadir el siguiente comando:

  "scripts": {
    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly --outDir dist",
  },

Configuración de tsconfig.json:

{
  "compilerOptions": {
    "declaration": true,
    "emitDeclarationOnly": true,
    "outDir": "dist/types",
    "module": "ESNext",
    "target": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "moduleResolution": "Node",
    "jsx": "preserve",
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/index.ts", "src/components/**/*.vue"],
  "exclude": ["node_modules", "dist", "src/assets/**/*"]
}

Configuración de vite.config.ts:

Añadir el siguiente código:

import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueDevTools from "vite-plugin-vue-devtools";
import dts from "vite-plugin-dts";
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    dts({
      insertTypesEntry: true, // Agrega un archivo `index.d.ts` al paquete
      outDir: "dist/types", // Genera tipos en un subdirectorio
      include: ["src/index.ts", "src/components/**/*.vue"],
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  build: {
    lib: {
      entry: fileURLToPath(new URL("./src/index.ts", import.meta.url)), // Archivo de entrada
      name: "MiLibreriaVue",
      fileName: (format) => `catalogue-of-components.${format}.js`,
      formats: ["es", "umd"], // Formatos ESM y UMD
    },
    rollupOptions: {
      external: ["vue"], // Excluye Vue del bundle
      output: {
        globals: {
          vue: "Vue", // Define Vue como global para UMD
        },
      },
    },
  },
});

Configuración de index.ts:

Esta es la forma de importar y exportar los componentes de la librería. Obviamente este es un ejemplo.

import type { App } from "vue";
import "./assets/variables.css";
import "./assets/reset.css";
import TheButton from "./components/TheButton.vue";


export { TheButton };


export const installCatalogue = (app: App): void => {
  app.component("TheButton", TheButton);
};

Para importar todos los componentes de la librería, hay que implementar un bucle que recorra todos los archivos de la carpeta components y los exporte.

import { App } from "vue";


// Importa todos los archivos .vue en la carpeta de componentes
const components = import.meta.glob("../components/**/*.vue", { eager: true });


export default {
  install(app: App): void {
    Object.entries(components).forEach(([path, module]) => {
      // Obtén el nombre del componente, asumiendo que es el nombre del archivo
      const componentName = path
        .split("/")
        .pop()
        ?.replace(/\.\w+$/, ""); // Remueve la extensión del archivo


      if (componentName && module.default) {
        app.component(componentName, module.default);
      }
    });
  },
};

Crear el dist:

Antes de publicar la librería, hay que crear el dist con el comando npm run build.

La estructura del directorio dist será la siguiente:

  • Directorydist/
    • Directorycomponents/
      • TheButton.vue.d.ts
    • Directorytypes/
      • Directorycomponents/
        • TheButton.vue.d.ts
      • index.d.ts
    • catalogue-of-components.css
    • catalogue-of-components.es.js
    • catalogue-of-components.umd.js
    • index.d.ts

Publicación de la librería

Para publicar la librería, hay que seguir los siguientes pasos:

  1. Crear una cuenta en npm.
  2. Iniciar sesión en la terminal con el comando npm login.
  3. Publicar la librería con el comando npm publish.

Uso de la librería en Nuxt3

Instalar la librería en Nuxt3

Instalar la librería en un proyecto de Nuxt3 con el comando

Terminal window
npm install catalogue-of-components

Crear el plugin

Crear un archivo llamado catalogue-of-components.ts en la carpeta plugins con el siguiente contenido:

import { defineNuxtPlugin } from "#app";
import { installCatalogue } from "catalogue-of-components"; // Importa la función de instalación
import "catalogue-of-components/style"; // Importa el archivo de estilos


export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(installCatalogue);
});

Ejemplo de uso Nuxt3

Como todos sabemos, en Nuxt no es necesario importar los componentes. En el archivo .vue donde se quiera usar el componente, añadir el siguiente código:

<TheButton>Click me!</TheButton>