DEV Community: Juan Pablo Pérez lantes

Crear librería Vue3 TS

Juan Pablo Pérez lantes — Wed, 24 Sep 2025 12:12:18 +0000

Básicamente lo que voy a hacer es un apunte de como generar una librería de de Vue3 con typeScript.

Lo voy a hacer lo mas genérico posible ya que cualquier componente que quieran pasar a una librería lo deberían poder hacer.

Vamos a comenzar con la creación de un proyecto en Vue3-TypeScript

npm create vite

> npx
> cva

│
◇  Project name:
│  v-jp-button
│
◇  Select a framework:
│  Vue
│
◇  Select a variant:
│  Official Vue Starter ↗

> npx
> create-vue v-jp-button

┌  Vue.js - The Progressive JavaScript Framework
│
◇  Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
│  TypeScript, ESLint (error prevention), Prettier (code formatting)
│
◇  Select experimental features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to
confirm)
│  Oxlint (experimental), rolldown-vite (experimental)
│
◇  Skip all example code and start with a blank Vue project?
│  No

Scaffolding project in /Users/user/Documents/codigo/proyectos/v-jp-button...
│
└  Done. Now run:

   cd v-jp-button
   npm install
   npm run format
   npm run dev

| Optional: Initialize Git in your project directory with:

   git init && git add -A && git commit -m "initial commit"

Ahora vamos a crear un componente "button" poco sofisticado pero publicable.

Y quedaría algo así:

<template>
  <button class="button" :class="color" @click="handleClick()">{{ text }}</button>
</template>

<script setup lang="ts">

type ButtonColor = 'button-primary' | 'button-secondary' | 'button-success' | 'button-danger' | 'button-warning' | 'button-info'

interface Props {
  text: string
  color?: ButtonColor
}

withDefaults(defineProps<Props>(), {
  color: 'button-primary'
})

const emit = defineEmits(['clickBtn'])

const handleClick = () => emit('clickBtn')

</script>

<style scoped>
.button {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  color: #000;
  background-color: transparent;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.button:hover {
  background-color: transparent;
  box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.15), 0 3px 6px -2px rgba(0, 0, 0, 0.2);
}

.button:active {
  transform: scale(0.98);
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.button-primary {
  color: #fff;
  background-color: #0d6efd;
}

.button-primary:hover {
  color: #fff;
  background-color: #0b5ed7;
}

.button-secondary {
  color: #fff;
  background-color: #6c757d;
}

.button-secondary:hover {
  color: #fff;
  background-color: #5a6268;
}

.button-success {
  color: #fff;
  background-color: #198754;
}

.button-success:hover {
  color: #fff;
  background-color: #157347;
}

.button-danger {
  color: #fff;
  background-color: #dc3545;
}

.button-danger:hover {
  color: #fff;
  background-color: #b02a37;
}

.button-warning {
  background-color: #ffc107;
  color: #fff;
}

.button-warning:hover {
  color: #fff;
  background-color: #e0a800;
}

.button-info {
  background-color: #0dcaf0;
}

.button-info:hover {
  background-color: #0993bd;
}

.button:disabled,
.button.disabled {
  background-color: #6c757d;
  cursor: not-allowed;
  opacity: 0.65;
  box-shadow: none;
}
</style>

Y localmente lo podemos invocar de la siguiente manera:

<template>
  <ButtonComponent @click-btn="hangleClick()" color="button-warning" text="Haceme Click" />
</template>

<script setup lang="ts">
import ButtonComponent from './components/ButtonComponent.vue';

const hangleClick = () => {
  console.log('Me hicieron click')
}

</script>

Ya con esto funcionando vamos con las configuraciones para publicarlo como librería.

Actualmente lo que tenemos es un proyecto en Vue3+TypeScript que luce de la siguiente manera:

├── README.md
├── env.d.ts
├── eslint.config.ts
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.svg
│   ├── components
│   │   └── ButtonComponent.vue
│   └── main.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

Empecemos, lo primero que voy a hacer es crear un directorio, llamado "lib", con un archivo index que nos sirva de punto de acceso a nuestro componente y deberiamos estar en este punto:

├── README.md
├── env.d.ts
├── eslint.config.ts
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.svg
│   ├── components
│   │   └── ButtonComponent.vue
│   ├── lib
│   │   └── index.ts <- nuestro punto de acceso
│   └── main.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

Y en el mismo vamos a exportar nuestro componente. ¿Qué va a tener este archivo?... lo siguiente:

export { default as Button } from '../components/ButtonComponent.vue'

Ahora que terminamos con los sencillo vamos a lo que nos importa, la configuración de todos los archivos para que cuando hagamos el npm build nos cree nuestra bendita librería.

1.- Instalar el paquete para que nos genere el *.d.ts de nuestra libreria

npm install -D vite-plugin-dts

2.- Una vez instalado este paquete vamos por el archivo vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
// Importo el paquete vite-plugin-dts
import dts from 'vite-plugin-dts'
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    /**
     * Genera archivo .d.ts
     */
    dts({
      insertTypesEntry: true,
      tsconfigPath: './tsconfig.app.json',
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  /**
   * Configuración para el empaquetamiento de la libreria
   */
  publicDir: 'v-jp-button',
  build: {
    cssCodeSplit: true,
    target: 'esnext',
    lib: {
      entry: path.resolve(__dirname, './src/lib/index.ts'),
      name: 'VJPButton',
      fileName: (format) => `v-jp-button.${format}.js`,
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
        exports: 'named',
      },
    },
  },
})

