Documentação Lavarel

Framework fullstack completo para criar aplicações Laravel + Vue 3 com componentes modernos, autenticação, gerador de CRUD e muito mais.

Requisitos

Antes de começar, certifique-se de ter as seguintes ferramentas instaladas:

Instalação

1. Clone o repositório

# Clone o projeto
git clone https://github.com/leonardo-matheus/Lavarel-Fullstack-Generator.git

# Entre no diretório
cd Lavarel-Fullstack-Generator

2. Configure o Backend (Laravel)

# Copie o arquivo de ambiente
cp .env.example .env

# Instale as dependências PHP
composer install

# Gere a chave da aplicação
php artisan key:generate

# Crie o banco de dados SQLite
touch database/database.sqlite

# Execute as migrations com seeds
php artisan migrate --seed

3. Configure o Frontend (Vue/Quasar)

# Entre no diretório do frontend
cd ui

# Instale as dependências
npm install

# Volte para a raiz
cd ..

Executando

Você precisará de dois terminais para executar o projeto:

Terminal 1: Backend Laravel

# Na raiz do projeto
php artisan serve

# Acessível em: http://localhost:8000

Terminal 2: Frontend Vue/Quasar

# No diretório ui/
cd ui
npx quasar dev

# Acessível em: http://localhost:8080

Login Padrão

Estrutura do Projeto

Backend (Laravel)

app/
├── Http/Controllers/API/    # REST endpoints
├── Models/                  # Eloquent (*_H.php = helpers)
├── Repositories/            # Query abstraction
├── Services/                # Business logic
└── Traits/                  # Shared behaviors

