@dediho/vue-kit

Vue Kit

Crea un dashboard con Vue 3 y TypeScript, o agrega componentes a un proyecto Vue existente. El CLI copia los archivos a tu proyecto para que puedas adaptarlos.

Ver demo · Repositorio en GitHub · Paquete en npm

Requisitos

• Node.js ^22.18.0 || >=24.12.0 para crear y ejecutar la plantilla.
• npm y npx disponibles en la terminal.
• Para integrar componentes en un proyecto existente: Vue 3 y una entrada src/main.ts o src/main.js.

El CLI por sí solo admite Node.js 20 o superior; la plantilla utiliza Vite y requiere las versiones indicadas arriba.

Inicio rápido: crear un dashboard

Ejecuta en la carpeta donde quieres crear tu proyecto:

npx @dediho/vue-kit create mi-dashboard
cd mi-dashboard
npm run dev

Abre la dirección que muestre Vite en la terminal. El comando crea la carpeta e instala las dependencias con npm; no necesitas ejecutar init después.

Los nuevos dashboards incluyen Tailwind CSS 4 configurado desde el inicio, tanto en desarrollo como en la compilación de producción. Puedes usar sus utilidades, variantes responsive y colores del kit, por ejemplo flex gap-4 p-6 md:grid-cols-3 bg-primary.

La plantilla incluye navegación lateral plegable, modo claro y oscuro, una vista de dashboard y una página para rutas no encontradas. Es un punto de partida para tu aplicación; el demo muestra además el catálogo completo de componentes e integraciones. Los datos son de ejemplo y no incluye backend ni autenticación.

Para generar y revisar la compilación de producción, dentro del proyecto:

npm run build
npm run preview

Agregar y usar componentes

Dentro de tu dashboard, instala los componentes que necesites:

npx @dediho/vue-kit add button
npx @dediho/vue-kit add table pagination

El CLI copia los componentes a src/components/ui/, agrega sus estilos e instala las dependencias necesarias. Los componentes se importan en la vista donde los vas a usar; no se registran globalmente.

Por ejemplo, después de agregar button, puedes usarlo en una vista:

<script setup lang="ts">
import AppButton from '../components/ui/AppButton.vue'

function guardar() {
  console.log('Guardar cambios')
}
</script>

<template>
  <AppButton @click="guardar">Guardar cambios</AppButton>
</template>

La ruta del import corresponde a una vista dentro de src/views/. Consulta el demo para ver ejemplos, propiedades y eventos.

Presets e integraciones

Un preset instala un conjunto de componentes relacionados:

npx @dediho/vue-kit add forms
npx @dediho/vue-kit add data-table

También puedes agregar integraciones individualmente:

Consulta los nombres disponibles con npx @dediho/vue-kit list.

Usar en un proyecto Vue existente

Desde la raíz de tu proyecto, donde está package.json:

npx @dediho/vue-kit init
npx @dediho/vue-kit add button input-group

init crea vue-kit.json, copia los estilos base e importa ./assets/vue-kit.css en la entrada. No agrega el dashboard ni reemplaza tus vistas o rutas. Los estilos base incluyen tipografía, colores y reglas globales; revisa cómo se combinan con los estilos de tu aplicación.

Para instalar dependencias, init y add usan pnpm si encuentran pnpm-lock.yaml, Yarn si encuentran yarn.lock y npm en los demás casos.

Los proyectos anteriores de @dediho/app-ui pueden usar add: el CLI reconoce app-ui.json y conserva su configuración y sus archivos de estilos.

Personalización

Los archivos instalados pertenecen a tu proyecto y puedes editarlos directamente.

src/assets/vue-kit.css es la entrada de estilos base y src/assets/vue-kit-components.css reúne los imports de los componentes instalados.

Referencia de comandos

Ejecuta los comandos con npx @dediho/vue-kit seguido de:

Por defecto, init y add conservan los archivos existentes. Usa --overwrite solo si quieres sustituir tus versiones locales.

Si usas create --skip-install, ejecuta npm install dentro del proyecto antes de iniciarlo. Si usas init o add con esa opción, instala las dependencias pendientes que indique el CLI.

Licencia

Distribuido bajo la licencia MIT.