3.- Configuración del archivo tsconfig.app.json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "paths": {
      "@/*": ["./src/*"]
    },

    /**
     * Configuración para el empaquetamiento
     */
    "declaration": true,
    "emitDeclarationOnly": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "module": "node18",
    "target": "es2015",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "moduleResolution": "nodenext"
  }
}

4.- Configuración en archivo package.json

{
  "name": "v-jp-button",
  "version": "0.0.0",
  "private": false, // Set to true if you don't want to publish this package
  "description": "A customizable Vue button component with loading state and icon support.",
  "keywords": ["vue", "button", "component", "ui", "loading", "icon"],
  "type": "module",
  "skipLibCheck": true, // Skip type checking of declaration files
  "engines": {
    "node": "^20.19.0 || >=22.12.0"
  },
  // Export settings for the package
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/v-jp-datepicker.es.js",
      "require": "./dist/v-jp-datepicker.umd.js"
    }
  },
  // Files to include in the package
  "files": [
    "dist"
  ],

// Resto de la configuración
....
}

5.- Hora de compilar la libreria

npm run build

salida

> v-jp-button@0.0.0 build
> run-p type-check "build-only {@}" --


> v-jp-button@0.0.0 type-check
> vue-tsc --build


> v-jp-button@0.0.0 build-only
> vite build

rolldown-vite v7.1.12 building for production...
✓ 5 modules transformed.

[vite:dts] Start generate declaration files...
[vite:dts] Declaration files built in 2239ms.

dist/index.css          1.51 kB │ gzip: 0.48 kB
dist/v-jp-button.es.js  0.71 kB │ gzip: 0.43 kB
✓ 5 modules transformed.
dist/v-jp-button.umd.js  2.79 kB │ gzip: 1.19 kB
✓ built in 3.85s

Y tendría que generar la directorio "dist" con algo asi:

├── App.vue.d.ts
├── components
│   └── ButtonComponent.vue.d.ts
├── index.css
├── index.d.ts
├── lib
│   └── index.d.ts
├── main.d.ts
├── v-jp-button.es.js
└── v-jp-button.umd.js

Una vez que tenemos esto, es hora de publicar nuestra libreria en NPM

1.- Conectarce a NPM

npm login

2.- Actualizo la versión en el package.json

npm version patch

salida

v0.0.1

npm version patch: Incrementa la versión de parche (ej. 1.0.0 -> 1.0.1).
npm version minor: Incrementa la versión menor (ej. 1.0.0 -> 1.1.0).
npm version major: Incrementa la versión principal (ej. 1.0.0 -> 2.0.0).
npm version X.Y.Z: Puedes especificar una versión concreta (ej. npm version 1.2.3).

3.- Publicamos nuestra libreria

npm publish

salida

npm notice
npm notice 📦  v-jp-button@0.0.1
npm notice Tarball Contents
npm notice 926B README.md
npm notice 334B dist/App.vue.d.ts
npm notice 657B dist/components/ButtonComponent.vue.d.ts
npm notice 1.5kB dist/index.css
npm notice 38B dist/index.d.ts
npm notice 71B dist/lib/index.d.ts
npm notice 11B dist/main.d.ts
npm notice 716B dist/v-jp-button.es.js
npm notice 2.8kB dist/v-jp-button.umd.js
npm notice 1.6kB package.json
npm notice Tarball Details
npm notice name: v-jp-button
npm notice version: 0.0.1
npm notice filename: v-jp-button-0.0.1.tgz
npm notice package size: 3.3 kB
npm notice unpacked size: 8.7 kB
npm notice shasum: 7a1487c1885d373f416ef80b5edf2c206c1aaf7c
npm notice integrity: sha512-liIjZ7AdJuVke[...]Pr5IQWdyLXp7g==
npm notice total files: 10
npm notice
npm notice Publishing to https://registry.npmjs.org/ with tag latest and default access
+ v-jp-button@0.0.1

