Instalación
Requisitos
Antes de instalar Spartan, asegúrate de cumplir con los siguientes requisitos:
- Node.js
20.19o^22.12 - NPM
^10 - TailwindCSS
^4configurado en tu proyecto - Un proyecto Vue 3 existente
Instalación paso a paso
Instalar el paquete
Ejecuta el siguiente comando en el directorio raíz de tu proyecto:
npm install -D @placetopay/spartan-vue
pnpm add -D @placetopay/spartan-vue
yarn add --dev @placetopay/spartan-vue
Configurar TailwindCSS v4
En TailwindCSS v4 la configuración se hace desde CSS, no existe tailwind.config.js. Agrega el @import de Spartan y la directiva @source en tu archivo de estilos principal:
@import "@placetopay/spartan-vue/styles.css";
@source '../src/**/*.{vue,js,ts}';
@import de Spartan debe estar antes de cualquier otro estilo personalizado. La directiva @source indica a Tailwind qué archivos de tu proyecto escanear para generar las clases de utilidades.Importar los estilos en tu entry point
Importa tu archivo de estilos en el punto de entrada de la aplicación:
import './styles.css'
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
Usar los componentes
Los componentes están listos para usar. Impórtalos directamente en tus archivos .vue:
<script setup>
import { SButton } from '@placetopay/spartan-vue'
</script>
<template>
<SButton>Crear</SButton>
</template>
Personalización del tema (opcional)
Por defecto, Spartan incluye una paleta de colores primaria. En TailwindCSS v4 la personalización se hace con variables CSS dentro de @theme, ubicado después del @import de Spartan:
@import "@placetopay/spartan-vue/styles.css";
@source '../src/**/*.{vue,js,ts}';
@theme {
--color-spartan-primary-50: rgb(228 242 253);
--color-spartan-primary-100: rgb(187 222 251);
--color-spartan-primary-200: rgb(144 202 249);
--color-spartan-primary-300: rgb(100 181 246);
--color-spartan-primary-400: rgb(66 165 245);
--color-spartan-primary-500: rgb(33 150 243);
--color-spartan-primary-600: rgb(30 132 229);
--color-spartan-primary-700: rgb(25 103 196);
--color-spartan-primary-800: rgb(21 78 148);
--color-spartan-primary-900: rgb(13 42 84);
}
Excluir la tipografía Inter
Spartan incluye la fuente Inter por defecto. Si ya estás usando otra tipografía, importa los archivos de estilos por separado en lugar del @import principal:
@import "tailwindcss";
@import "@placetopay/spartan-vue/styles/plugin.css";
@import "@placetopay/spartan-vue/styles/spartan-vue.css";
@source '../src/**/*.{vue,js,ts}';