Atualizado pela última vez em 12/02/2025
Salve galerinhaaaa, Tudo certo com vocês? Neste guia, você vai aprender como integrar Vue.js com Inertia e Laravel para criar aplicações web modernas, dinâmicas e de alto desempenho.
Criando um Novo Projeto Laravel
Primeiro, vamos criar um novo projeto Laravel e configurá-lo:
composer create-project laravel/laravel vue-inertia-laravel
cd vue-inertia-laravelInstalando o Inertia.js e o Vue.js
O primeiro passo ao instalar o Inertia é configurar seu framework do lado do servidor. O Inertia mantém um adaptador oficial do lado do servidor para o Laravel.
O Inertia é ajustado para o Laravel, então os exemplos de documentação neste site utilizam o Laravel. Para exemplos de uso do Inertia com outros frameworks do lado do servidor, consulte a documentação específica do framework mantida por esse adaptador.
Backend (Laravel)
Primeiro, instale o adaptador do lado do servidor Inertia usando o gerenciador de pacotes Composer.
composer require inertiajs/inertia-laravelRoot template
Em seguida, configure o template raiz que será carregado na primeira visita de página ao seu aplicativo. Ele será usado para carregar os ativos do seu site (CSS e JavaScript) e também conterá um raiz no qual inicializar seu aplicativo JavaScript.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Styles / Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
@inertiaHead
</head>
<body class="font-sans antialiased dark:bg-black dark:text-white/50">
@inertia
</body>
</html>Este modelo deve incluir seus ativos, bem como as diretivas @inertia e @inertiaHead.
Por padrão, o adaptador Laravel do Inertia assumirá que seu modelo raiz é chamado app.blade.php. Se você quiser usar uma visualização raiz diferente, você pode alterá-la usando o método Inertia::setRootView() no AppServideProvider de sua aplicação.
Middleware
Em seguida, precisamos configurar o middleware Inertia. Você pode fazer isso publicando o middleware HandleInertiaRequests no seu aplicativo, o que pode ser feito usando o seguinte comando Artisan.
php artisan inertia:middlewareDepois que o middleware for publicado, anexe o middleware HandleInertiaRequests ao grupo de middleware web no arquivo bootstrap/app.php do seu aplicativo.
use App\Http\Middleware\HandleInertiaRequests;
...
->withMiddleware(function (Middleware $middleware) {
$middleware->web(append: [
HandleInertiaRequests::class,
]);
})
...Este middleware fornece um método version() para definir a versão de seus assets, bem como um método share() para definir dados compartilhados.
Frontend (VueJS)
Depois que você tiver configurado seu framework do lado do servidor, você precisa configurar seu framework do lado do cliente. O Inertia atualmente fornece suporte para React, Vue e Svelte.
No nosso caso, vamos utilizar para VueJS, depois posso fazer outro post focado no React e Svelt.
Instalar dependências
Primeiro, instale o adaptador do lado do cliente Inertia correspondente à estrutura de sua escolha junto com o framework.
npm install @inertiajs/vue3 @vitejs/plugin-vue vueInicialize o aplicativo Inertia
Em seguida, atualize seu arquivo JavaScript principal para inicializar seu aplicativo Inertia. Para fazer isso, inicializaremos a estrutura do lado do cliente com o componente base Inertia. Acesse o arquivo resources/js/app.js e configure como abaixo:
import './bootstrap';
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
createInertiaApp({
resolve: name => {
const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
return pages[`./Pages/${name}.vue`]
},
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
})O retorno de chamada de configuração recebe tudo o que é necessário para inicializar a estrutura do lado do cliente, incluindo o componente raiz do Inertia App.
Certifique-se de que o Laravel Vite Plugin está configurado corretamente no arquivo vite.config.js:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js'
],
refresh: true,
}),
vue(),
],
});Resolvendo componentes
O callback resolve informa ao Inertia como carregar um componente de página. Ele recebe um nome de página (string) e retorna um módulo de componente de página. Como você implementa esse callback depende de qual bundler (Vite ou Webpack) você está usando.
// Vite
resolve: name => {
const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
return pages[`./Pages/${name}.vue`]
},
// Webpack
resolve: name => require(`./Pages/${name}`),Por padrão, recomendo o carregamento antecipado de seus componentes, o que resultará em um único pacote JavaScript. No entanto, se você quiser fazer o carregamento lento de seus componentes, consulte a documentação de divisão de código.
Definindo um elemento raiz
Por padrão, o Inertia assume que o template raiz do seu aplicativo tem um elemento raiz com um id de app. Se o elemento raiz do seu aplicativo tiver um id diferente, você pode fornecê-lo usando a propriedade id.
createInertiaApp({
id: 'my-app',
// ...
})Criando nosso primeiro componente
Vamos criar nosso primeiro componente vue dentro da pasta resources/js/Pages/Home.vue (Se atentando na estrutura que tem que ser igual a que configuramos no resources/js/app.js
<script setup>
</script>
<template>
<h1 class="text-xl font-bold">Home Vue com Laravel e InertiaJS</h1>
</template>
<style scoped>
</style>Agora vamos configurar uma rota para enviar nossa Home.vue para nosso usuário! Para isso vamos no arquivo web.php
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return inertia('Home');
})->name('home');O pacote inertia que instalamos no backend nos fornece esse helper function chamado inertia para auxiliar na hora de devolver as páginas para o front-end, podendo passar atributos igual o helper view tradicional do laravel como exemplo:
Route::get('events/{event}', function (Event $event) {
return inertia('Event', [
'event' => $event,
]);
})->name('events.show');Se tudo estiver correto, basta rodar os comandos abaixo que tudo vai estar funcionando 100%
npm run dev && php artisan serveSe você estiver no laravel 11 pode usar o comando composer
composer run devE acessar o http://localhost:8000/
Adicionar e configurar o ziggy no laravel com inertia
O Ziggy é uma biblioteca que facilita o uso de rotas do Laravel no JavaScript, permitindo que você acesse as rotas Laravel diretamente no lado do cliente. Quando integrado ao Inertia.js, ele se torna especialmente útil para construir URLs dinamicamente no Vue ou em outros frameworks.
Instalar o ZiggyJS
Instale o Ziggy via Composer e npm:
composer require tightenco/ziggy
npm install ziggy-jsConfigurar Ziggy no Backend
O Ziggy exporta as rotas do Laravel para o lado do cliente. Para usá-lo no Inertia, você deve expor as rotas para ele acessar, para fazer isso acesse o arquivo resources/views/app.blade.php e adicione a diretiva @routes
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
...
<!-- Styles / Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
@inertiaHead
@routes <-- Adicionar linha
</head>
...No arquivo vite.config.js adicione um resolve para conseguirmos utilizar a função route globalmente no nosso projeto. Aproveite e ja adicione o alias @ para conseguirmos acessar nossos componentes de forma mais fácil.
import path from 'path';
export default defineConfig({
...
resolve: {
alias: {
'ziggy-js': path.resolve('vendor/tightenco/ziggy'),
'@': path.resolve(__dirname, 'resources/js'),
},
},
});Isso adicionará as rotas do Ziggy ao objeto global compartilhado do Inertia, permitindo que você as use no frontend.
Configurar Ziggy no Frontend
No arquivo resources/js/app.js, importe o Ziggy:
import './bootstrap';
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { ZiggyVue } from "ziggy-js"; // <- Adicionar
createInertiaApp({
resolve: name => {
const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
return pages[`./Pages/${name}.vue`]
},
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.use(ZiggyVue) // <- Adicionar
.mount(el)
},
})Criar Rotas no Laravel
Crie um novo arquivo dento da pasta resources/js/Pages/About.vue para conseguirmos testar as rotas.
<script setup>
</script>
<template>
<div>
<h1>About Page</h1>
</div>
</template>
<style scoped>
</style>Defina as rotas no Laravel normalmente. Por exemplo:
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return inertia('Home');
})->name('home');
Route::get('/about', function () {
return inertia('About');
})->name('about');Usar as Rotas no Vue com Inertia
Dentro da Home e do About, vamos utilizar um componente pronto do Inertia chamado Link para podermos navegar dentro de nossa aplicação de forma mais suave.
Exemplo Home.vue
<script setup>
import {Link} from '@inertiajs/vue3';
</script>
<template>
<h1 class="text-xl font-bold">Home Vue com Laravel e InertiaJS</h1>
<Link :href="route('about')">About</Link>
</template>
<style scoped>
</style>
Exemplo About.vue
<script setup>
import {Link} from '@inertiajs/vue3';
</script>
<template>
<h1 class="text-xl font-bold">About Page</h1>
<Link :href="route('home')">Home</Link>
</template>
<style scoped>
</style>
Se tudo correr bem, terá algo parecido com o video abaixo:
Conclusão
Com esse passo a passo você consegue configurar um ambiente de desenvolvimento completo com Vue, Inertia e Laravel.
Qualquer dúvida pode deixar aqui nos comentários!
Fontes:
Inertia.js – The Modern Monolith
tighten/ziggy: Use your Laravel routes in JavaScript.
Installation – Laravel 11.x – The PHP Framework For Web Artisans