y listo, publicamos una libreria en NPM, la cual ahora podemos instalar en nuestro próximo proyecto mediante npm install <nombre-paquete>

npm i v-jp-button

Repositorio GIT: https://github.com/jplantes/v-jp-button
Repositorio NPM: https://www.npmjs.com/package/v-jp-button

Configurar DaisyUI con Vue3

Juan Pablo Pérez lantes — Sun, 29 Jan 2023 11:04:20 +0000

Con estos sencillos pasos tenemos configurado DeisyUI en nuestro proyecto VueJS con Vite

Crear proyecto

yarn create vite

√ Project name: ... config-daisy-ui
√ Select a framework: » Vue
√ Select a variant: » JavaScript

Dependencias de desarrollo

yarn add -D \
@vue/compiler-sfc \
autoprefixer \
daisyui \
postcss \
tailwindcss

Archivos de configuración

postcss.config.cjs

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')],
};

tailwind.config.cjs

module.exports = {
  content: ['./src/**/*.{vue,js,ts}'],
  plugins: [require('daisyui')],
};

src/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

src/style.css

@import './tailwind.css';
...

Repositorio GIT

vue 3 + vite + DaisyUI

Configurar basica MUI con Vite

Juan Pablo Pérez lantes — Wed, 04 Jan 2023 18:17:19 +0000

Instalación basica de MUI

Dependencias de MUI

yarn add @mui/material @emotion/react @emotion/styled

Fuentes

Colocar el siguiente link en el index.html antes de la etiqueta </head>

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>

Iconos

yarn add @mui/icons-material

Configuración de MUI en Vite

En el directorio scr/, crearemos un directorio llamado theme/ y dentro crearemos los siguientes archivos:

1.- Crearemos un higher order component con el nombre de AppTheme.jsx

import { ThemeProvider } from '@emotion/react';
import { CssBaseline } from '@mui/material';

import { greenTheme } from './greenTheme';

export const AppTheme = ({ children }) => {
  return (
    <ThemeProvider theme={ greenTheme }>
      <CssBaseline />
      { children }
    </ThemeProvider>
  )
}

2.- Ahora crearemos el tema (en este caso) greenTheme.js

import { createTheme } from '@mui/material';
import { red } from '@mui/material/colors';


export const greenTheme = createTheme({

  palette: {
    primary: {
      main: '#35bf31'
    },
    secondary: {
      main: '#72bf31'
    },
    error: {
      main: red.A400
    }
  }

});

3.- Aplicamos la configuración en el main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'

import { AppTheme } from './theme/AppTheme'

import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <AppTheme>
      <App />
    </AppTheme>
  </React.StrictMode>,
)

Con esta configuración minima tenemos MUI andando en un proyecto con Vite

Instalación y configuracion de Jest + React Testing Library

Juan Pablo Pérez lantes — Fri, 30 Dec 2022 17:55:07 +0000

Apunte para configuración rapida de Jest en proyectos React creado con Vite

En proyectos de React + Vite

1.- Instalaciones

yarn add --dev jest babel-jest \ 
               @bale/core @babel/preset-env @babel/preset-react 

yarn add --dev @testing-library/react @types/jest \ 
               jest-environment-jsdom

2.- Opcional: Si usamos Fetch API en el proyecto:

yarn add --dev whatwg-fetch

3.- Actualizar los scripts del package.json

"scripts: {
  ...
  "test": "jest --watchAll"

4.- Crear la configuración de babel babel.config.cjs

module.exports = {
    presets: [
        [ '@babel/preset-env', { targets: { esmodules: true } } ],
        [ '@babel/preset-react', { runtime: 'automatic' } ],
    ],
};

5.- Crear Jest config y setup:

jest.config.cjs

module.exports = {
    testEnvironment: 'jest-environment-jsdom',
    setupFiles: ['./jest.setup.js']
}

jest.setup.js

// En caso de necesitar la implementación del FetchAPI
import 'whatwg-fetch';

Instalar NodeJS en Linux

Juan Pablo Pérez lantes — Wed, 21 Sep 2022 16:15:02 +0000

Esta es una breve guía para la instalación de NodeJS en Linux.

Esta publicación está basada en el siguiente sitio, el cual deberían visitar antes de instalar para validar que está instalando la última versión Install NodeJS

Comando a correr (para sistemas basados en Debian):

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

Verificar versión instalada:

node --version