Este guia indica como começar um projeto Laravel com Vue, usando o Inertia. Não vamos entrar em detalhes em como iniciar um novo projeto em Laravel. Passamos diretamente para a adaptação do projeto em Laravel para Vue.
Instalação passo a passo
Aqui poderá acompanhar a instalação passo a passo, com as devidas referências.
Instalação do Laravel
Tal como mencionado na introdução, partimos do ponto em que já temos uma instalação nova do Laravel.
Documentação do Laravel
Caso pretenda informações sobre o Laravel, ou, de como instalar o Laravel, poderá consultar a respetiva documentação.
Se desejar mais detalhes, consulte a documentação do Laravel. Este projeto foi escrito com base no Laravel 11.
Usar o Vue como Frontend
Por default o Laravel utiliza o Blade como construtor do frontend. No nosso projeto iremos utilizar o Vue.
Para mais informações, consulte a documentação sobre o Laravel com Vue.
Criação da estrutura de páginas
O Vue irá utilizar os componentes presentes na pasta Pages, do Javascript. Assim, vamos criar a estrutura de pastas no Laravel. Crie a estrutura em /resources/js/Pages.
/resources
+- /css
+- /js
+- /Layouts
+- /Pages
+- /SharedConfiguração do Vite
O Vite é o compilador e gestor de assets eleito por default para o Laravel.
Se quer aprender mais, consulte a documentação de configuração do Vite no Laravel. Para informações sobre o Vite, consulte a documentação oficial do projeto Vite.
Bundling JS e CSS:
Vamos compilar o CSS do projeto diretamente no Javascript. Assim, vamos proceder a alteração da configuração do Vite, através do ficheiro /vite.config.js:
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});Incluiremos o css diretamente no ficheiro de scripts, alterando o /resources/js/app.js:
import './bootstrap';
import '../css/app.css'; Plugins do Vite
Vamos adicionar o plugin de Vue ao Vite. Para isso, adicionamos às devDependencies o seguinte:
npm install --save-dev @vitejs/plugin-vueA documentação sobre o plugin você encontra na página do plugin Vue do Vite.
Incorporando o Vue no Vite
Além da alteração acima, na qual juntamos o CSS ao JS, vamos alterar a configuração do Vite para usar o plugin que recém instalamos. Assim, a alteração do ficheiro /vite.config.js ficará:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel(['resources/js/app.js']),
vue({
template: {
transformAssetUrls: {
// The Vue plugin will re-write asset URLs, when referenced
// in Single File Components, to point to the Laravel web
// server. Setting this to `null` allows the Laravel plugin
// to instead re-write asset URLs to point to the Vite
// server instead.
base: null,
// The Vue plugin will parse absolute URLs and treat them
// as absolute paths to files on disk. Setting this to
// `false` will leave absolute URLs un-touched so they can
// reference assets in the public directory as expected.
includeAbsolute: false,
},
},
}),
],
});Mais detalhes você encontra na documentação Vite do Laravel.
Instalação do Inertia
O Inertia em si não é uma framework. Podemos pensar no Inertia como uma ponte entre o Laravel (backend) e o Vue (frontend). Aliás, o Inertia não se limita ao Vue. Ele permite criar essa ponta com outras frameworks de frontend, como o React.
Para consultar mais informações sobre o Inertia, consulte o site oficial do Inertia Js.
Configuração do Inertia Server-side
O Inertia deve ser configurado no modo servidor e no modo cliente.
Vamos instalar as dependências do modo servidor:
composer require inertiajs/inertia-laravelTemplate root
O Laravel irá iniciar o frontend através do Template Root. É neste ficheiro do Blade que iniciamos a nossa aplicação.
O template root fica instalado em /resources/views/app.blade.php. Vamos renomear o welcome.blade.php para app.blade.php e adaptar a este código:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
@vite('resources/js/app.js')
@inertiaHead
</head>
<body>
@inertia
</body>
</html>Middleware
php artisan inertia:middlewareAlteração do /bootstrap/app.php:
use AppHttpMiddlewareHandleInertiaRequests;
->withMiddleware(function (Middleware $middleware) {
$middleware->web(append: [
HandleInertiaRequests::class,
]);
})Para mais informações da configuração do lado do servidor do Inertia, consulte a documentação.
Configuração do Inertia Client-side
Instalação das dependências
npm install --save-dev @inertiajs/vue3Atualização do /resources/js/app.js:
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) })
// Inertia plugin
.use(plugin)
// Mount the app
.mount(el)
},
})Para mais informações da configuração do lado do front, consulte a documentação.
Instalação do Vue.js
npm install --save-dev vueConsulte a documentação do Vue Js para mais informações.
Criação das rotas
Alteração do ficheiro resources/views/welcome.blade.php:
Ao invés de utilizar as rotas do Blade:
Route::get('/', function () {
return view('welcome');
});Vamos usar as rotas do Inertia:
use IlluminateSupportFacadesRoute;
use InertiaInertia;
Route::get('/', function () {
return Inertia::render('welcome');
});Podemos também simplificar a chamada ao Inertia:
Route::get('/', function () {
return inertia('welcome');
});Atenção que as páginas estão agora apontadas para resources/js/Pages. Portanto, vamos criar a página welcome.vue em resources/js/Pages:
<script setup>
</script>
<template>
<h1>Welcome</h1>
</template>
<style scoped>
</style>Implementação do Layout
Criação do componente em /resources/js/Layouts/AppLayout:
<script setup>
</script>
<template>
<div class="container">
<slot />
</div>
</template>
<style scoped>
</style>Uso do componente nas páginas, como na welcome.vue:
<script setup>
import AppLayout from '../Layouts/AppLayout.vue'
</script>
<template>
<AppLayout>
<p>The main content is here.</p>
</AppLayout>
</template>
<style scoped>
</style>Outra forma de incorporar os Layouts é:
import MainLayout from '@/Layouts/MainLayout.vue';
defineOptions({
layout: MainLayout,
});
Para onde ir agora?
Agora, comece a utilizar as rotas no Vue, tal como faz com o Blade. Para isso, utilize o Ziggy, um pacote que permite a utilização de rotas no Vue.
Consulte Utilizar rotas do Laravel no Vue.