Getting Started / Frontend Setup
Getting Started
Tickets & Conversations
Automation & Workflows
Email & Notifications
Configuracion del frontend
Escalated incluye una interfaz compartida de Inertia.js + Vue 3 como paquete npm. Todos los frameworks usan el mismo frontend.
1. Instalar el paquete npm
npm install @escalated-dev/escalated
2. Agregar al contenido de Tailwind
Asegurate de que Tailwind escanee los componentes de Escalated para detectar los nombres de clases:
export default {
content: [
'./resources/**/*.vue',
'./node_modules/@escalated-dev/escalated/src/**/*.vue',
],
}
Para Tailwind CSS v4+, agrega Escalated como fuente en el archivo CSS de tu app:
/* resources/css/app.css */
@source '../../node_modules/@escalated-dev/escalated/src/**/*.vue';
Ajusta la ruta relativa si tu archivo CSS esta en otro lugar.
3. Configurar el resolver de paginas de Inertia
Este paso asume que Inertia y Vue ya estan instalados y configurados.
Las paginas con prefijo Escalated/ se resuelven desde el paquete npm:
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
// Pre-glob the Escalated pages
const escalatedPages = import.meta.glob(
'../../node_modules/@escalated-dev/escalated/src/pages/**/*.vue'
);
createInertiaApp({
resolve: (name) => {
if (name.startsWith('Escalated/')) {
const path = name.replace('Escalated/', '');
return resolvePageComponent(
`../../node_modules/@escalated-dev/escalated/src/pages/${path}.vue`,
escalatedPages
);
}
return resolvePageComponent(
`./Pages/${name}.vue`,
import.meta.glob('./Pages/**/*.vue')
);
},
});