Primeros Pasos
Estructura del proyecto
Entiende cómo se integra Spartan en la estructura de tu proyecto.
Integración en tu proyecto
Spartan se instala como una dependencia de desarrollo y no requiere modificaciones a la estructura de carpetas de tu aplicación. En TailwindCSS v4 la integración se realiza íntegramente desde tu archivo de estilos CSS, sin archivos de configuración JavaScript.
A continuación los archivos que necesitas crear o modificar:
src/main.ts
import './styles.css'
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
El
@import de Spartan en styles.css debe estar antes de cualquier otro estilo personalizado. La directiva @source indica a TailwindCSS qué archivos escanear para generar las clases.Convención de imports
Todos los componentes de Spartan se exportan desde el paquete principal. No es necesario importar desde rutas internas:
<script setup>
// ✅ Correcto
import { SButton, SInput, SCard } from '@placetopay/spartan-vue'
// ❌ Incorrecto — no importes desde rutas internas
// import SButton from '@placetopay/spartan-vue/components/SButton'
</script>
Todos los componentes de Spartan siguen la convención de prefijo
S (por ejemplo SButton, SInput, SCard). Esto facilita identificarlos en tus plantillas y evita conflictos de nombres con otros componentes.