generator/
├── scopes/*.json            # Definições dos módulos
└── template/                # Templates de código
    ├── api/                 # Controller, Model, Migration
    └── ui/                  # Index, Form, Detail (Vue)

Frontend (Vue/Quasar)

ui/src/
├── boot/                    # Inicialização (naive.js)
├── components/
│   ├── core/                # Layout: TopBar, SideNav
│   ├── Lavarel/             # Componentes customizados
│   └── Naive/               # UI Kit Naive UI
├── composables/             # Hooks reutilizáveis
├── layouts/                 # MainLayout, LoginLayout
├── pages/                   # Telas por módulo
├── services/                # Api.js, Helper.js
└── store/                   # Pinia (GlobalStore)

Gerador de Módulos

O gerador cria automaticamente todo o código necessário para um módulo CRUD completo, incluindo backend (Laravel) e frontend (Vue).

1. Criar arquivo de definição

Crie um arquivo JSON em generator/scopes/:

[{
  "name": "Products",
  "column": [
    { "name": "id", "type": "bigIncrements", "attributes": ["index"] },
    { "name": "name", "type": "string" },
    { "name": "price", "type": "double", "length": 10, "length2": 2 },
    { "name": "description", "type": "text", "nullable": true },
    { "name": "is_active", "type": "boolean", "default": true },
    { 
      "name": "category_id", 
      "type": "unsignedBigInteger",
      "belongsTo": { "model": "Categories", "name": "Category" }
    }
  ]
}]

2. Executar o gerador

php artisan lv:generate --scope=products

3. Registrar o módulo

Adicione ao arquivo config/lv_modules.php:

return [
    "Users",
    "Roles",
    // ... outros módulos
    "Products",  // Novo módulo
];

4. Executar migration

php artisan migrate

Tipos de Coluna Suportados

Autenticação

O Lavarel usa Laravel Sanctum para autenticação via tokens.

Login

POST /api/app/login

{
  "email": "boss@mail.com",
  "password": "password"
}

// Response
{
  "token": "1|abc123...",
  "user": { ... }
}

Usando o Token

Inclua o token em todas as requisições autenticadas:

Authorization: Bearer 1|abc123...

Endpoints do Usuário

API REST

Cada módulo gerado expõe endpoints CRUD padronizados:

Parâmetros de Query

GET /api/products?page=1&per_page=15&search=notebook&order_by=name&order=asc

Componentes

O Lavarel inclui uma biblioteca de componentes Vue 3 construídos sobre o Naive UI, todos registrados globalmente e prontos para uso.

LvInput

Campo de entrada com suporte a múltiplos modos e validação integrada.

<lv-input
  v-model="form.name"
  label="Nome"
  placeholder="Digite seu nome"
  mode="text"
  required
/>

<!-- Modo currency -->
<lv-input
  v-model="form.price"
  label="Preço"
  mode="currency"
  prefix="R$"
/>

Props

LvSelect

Seletor com autocomplete, múltipla seleção e busca ajax.

<lv-select
  v-model="form.category_id"
  label="Categoria"
  :options="categories"
  searchable
  clearable
/>

<!-- Com busca ajax -->
<lv-select
  v-model="form.user_id"
  label="Usuário"
  url="/api/users/options"
  searchable
/>

Props

LvBtn

Botão com variantes de estilo e estado de loading.

<lv-btn label="Salvar" color="primary" @click="save" />
<lv-btn label="Cancelar" flat />
<lv-btn label="Excluir" color="error" soft />
<lv-btn icon="add" color="success" round />
<lv-btn label="Carregando..." :loading="true" />

Props

LvTable

Tabela de dados com paginação, busca e ordenação integradas.

<lv-table
  :columns="columns"
  :data="products"
  :loading="loading"
  :pagination="pagination"
  @update:page="fetchData"
/>

// Definição das colunas
const columns = [
  { title: 'ID', key: 'id', width: 80 },
  { title: 'Nome', key: 'name' },
  { title: 'Preço', key: 'price', render: formatCurrency },
]

LvCard

Card container com header, footer e slots personalizáveis.

<lv-card title="Meu Card" subtitle="Descrição">
  <template #header-extra>
    <lv-btn icon="settings" quaternary />
  </template>
  
  Conteúdo do card aqui...
  
  <template #footer>
    <lv-btn label="Salvar" color="primary" />
  </template>
</lv-card>

LvModal

Modal/Dialog com diferentes tamanhos e animações.

<lv-modal
  v-model="showModal"
  title="Título do Modal"
  size="medium"
>
  Conteúdo do modal...
  
  <template #footer>
    <lv-btn label="Cancelar" flat @click="showModal = false" />
    <lv-btn label="Confirmar" color="primary" />
  </template>
</lv-modal>

Props

LvDisplayer

Exibição de dados com formatação automática para CPF, CNPJ, moeda, datas e mais.

<lv-displayer label="Nome" :value="user.name" />
<lv-displayer label="CPF" value="12345678901" type="cpf" copyable />
<lv-displayer label="CNPJ" value="12345678000190" type="cnpj" />
<lv-displayer label="Telefone" value="11987654321" type="phone" />
<lv-displayer label="Valor" :value="1500.50" type="currency" />
<lv-displayer label="Ativo" :value="true" type="boolean" />

Tipos Suportados

LvAvatar

Avatar com imagem ou iniciais automáticas baseadas no nome.

<lv-avatar name="João Silva" />
<lv-avatar src="/avatar.jpg" status="online" />
<lv-avatar name="Admin" size="large" shape="square" />

LvBadge

Badge para notificações e contadores.

<lv-badge :value="5">
  <n-button>Notificações</n-button>
</lv-badge>

<lv-badge :value="150" :max="99">...</lv-badge>  <!-- Mostra 99+ -->
<lv-badge dot processing>...</lv-badge>  <!-- Dot pulsante -->

LvTag

Tag/chip com estilos e ações.

<lv-tag label="Novo" type="success" />
<lv-tag label="Pendente" type="warning" closable @close="remove" />
<lv-tag label="Premium" type="primary" round />

LvProgress

Barra de progresso linear ou circular.

<lv-progress :percentage="75" status="success" />
<lv-progress :percentage="50" striped striped-animated />
<lv-progress :percentage="60" type="circle" :circle-width="100" />
<lv-progress indeterminate />  <!-- Animação contínua -->

LvCreditCard

Componente de cartão de crédito com detecção automática de bandeira e banco brasileiro.

<lv-credit-card
  :number="cardNumber"
  :holder="cardHolder"
  :expiry="cardExpiry"
  :cvv="cardCvv"
  v-model:flipped="isFlipped"
/>

Bandeiras Detectadas

Visa, Mastercard, American Express, Elo, Hipercard

Bancos Brasileiros Detectados

Nubank, Inter, Itaú, Bradesco, Banco do Brasil, Santander, Caixa, C6 Bank, PicPay, Neon, Next

Dark Mode

O Lavarel possui suporte nativo a Dark Mode com o Naive UI.

import { useTheme } from '@/composables/useTheme'

const { isDark, toggleTheme } = useTheme()

// No template
<n-button @click="toggleTheme">
  {{ isDark ? '☀️ Light' : '🌙 Dark' }}
</n-button>

Permissões

Sistema de permissões baseado em roles.

// No Store
const store = useGlobalStore()

if (store.hasPermission('products.create')) {
  // Pode criar produtos
}

// No Template com v-if
<lv-btn 
  v-if="$store.hasPermission('products.delete')"
  label="Excluir" 
  color="error"
/>

Customização

Cores e Tema

Personalize as cores editando ui/src/css/app.scss:

:root {
  --primary: #6366f1;
  --secondary: #22c55e;
  --accent: #f59e0b;
}

Configurações do Projeto