Skip to main content
Primeiros passos / Configuração do frontend

Configuracao do Frontend

Escalated disponibiliza uma interface compartilhada em Inertia.js + Vue 3 como um pacote npm. Todos os frameworks utilizam o mesmo frontend.

1. Instale o pacote npm

npm install @escalated-dev/escalated

2. Adicione ao conteudo do Tailwind

Certifique-se de que o Tailwind escaneia os componentes do Escalated para os nomes de classes:

export default {
  content: [
    './resources/**/*.vue',
    './node_modules/@escalated-dev/escalated/src/**/*.vue',
  ],
}

Para Tailwind CSS v4+, adicione o Escalated como source no arquivo CSS do app:

/* resources/css/app.css */
@source '../../node_modules/@escalated-dev/escalated/src/**/*.vue';

Ajuste o caminho relativo se o arquivo CSS estiver em outro lugar.

3. Configure o resolvedor de paginas do Inertia

Este passo assume que Inertia e Vue ja estao instalados e configurados.

Paginas com o prefixo Escalated/ sao resolvidas a partir do pacote npm:

import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

// Pre-glob das paginas do Escalated
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')
    );
  },
});