Como Instalar e Usar Quasar em uma Aplicação Laravel + Inertia + Vue 3

Integrar o Quasar Framework dentro de uma aplicação Laravel + Inertia + Vue 3 é uma das formas mais modernas e eficientes de construir interfaces ricas, responsivas e com visual profissional, sem abandonar o ecossistema Laravel.

Neste tutorial completo, você aprenderá passo a passo como:

• Criar um novo projeto Laravel
• Configurar o Inertia.js com Vue 3
• Instalar o Quasar Framework
• Integrar o plugin do Quasar no Vite
• Criar um layout Vue utilizando o Layout Builder do Quasar
• Renderizar tudo dentro de uma rota Inertia

Ao final, você terá uma aplicação funcionando com Quasar totalmente integrada ao stack Laravel + Inertia.

Leia também: Multi-tenancy no Laravel

O que é o Quasar Framework?

O Quasar é um framework baseado em Vue.js que permite criar:

• Aplicações web (SPA e SSR)
• Aplicativos mobile (através do Capacitor e Cordova)
• Aplicações desktop (com Electron)

Mas, embora ele seja geralmente usado com seu próprio CLI, também é possível utilizá-lo como uma biblioteca Vue integrada ao Vite — exatamente o que faremos aqui.

Criando um novo projeto Laravel

Abra o terminal no diretório desejado (ex: htdocs) e rode:

composer create-project laravel/laravel quasar-inertia

Após a instalação, abra o projeto no VS Code:

code quasar-inertia

Instalando o Inertia.js com Vue 3

No terminal do projeto:

Instalar o backend do Inertia (Laravel)

composer require inertiajs/inertia-laravel

Criar o middleware do Inertia

php artisan inertia:middleware

Laravel criará o arquivo:

app/Http/Middleware/HandleInertiaRequests.php

Agora registre o middleware no Kernel:

Arquivo:

app/Http/Kernel.php

Adicione no grupo “web”:

\App\Http\Middleware\HandleInertiaRequests::class,

Segue a documentação do Inertia.

Configurando o template base (app.blade.php)

Renomeie o arquivo:

resources/views/welcome.blade.php

para:

resources/views/app.blade.php

E substitua todo o conteúdo pelo template oficial do Inertia (copiado da documentação).

Instalando o lado do cliente (Vue 3 + Inertia)

No terminal:

npm install @inertiajs/vue3

Agora instale também o plugin do Vue para o Vite:

npm install @vitejs/plugin-vue

Edite o arquivo:

resources/js/app.js

E adicione o bootstrap inicial do Inertia. Segue a documentação do Vue 3.

Instalando o Quasar Framework

Abra o site da documentação do Quasar e copie o comando de instalação.

Instalar Quasar + Quasar Extras

npm install quasar @quasar/extras

Instalar o plugin do Quasar para o Vite + Sass

npm install @quasar/vite-plugin [email protected]

Configurar o Quasar no arquivo vite.config.js

Edite o arquivo:

vite.config.js

Adicione:

import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'

E depois inclua na exportação dos plugins:

plugins: [
    vue({
        template: { transformAssetUrls }
    }),
    quasar({
        sassVariables: 'resources/css/quasar-variables.sass'
    })
],

Criar arquivo de variáveis do Quasar

Crie o arquivo:

resources/css/quasar-variables.sass

Dica: você pode configurar temas, cores e estilos do Quasar aqui.

Importar o Quasar no app.js

Abra:

resources/js/app.js

E adicione:

import { createApp, h } from 'vue'
import { Quasar } from 'quasar'
import 'quasar/dist/quasar.css'
import '@quasar/extras/material-icons/material-icons.css'

const app = createApp({
    render: () => h(App, props)
})

app.use(Quasar)
app.mount('#app')

Criar uma página Vue para testar o Quasar

Crie um arquivo:

resources/js/Pages/Home.vue

Agora vamos gerar um layout visual.

Criar layout com o Quasar Layout Builder

No site do Quasar:

Acesse: Layout Builder
Selecione:

• Header
• Footer
• Drawer (opcional)

Clique em Export Layout, copie o código e cole dentro do seu Home.vue.

Renderizar a página no Laravel

Abra:

routes/web.php

E altere a rota principal:

use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Home');
});

Rodando a aplicação

Em dois terminais separados:

Servidor Laravel

php artisan serve

Front-end com Vite

npm run dev

Acesse:

http://localhost:8000

E pronto! Nossa aplicação Laravel + Inertia + Vue 3 rodando com Quasar Framework está funcionando.

Conclusão

Integrar o Quasar com Laravel + Inertia abre portas para:

• Interfaces modernas e responsivas
• Componentes prontos e profissionais
• Layouts otimizados para desktop e mobile
• Produtividade absurda no Vue

Esse setup é ideal para quem quer escalar aplicações sem complicações.