Por que SPA?<\/h2>\n
Antes de perguntarmos por que devemos usar o Inertia, devemos primeiro perguntar: \u201cPor que SPA?\u201d<\/p>\n
Por que algu\u00e9m preferiria aplicativos renderizados do lado do cliente em vez dos tradicionais aplicativos do lado do servidor? O que levaria um desenvolvedor full-stack do Laravel a dizer adeus aos componentes blade<\/a>?<\/p>\n A resposta b\u00e1sica \u00e9: porque velocidade e capacidade de resposta s\u00e3o essenciais para qualquer engajamento bem-sucedido do usu\u00e1rio.<\/p>\n No caso de MPAs, o navegador envia constantemente pedidos ao backend, que ent\u00e3o executa in\u00fameras consultas ao banco de dados. Depois que o banco de dados e o servidor processam as consultas e as entregam ao navegador, a p\u00e1gina \u00e9 renderizada.<\/p>\n Mas os SPAs s\u00e3o diferentes. O aplicativo traz tudo que o usu\u00e1rio precisaria diretamente para a p\u00e1gina, eliminando a necessidade do navegador enviar consultas ou recarregar a p\u00e1gina para renderizar novos elementos HTML.<\/p>\n Devido a esta experi\u00eancia \u00fanica do usu\u00e1rio, grandes empresas est\u00e3o clamando para que seus sites se tornem aplicativos de uma \u00fanica p\u00e1gina.<\/p>\n Dito isso, criar um aplicativo de p\u00e1gina \u00fanica pode ser dif\u00edcil para os desenvolvedores de Laravel porque seria necess\u00e1rio que eles come\u00e7assem a usar Vue.js ou React em vez de modelos de blade, resultando na perda de muitas ferramentas \u00fateis do Laravel que economizam tempo e esfor\u00e7o.<\/p>\n Agora que temos o Inertia.js, tudo isso mudou.<\/p>\n Caso os desenvolvedores do Laravel fossem criar SPAs da web com o Vue antes do Inertia, eles teriam que configurar APIs e retornar dados JSON com o Laravel, depois usar algo como AXIOS para recuperar os dados nos componentes Vue. Eles tamb\u00e9m precisariam de algo como o Vue Router para gerenciar rotas, o que significaria perder o roteamento do Laravel, bem como middlewares e controladores.<\/p>\n Por outro lado, o Inertia.js permite que os desenvolvedores criem aplicativos modernos de p\u00e1gina \u00fanica com Vue, React e Svelte usando o roteamento e os controladores cl\u00e1ssicos do lado do servidor. O Inertia foi projetado para desenvolvedores do Laravel, Ruby on Rails e Django, permitindo que eles construam aplicativos sem mudar suas t\u00e9cnicas de codifica\u00e7\u00e3o para criar controladores, buscar dados de um banco de dados e renderizar visualiza\u00e7\u00f5es.<\/p>\n Gra\u00e7as ao Inertia.js, os desenvolvedores de Laravel se sentir\u00e3o em casa.<\/p>\n Construir SPA somente com Laravel e Vue lhe dar\u00e1 uma p\u00e1gina JavaScript completa para o seu frontend, mas isso n\u00e3o lhe proporcionar\u00e1 uma experi\u00eancia de aplicativo de uma \u00fanica p\u00e1gina. Cada link clicado far\u00e1 com que seu framework do lado do cliente seja reinicializado na pr\u00f3xima p\u00e1gina de carregamento.<\/p>\n \u00c9 aqui que a Inertia entra em cena.<\/p>\n A Inertia \u00e9 basicamente uma biblioteca de roteamento do lado do cliente. Ela permite que voc\u00ea navegue entre as p\u00e1ginas sem ter que recarregar a p\u00e1gina inteira. Isso \u00e9 feito atrav\u00e9s do componente Quando voc\u00ea clica em um link do Inertia, ele intercepta o clique e redireciona para XHR em vez disso. O navegador n\u00e3o recarrega a p\u00e1gina desta forma, dando ao usu\u00e1rio uma experi\u00eancia completa de p\u00e1gina \u00fanica.<\/p>\n Para entender o Inertia e como integr\u00e1-lo com o Laravel, vamos construir um aplicativo web de blog chamado Kinsta Blog<\/strong> usando a combina\u00e7\u00e3o mais poderosa: Laravel para o backend, Vue.js para o frontend em JavaScript e Tailwind CSS para o estilo.<\/p>\n Se voc\u00ea preferir seguir este tutorial em um ambiente local, voc\u00ea pode usar DevKinsta<\/a>, uma ferramenta poderosa para desenvolvedores, designers e ag\u00eancias que os habilita a construir aplicativos web WordPress de uma e v\u00e1rias p\u00e1ginas. Felizmente, o WordPress pode ser facilmente integrado com o Laravel usando o plano Corcel<\/a>.<\/p>\n Para obter o m\u00e1ximo deste tutorial, voc\u00ea deve estar familiarizado com o seguinte:<\/p>\n Caso voc\u00ea n\u00e3o esteja se sentindo seguro, confira estes fant\u00e1sticos tutoriais gratuitos e pagos do Laravel<\/a>. Caso contr\u00e1rio, vamos come\u00e7ar.<\/p>\n Para focar no Inertia.js e ir direto para a parte divertida, certifique-se de ter a seguinte configura\u00e7\u00e3o pronta para usar:<\/p>\n \u201c\/resources\/views\/show.blade.php<\/strong>\u201d:<\/p>\n \u201cdatabase\/migrations\/create_articles_table.php<\/strong>\u201d:<\/p>\n \u201cdatabase\/factories\/ArticleFactory.php<\/strong>\u201d:<\/p>\n Isso \u00e9 tudo o que precisamos para come\u00e7ar! Agora vamos ao que interessa e apresentar o Inertia.js ao nosso projeto.<\/p>\n O processo de instala\u00e7\u00e3o do Inertia \u00e9 dividido em duas fases principais: do lado do servidor (Laravel) e do lado do cliente (VueJs).<\/p>\n O guia oficial de instala\u00e7\u00e3o na documenta\u00e7\u00e3o da Inertia est\u00e1 um pouco desatualizado porque Laravel 9 agora usa Vite<\/a> por padr\u00e3o, mas passaremos por isso tamb\u00e9m.<\/p>\n A primeira coisa que precisamos fazer \u00e9 instalar adaptadores Inertia server-side com o comando de terminal abaixo via Composer.<\/p>\n Agora configuraremos nosso modelo raiz, que ser\u00e1 um \u00fanico arquivo blade que ser\u00e1 usado para carregar seus arquivos CSS e JS, assim como uma raiz Inertia que ser\u00e1 usada para abrir nosso aplicativo JavaScript.<\/p>\n Como estamos usando a vers\u00e3o mais recente do Laravel 9 v9.3.1, devemos permitir tamb\u00e9m que a Vite fa\u00e7a sua m\u00e1gica incluindo-a em \/resources\/views\/app.blade.php<\/strong>:<\/p>\n Observe como podemos buscar o t\u00edtulo do projeto dinamicamente adicionando o atributo Tamb\u00e9m adicionamos a diretiva Nosso pr\u00f3ximo passo ser\u00e1 criar o HandleInertiaRequests<\/strong> middleware e public\u00e1-lo em nosso projeto. Podemos fazer isso disparando o comando do terminal abaixo dentro do diret\u00f3rio raiz do nosso projeto:<\/p>\n Uma vez que isso esteja completo, v\u00e1 para \u201cApp\/Http\/Kernel.php<\/strong>\u201d e registre Em seguida, precisamos instalar as depend\u00eancias do nosso frontend Vue.js 3 da mesma maneira que no lado do servidor:<\/p>\n Em seguida, \u00e9 necess\u00e1rio importar o Vue.js 3:<\/p>\n Ent\u00e3o atualize seu arquivo principal JavaScript para inicializar o Inertia.js com Vue.js 3, Vite e Laravel:<\/p>\n \u201crecursos\/js\/app.js<\/strong>\u201d:<\/p>\n No snippet de c\u00f3digo acima, usamos o plugin do Laravel Tudo o que resta \u00e9 instalar E atualizar o arquivo vite.config.js<\/strong>:<\/p>\n O passo final \u00e9 instalar nossas depend\u00eancias e compilar nossos arquivos:<\/p>\n E pronto! Voc\u00ea tem um aplicativo Laravel 9 funcional com Vue.js 3 e Vite. Agora \u00e9 hora de ver o aplicativo em a\u00e7\u00e3o!<\/p>\n Voc\u00ea se lembra desses dois arquivos de blade (index<\/strong> e show<\/strong>) para visualizar nossa p\u00e1gina inicial e um \u00fanico artigo?<\/p>\n O \u00fanico arquivo blade que precisaremos enquanto usamos Inertia \u00e9 o app.blade.php<\/strong>, que j\u00e1 usamos uma vez quando est\u00e1vamos instalando Inertia. Ent\u00e3o o que acontece com esses arquivos agora?<\/p>\n Transformaremos esses arquivos de componentes de blade em componentes do Inertia.js.<\/p>\n Cada p\u00e1gina em seu aplicativo tem seu pr\u00f3prio controlador e componente JavaScript com Inertia. Isso permite que voc\u00ea obtenha apenas os dados necess\u00e1rios para aquela p\u00e1gina, sem utilizar uma API. As p\u00e1ginas Inertia nada mais s\u00e3o do que componentes JavaScript, no nosso caso, s\u00e3o componentes Vue.js. Eles n\u00e3o t\u00eam nada particularmente digno de nota sobre eles. Ent\u00e3o o que faremos \u00e9 compactar todo o conte\u00fado HTML entre as tags Crie uma pasta chamada \u201cP\u00e1ginas\u201d e mova seus arquivos para l\u00e1. Ent\u00e3o teremos \u201cindex.blade.php<\/strong>\u201d e \u201cshow.blade.php<\/strong>\u201d em \u201c.\/resources\/js\/Pages<\/strong>\u201d. Ent\u00e3o alteraremos o formato do arquivo para \u201c.vue\u201d ao inv\u00e9s de \u201c.blade.php\u201d enquanto fazemos a primeira letra de seus nomes em mai\u00fasculas e transformamos seu conte\u00fado em um componente padr\u00e3o do Vue.js. Excluiremos as tags \u201cresources\/js\/Pages\/Index.vue<\/strong>\u201d:<\/p>\n \u201cresources\/js\/Pages\/Show.vue<\/strong>\u201d:<\/p>\n Como voc\u00ea pode perceber, continuamos copiando e colando nosso cabe\u00e7alho e rodap\u00e9 em cada componente, o que n\u00e3o \u00e9 uma pr\u00e1tica boa. Criaremos um Layout b\u00e1sico de Inertia para armazenar nossos persistentes componentes.<\/p>\n Crie uma pasta chamada \u201cLayouts\u201d em \u201c\/resources\/js<\/strong>\u201d e dentro dessa pasta crie um arquivo chamado \u201cKinstaLayout.vue\u201d. Este arquivo ter\u00e1 nosso cabe\u00e7alho e rodap\u00e9 e o \u201cresources\/js\/Layouts\/KinstaLayout.vue<\/strong>\u201d:<\/p>\n Ent\u00e3o importaremos este novo layout em nossas p\u00e1ginas e envolver todo o conte\u00fado HTML com ele. Nossos componentes devem se parecer com isso:<\/p>\n Index.vue<\/strong>:<\/p>\n Show.vue<\/strong>:<\/p>\n Primeiro usaremos o arquivo \u201cArticleFactory<\/strong>\u201d que temos do nosso ponto de partida tutorial e semear alguns artigos em nosso banco de dados.<\/p>\n \u201cdatabase\/seeders\/databaseSeeder.php<\/strong>\u201d:<\/p>\n Ent\u00e3o clique o comando do terminal abaixo para migrar suas tabelas e semear os dados falsos das f\u00e1bricas:<\/p>\n Isso criar\u00e1 10 artigos falsos no banco de dados, que precisaremos passar para a nossa vis\u00e3o usando o roteamento Laravel. Agora que estamos usando Inertia para renderizar views, a maneira como costum\u00e1vamos escrever nossas rotas ir\u00e1 mudar ligeiramente. Criaremos nossa primeira rota Laravel Inertia em \u201crotas\/web.php<\/strong>\u201d e retornar a visualiza\u00e7\u00e3o da p\u00e1gina inicial de \u201c\/resources\/js\/Pages\/Index.vue<\/strong>\u201d.<\/p>\n \u201croutes\/web.php<\/strong>\u201c:<\/p>\n Note que importamos V\u00e1 para o arquivo Index e defina os dados recuperados como uma propriedade e fa\u00e7a um loop sobre eles com \u201cresources\/js\/Pages\/Index.vue<\/strong>\u201d:<\/p>\n Note que \u00e9 suficiente defini-lo apenas como um adere\u00e7o sem devolv\u00ea-lo porque estamos usando o formato Realizemos o loop:<\/p>\n Agora, estamos usando a extens\u00e3o Vue DevTools do Google Chrome<\/a>, que nos permite depurar o aplicativo. Mostraremos como nossos dados est\u00e3o sendo passados para o componente.<\/p>\n \u201carticles\u201d \u00e9 passado para o componente como um objeto de adere\u00e7o contendo uma array de artigos; cada artigo da array \u00e9 tamb\u00e9m um objeto com propriedades que correspondem aos dados que ele adquiriu do banco de dados. Isso significa que qualquer dado que transferirmos de Laravel para Inertia ser\u00e1 tratado como um adere\u00e7o.<\/p>\n Como o Tailwind j\u00e1 est\u00e1 instalado em nosso projeto desde o in\u00edcio, tudo o que precisamos fazer \u00e9 dizer a ele para ler nossos componentes Inertia. Isso pode ser feito editando o arquivo \u201ctailwind.config.js<\/strong>\u201d da seguinte forma:<\/p>\n Ent\u00e3o certifique-se de que importamos nosso arquivo CSS em \u201cresources\/js\/app.js<\/strong>\u201d:<\/p>\n E agora estamos prontos para dar estilo aos nossos componentes.<\/p>\n \u201cresources\/js\/Pages\/Index.vue<\/strong>\u201d:<\/p>\n \u201cresources\/js\/Layouts\/KinstaLayout.vue<\/strong>\u201d:<\/p>\n Se voc\u00ea olhar para o navegador, ver\u00e1 que o Vite j\u00e1 atualizou a p\u00e1gina com as propriedades m\u00e1gicas do Tailwind.<\/p>\n Agora que temos uma p\u00e1gina inicial funcional que pode exibir todos os artigos no banco de dados, precisamos criar outra rota para exibir artigos individuais. Criaremos uma nova rota e definiremos a URL para um wildcard de \u201cid\u201d:<\/p>\n \u201crotas\/web.php<\/strong>\u201d<\/p>\n Importamos o modelo \u201cArtigo\u201d e adicionamos uma nova rota para retornar o componente Show.vue<\/strong> Inertia. Tamb\u00e9m aproveitamos a liga\u00e7\u00e3o do modelo de rota de Laravel<\/a>, o que permite que Laravel obtenha automaticamente o artigo ao qual nos referimos.<\/p>\n Tudo o que precisamos agora \u00e9 de uma maneira de visitar esta rota clicando em um link da p\u00e1gina inicial sem ter que recarregar a p\u00e1gina inteira. Isso \u00e9 poss\u00edvel com a ferramenta m\u00e1gica do Inertia Em nosso Index.vue, vamos importar Vamos estilizar o arquivo Show.vue<\/strong> com o Tailwind para deix\u00e1-lo um pouco mais elegante e pronto para receber nossas visitas. Tamb\u00e9m precisamos informar que ele deve esperar um objeto \u201cArticle\u201d e defini-lo como uma propriedade:<\/p>\n Agora quando clicarmos no t\u00edtulo do artigo ou \u201cLeia mais\u201d, seremos transportados magicamente para Show.vue<\/strong> sem refrescar a p\u00e1gina.<\/p>\n Em nosso caso, estamos usando \u201crotas\/web.php<\/strong>\u201d:<\/p>\n Agora temos um SPA funcional constru\u00eddo com Laravel, Inertia e Tailwind CSS. Mas a Inertia pode nos ajudar a alcan\u00e7ar muito mais. \u00c9 hora de adquirir algumas t\u00e9cnicas de Inertia que ir\u00e3o ajudar tanto os desenvolvedores quanto os visitantes de aplicativos.<\/p>\n Voc\u00ea deve ter notado que temos adicionado nomes \u00e0s nossas rotas Laravel sem us\u00e1-la. A Inertia nos permite usar nossas rotas nomeadas dentro de nossos componentes ao inv\u00e9s de anotar manualmente a rota completa.<\/p>\n Podemos conseguir isso instalando o pacote Ziggy<\/a> em nosso projeto:<\/p>\n A seguir v\u00e1 para \u201crecursos\/js\/app.js\u201d e atualize-o assim:<\/p>\n Ir para \u201c\/resources\/views\/app.blade.php<\/strong>\u201d e atualizar o cabe\u00e7alho com a diretiva …e atualize seus pacotes de NPM, pressionando os dois comandos de terminal abaixo:<\/p>\n Este pacote nos permite usar rotas nomeadas dentro de nossos componentes Inertia, ent\u00e3o vamos ao Index.vue<\/strong> e removamos a rota manual antiga e a substituamos pelo nome da rota enquanto passamos os dados normalmente como se estiv\u00e9ssemos em nosso controlador.<\/p>\n Substituiremos isso:<\/p>\n …com isso:<\/p>\n Isso nos dar\u00e1 o mesmo comportamento que tivemos, mas \u00e9 mais amig\u00e1vel para o desenvolvedor e extremamente \u00fatil quando a sua rota espera muitos par\u00e2metros.<\/p>\n Essa \u00e9 uma das melhores funcionalidades do Inertia.js; porque o SPA oferece uma experi\u00eancia interativa ao usu\u00e1rio, ter um feedback constante sobre se uma solicita\u00e7\u00e3o est\u00e1 carregando seria uma adi\u00e7\u00e3o fant\u00e1stica ao aplicativo. Isso pode ser feito por meio de uma biblioteca separada que o Inertia est\u00e1 oferecendo.<\/p>\n A biblioteca \u201c@inertiajs\/progress\u201d \u00e9 uma camada em torno do NProgress<\/a> que mostra condicionalmente os indicadores de carregamento de acordo com eventos de Inertia. Voc\u00ea\u00a0 n\u00e3o precisa\u00a0realmente saber como isso funciona nos bastidores, ent\u00e3o vamos apenas coloc\u00e1-lo em funcionamento.<\/p>\n Podemos instalar esta biblioteca com o comando de terminal abaixo:<\/p>\n Uma vez instalado, precisamos import\u00e1-lo em “Por que Inertia?<\/h2>\n
Como funciona o Inertia<\/h2>\n
<Link><\/code>, que \u00e9 um wrapper leve em torno de uma etiqueta de \u00e2ncora padr\u00e3o.<\/p>\nCome\u00e7ando com\u00a0Inertia<\/h2>\n
![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-tutorial-1024x640.png\")
Pr\u00e9-requisitos<\/h3>\n
\n
Passo 1: Instalando os elementos principais<\/h3>\n
\n
kinsta-blog<\/code><\/li>\n<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n <head>\n <meta charset=\"utf-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n\n <title>Kinsta Blog<\/title>\n <\/head>\n\n <body>\n <header>\n <h1>Kinsta Blog<\/h1>\n <\/header>\n\n <main>\n <h2>Read our latest articles<\/h2>\n\n <section>\n <article>\n <div>\n <img src=\"\/images\/kinsta-logo.png\" alt=\"Article thumbnail\" \/>\n <\/div>\n\n <h3>Title for the blog<\/h3>\n <p>\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem\n itaque error vel perferendis aliquam numquam dignissimos, expedita\n perspiciatis consectetur!\n <\/p>\n\n <a href=\"#\">Read more<\/a>\n <\/article>\n <\/section>\n <\/main>\n\n <footer>\n <h2>Join our Newsletter<\/h2>\n\n <input type=\"email\" \/>\n <\/footer>\n <\/body>\n<\/html><\/code><\/pre>\n<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n <head>\n <meta charset=\"utf-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n\n <title>Kinsta Blog<\/title>\n <\/head>\n\n <body>\n <main>\n <article>\n <div>\n <img src=\"\/images\/kinsta-logo.png\" alt=\"Article thumbnail\" \/>\n <\/div>\n\n <h1>Title for the blog<\/h1>\n\n <p>Article content goes here<\/p>\n <\/article>\n <\/main>\n\n <footer>\n <h2>Join our Newsletter<\/h2>\n\n <input type=\"email\" \/>\n <\/footer>\n <\/body>\n<\/html><\/code><\/pre>\n<\/li>\nkinsta_blog<\/code> conectado ao nosso projeto:”.env<\/strong>\u201d:\nDB_CONNECTION=mysql\nDB_HOST=127.0.0.1\nDB_PORT=3306\nDB_DATABASE=kinsta_blog\nDB_USERNAME=root\nDB_PASSWORD=<\/code><\/pre>\n<\/li>\n<?php\n\nnamespace AppModels;\n\nuse Illuminate\\Database\\Eloquent\\Factories\\HasFactory;\nuse Illuminate\\Database\\Eloquent\\Model;\n\nclass Article extends Model\n{\n use HasFactory;\n\n protected $fillable = ['title', 'excerpt', 'body'];\n}<\/code><\/pre>\n<?php\n\nuse Illuminate\\Database\\Migrations\\Migration;\nuse Illuminate\\Database\\Schema\\Blueprint;\nuse Illuminate\\Support\\Facades\\Schema;\n\nreturn new class extends Migration\n{\n\n public function up()\n {\n Schema::create('articles', function (Blueprint $table) {\n $table->id();\n $table->string('title');\n $table->text('excerpt');\n $table->text('body');\n $table->timestamps();\n });\n }\n\n public function down()\n {\n Schema::dropIfExists('articles');\n }\n};<\/code><\/pre>\n<?php\n\nnamespace DatabaseFactories;\n\nuse Illuminate\\Database\\Eloquent\\Factories\\Factory;\n\nclass ArticleFactory extends Factory\n{\n\n public function definition()\n {\n return [\n 'title' => $this->faker->sentence(6),\n 'excerpt' => $this->faker->paragraph(4),\n 'body' => $this->faker->paragraph(15),\n ];\n }\n}<\/code><\/pre>\n<\/li>\n<\/ol>\nPasso 2: Instalando o Inertia<\/h3>\n
1. Server-Side<\/h4>\n
composer require inertiajs\/inertia-laravel<\/code><\/pre>\n<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n <head>\n <meta charset=\"utf-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n\n \n <title inertia>{{ config('app.name', 'Laravel') }}<\/title>\n\n \n @vite('resources\/js\/app.js') @inertiaHead\n <\/head>\n\n <body class=\"font-sans antialiased\">\n @inertia\n <\/body>\n<\/html><\/code><\/pre>\ninertia<\/code> \u00e0s tags <title><\/code>.<\/p>\n@vite<\/code> ao cabe\u00e7alho para informar ao Vite o caminho do nosso arquivo principal JavaScript, onde criamos nosso aplicativo e importamos nosso CSS. O Vite \u00e9 uma ferramenta que ajuda no desenvolvimento de JavaScript e CSS, permitindo que os desenvolvedores visualizem as altera\u00e7\u00f5es de frontend sem precisar atualizar a p\u00e1gina durante o desenvolvimento local.<\/p>\nphp artisan inertia:middleware<\/code><\/pre>\nHandleInertiaRequests<\/code> como o \u00faltimo item em seus middlewares da web:<\/p>\n'web' => [\n \/\/ ...\n App\\Http\\Middleware\\HandleInertiaRequests::class,\n],<\/code><\/pre>\n2. Client-Side<\/h4>\n
npm install @inertiajs\/inertia @inertiajs\/inertia-vue3\n\/\/ or\nyarn add @inertiajs\/inertia @inertiajs\/inertia-vue3<\/code><\/pre>\nnpm install vue@next<\/code><\/pre>\nimport \".\/bootstrap\";\nimport \"..\/css\/app.css\";\n\nimport { createApp, h } from \"vue\";\nimport { createInertiaApp } from \"@inertiajs\/inertia-vue3\";\nimport { resolvePageComponent } from \"laravel-vite-plugin\/inertia-helpers\";\n\ncreateInertiaApp({\n title: (title) => `${title} - ${appName}`,\n resolve: (name) =>\n resolvePageComponent(\n `.\/Pages\/${name}.vue`,\n import.meta.glob(\".\/Pages\/**\/*.vue\")\n ),\n setup({ el, app, props, plugin }) {\n return createApp({ render: () => h(app, props) })\n .use(plugin)\n .mount(el);\n },\n});<\/code><\/pre>\nresolvePageComponent<\/code>, e dizemos para resolver nossos componentes no diret\u00f3rio .\/Pages\/$name.vue<\/strong>. Isso porque salvaremos nossos componentes Inertia nesse diret\u00f3rio mais tarde em nosso projeto, e este plugin nos ajudar\u00e1 a carregar automaticamente estes componentes do diret\u00f3rio correto.<\/p>\nvitejs\/plugin-vue<\/code>:<\/p>\nnpm i @vitejs\/plugin-vue<\/code><\/pre>\nimport { defineConfig } from \"vite\";\nimport laravel from \"laravel-vite-plugin\";\nimport vue from \"@vitejs\/plugin-vue\";\n\nexport default defineConfig({\n plugins: [\n laravel({\n input: [\"resources\/css\/app.css\", \"resources\/js\/app.js\"],\n refresh: true,\n }),\n vue({\n template: {\n transformAssetUrls: {\n base: null,\n includeAbsolute: false,\n },\n },\n }),\n ],\n});<\/code><\/pre>\nnpm install\n\nnpm run dev<\/code><\/pre>\nCriando p\u00e1ginas de Inertia<\/h2>\n
<template><\/code> e qualquer coisa relacionada ao JavaScript ser\u00e1 empacotada com as tags <script><\/code>.<\/p>\n<html><\/code>, <head><\/code>, e <body><\/code> porque elas j\u00e1 est\u00e3o inclu\u00eddas no componente raiz principal da blade.<\/p>\n<script setup>\n \/\/\n<\/script>\n\n<template>\n <header>\n <h1>Kinsta Blog<\/h1>\n <\/header>\n\n <main>\n <h2>Read our latest articles<\/h2>\n\n <section>\n <article>\n <div>\n <img src=\"\/images\/kinsta-logo.png\" alt=\"Article thumbnail\" \/>\n <\/div>\n\n <h3>Title for the blog<\/h3>\n <p>\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem\n itaque error vel perferendis aliquam numquam dignissimos, expedita\n perspiciatis consectetur!\n <\/p>\n\n <a href=\"#\">Read more<\/a>\n <\/article>\n <\/section>\n <\/main>\n\n <footer>\n <h2>Join our Newsletter<\/h2>\n\n <input type=\"email\" \/>\n <\/footer>\n<\/template><\/code><\/pre>\n<script setup>\n \/\/\n<\/script>\n\n<template>\n <header>\n <h1>Welcome to Kinsta Blog<\/h1>\n <\/header>\n\n <main>\n <article>\n <h1>Title for the blog<\/h1>\n\n <p>Article content goes here<\/p>\n <\/article>\n <\/main>\n\n <footer>\n <h2>Join our Newsletter<\/h2>\n\n <input type=\"email\" \/>\n <\/footer>\n<\/template><\/code><\/pre>\nmain<\/code> com um <slot \/><\/code> para permitir que todos os componentes envoltos com este layout sejam incorporados dentro dele. Este arquivo deve ser parecido com esse:<\/p>\n<script setup><\/script>\n\n<template>\n <header>\n <h1>Kinsta Blog<\/h1>\n <\/header>\n\n <main>\n <slot \/>\n <\/main>\n\n <footer>\n <h2>Join our Newsletter<\/h2>\n\n <input type=\"email\" \/>\n <\/footer>\n\n<\/template><\/code><\/pre>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n<\/script>\n\n<template>\n <KinstaLayout>\n <section>\n <h2>Read our latest articles<\/h2>\n <article>\n <div>\n <img src=\"\/images\/kinsta-logo.png\" alt=\"Article thumbnail\" \/>\n <\/div>\n\n <h3>Title for the blog<\/h3>\n <p>\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem\n itaque error vel perferendis aliquam numquam dignissimos, expedita\n perspiciatis consectetur!\n <\/p>\n\n <a href=\"#\">Read more<\/a>\n <\/article>\n <\/section>\n <\/KinstaLayout>\n <\/template><\/code><\/pre>\n<script setup>\n import KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n<\/script>\n\n<template>\n <KinstaLayout>\n <article>\n <h1>Title for the blog<\/h1>\n\n <p>Article content goes here<\/p>\n <\/article>\n <\/KinstaLayout>\n<\/template><\/code><\/pre>\nRotas de Laravel e renderiza\u00e7\u00e3o de Inertia<\/h2>\n
<?php\n\nnamespace Database\\Seeders;\n\nuse App\\Models\\Article;\nuse Illuminate\\Database\\Seeder;\n\nclass DatabaseSeeder extends Seeder\n{\n public function run()\n {\n Article::factory(10)->create();\n }\n}<\/code><\/pre>\nphp artisan migrate:fresh --seed<\/code><\/pre>\n<?php\n\nuse App\\Models\\Article;\nuse Illuminate\\Support\\Facades\\Route;\nuse Inertia\\Inertia;\n\nRoute::get('\/', function () {\n return Inertia::render('Index', [\n 'articles' => Article::latest()->get()\n ]);\n})->name('home');<\/code><\/pre>\nInertia<\/code> e n\u00e3o utilizamos o helper view()<\/code> Laravel para retornar a visualiza\u00e7\u00e3o, mas em vez disso usamos o Inertia::render<\/code>. Inertia tamb\u00e9m procurar\u00e1 por padr\u00e3o o nome do arquivo que mencionamos em nossa rota na pasta P\u00e1ginas<\/strong> em \u201cresources\/js\u201d.<\/p>\nv-for<\/code>\u00a0para mostrar os resultados. Entre as tags script, defina os dados passados \u200b\u200bcomo uma propriedade. Tudo o que o Inertia precisa saber \u00e9 que tipo de dados voc\u00ea est\u00e1 esperando, que, no nosso caso, \u00e9 um objeto ‘articles’ contendo um array de artigos.<\/p>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n\n defineProps({\n articles: Object,\n });\n<\/script><\/code><\/pre>\nsetup<\/code> para a API de composi\u00e7\u00e3o do Vue.js 3. Se estivermos usando a API de op\u00e7\u00f5es, ent\u00e3o precisar\u00edamos devolv\u00ea-la.<\/p>\n<template>\n <KinstaLayout>\n <h2>Read our latest articles<\/h2>\n\n <section>\n \/\/ Looping over articles\n <article v-for=\"article in articles\":key=\"article.id\">\n <div>\n <img src=\"\/images\/kinsta-logo.png\" alt=\"Article thumbnail\" \/>\n <\/div>\n\n <h3>{{article.title}}<\/h3>\n <p>{{article.excerpt}}<\/p>\n\n <a href=\"#\">Read more<\/a>\n <\/article>\n <\/section>\n <\/KinstaLayout>\n<\/template><\/code><\/pre>\nnpm run dev<\/code> (deixe-o funcionando porque estamos usando Vite) e php artisan serve<\/code> para iniciar o servidor de desenvolvimento de larvas e acessar nosso site, veremos a p\u00e1gina esperada exibindo todos os dez artigos no banco de dados.<\/p>\n![\"Inspecionando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/inspect-Inertia-passed-data-1024x543.png\")
Usando o CSS Tailwind com o Inertia.js<\/h2>\n
\/** @type {import('tailwindcss').Config} *\/\nmodule.exports = {\n content: [\n \".\/storage\/framework\/views\/*.php\",\n \".\/resources\/views\/**\/*.blade.php\",\n \".\/resources\/js\/**\/*.vue\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n};<\/code><\/pre>\nimport \"..\/css\/app.css\";<\/code><\/pre>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n\n defineProps({\n articles: Object,\n });\n<\/script>\n\n<template>\n <KinstaLayout>\n <h2 class=\"text-2xl font-bold py-10\">Read our latest articles<\/h2>\n\n <section class=\"space-y-5 border-b-2 pb-10\">\n <article\n v-for=\"article in articles\"\n :key=\"article.id\"\n class=\"flex justify-center items-center shadow-md bg-white rounded-xl p-4 mx-auto max-w-3xl\"\n >\n\n <img\n src=\"\/images\/kinsta-logo.png\"\n class=\"w-32 h-32 rounded-xl object-cover\"\n alt=\"\"\n \/>\n\n <div class=\"flex flex-col text-left justify-between pl-3 space-y-5\">\n <h3\n class=\"text-xl font-semibold text-indigo-600 hover:text-indigo-800\"\n >\n <a href=\"#\">{{ article.title }}<\/a>\n <\/h3>\n <p>\n {{ article.excerpt }}\n <\/p>\n <a\n href=\"#\"\n class=\"text-indigo-600 hover:text-indigo-800 w-fit self-end font-semibold\"\n >Read more<\/a\n >\n <\/div>\n <\/article>\n <\/section>\n <\/KinstaLayout>\n<\/template><\/code><\/pre>\n<script setup><\/script>\n\n<template>\n <header\n class=\"bg-gradient-to-r from-blue-700 via-indigo-700 to-blue-700 w-full text-center py-4\"\n >\n <h1 class=\"text-white font-bold text-4xl\">Kinsta Blog<\/h1>\n <\/header>\n\n <main class=\"container mx-auto text-center\">\n <slot \/>\n <\/main>\n\n <footer\n class=\"bg-gradient-to-b from-transparent to-gray-300 w-full text-center mt-5 py-10 mx-auto\"\n >\n <h2 class=\"font-bold text-xl pb-5\">Join our Newsletter<\/h2>\n\n <input\n class=\"rounded-xl w-80 h-12 px-3 py-2 shadow-md\"\n type=\"email\"\n placeholder=\"Write your email..\"\n \/>\n <\/footer>\n<\/template><\/code><\/pre>\n![\"Renderiza\u00e7\u00e3o](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-blog.gif\")
Links de Inertia<\/h2>\n
<?php\n\nuse App\\Models\\Article;\nuse Illuminate\\Support\\Facades\\Route;\nuse Inertia\\Inertia;\n\nRoute::get('\/', function () {\n return Inertia::render('Index', [\n 'articles' => Article::latest()->get()\n ]);\n})->name('home');\n\nRoute::get('\/posts\/{article:id}', function (Article $article) {\n return Inertia::render('Show', [\n 'article' => $article\n ]);\n})->name('article.show');<\/code><\/pre>\n<Link><\/code>. Mencionamos na introdu\u00e7\u00e3o que o Inertia usa <Link><\/code> como um wrapper para uma etiqueta de \u00e2ncora padr\u00e3o <a><\/code>, e que este wrapper tem o objetivo de fazer com que as visitas \u00e0 p\u00e1gina sejam o mais perfeitas poss\u00edvel. No Inertia, a etiqueta <Link><\/code> pode se comportar como uma etiqueta de \u00e2ncora que realiza pedidos <GET><\/code>, mas tamb\u00e9m pode agir como um <button><\/code> e um <form><\/code> ao mesmo tempo. Veremos como podemos aplic\u00e1-la ao nosso projeto.<\/p>\n<Link><\/code> do Inertia, e remover as etiquetas de \u00e2ncora <a><\/code> e substitu\u00ed-las por etiquetas do Inertia <Link><\/code>. O atributo href<\/code> ser\u00e1 definido para a URL da rota que fizemos anteriormente para ver o artigo:<\/p>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\nimport { Link } from \"@inertiajs\/inertia-vue3\";\n\ndefineProps({\n articles: Object,\n});\n<\/script>\n\n<template>\n <KinstaLayout>\n <section class=\"space-y-5 border-b-2 pb-10\">\n <h2 class=\"text-2xl font-bold pt-10 mx-auto text-center\">\n Read our latest articles\n <\/h2>\n\n <article\n v-for=\"article in articles\"\n :key=\"article.id\"\n class=\"flex justify-center items-center shadow-md bg-white rounded-xl p-4 mx-auto max-w-3xl\"\n >\n <img\n src=\"\/images\/kinsta-logo.png\"\n class=\"w-32 h-32 rounded-xl object-cover\"\n alt=\"\"\n \/>\n\n <div\n class=\"flex flex-col text-left justify-between pl-3 space-y-5\"\n >\n <h3\n class=\"text-xl font-semibold text-indigo-600 hover:text-indigo-800\"\n >\n <Link :href=\"'\/posts\/' + article.id\">{{\n article.title\n }}<\/Link>\n <\/h3>\n <p>\n {{ article.excerpt }}\n <\/p>\n <Link\n :href=\"'\/posts\/' + article.id\"\n class=\"text-indigo-600 hover:text-indigo-800 w-fit self-end font-semibold\"\n >Read more\n <\/Link>\n <\/div>\n <\/article>\n <\/section>\n <\/KinstaLayout>\n<\/template><\/code><\/pre>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n\ndefineProps({\n article: Object,\n});\n<\/script>\n\n<template>\n <KinstaLayout>\n <article class=\"mx-auto mt-10 flex justify-center max-w-5xl border-b-2\">\n <img\n src=\"\/images\/kinsta-logo.png\"\n class=\"w-80 h-80 rounded-xl mx-auto py-5\"\n alt=\"\"\n \/>\n <div class=\"text-left flex flex-col pt-5 pb-10 px-10\">\n <h1 class=\"text-xl font-semibold mb-10\">{{ article.title }}<\/h1>\n <p>{{ article.body }}<\/p>\n <\/div>\n <\/article>\n <\/KinstaLayout>\n<\/template><\/code><\/pre>\n![\"Links](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-Link-1024x596.gif\")
<Link><\/code> como uma etiqueta de \u00e2ncora que envia um pedido GET<\/code> para a rota e devolve os novos dados, mas podemos usar <Link><\/code> para tamb\u00e9m POST<\/code>, PUT<\/code>, PATCH<\/code> e DELETE<\/code><\/p>\n<Link href=\"\/logout\" method=\"post\" as=\"button\" type=\"button\">Logout<\/Link><\/code><\/pre>\nLaravel Inertia: dicas e truques que voc\u00ea deve conhecer<\/h2>\n
Gerando URLs<\/h3>\n
composer require tightenco\/ziggy<\/code><\/pre>\nimport \".\/bootstrap\";\nimport \"..\/css\/app.css\";\n\nimport { createApp, h } from \"vue\";\nimport { createInertiaApp } from \"@inertiajs\/inertia-vue3\";\nimport { resolvePageComponent } from \"laravel-vite-plugin\/inertia-helpers\";\nimport { ZiggyVue } from \"..\/..\/vendor\/tightenco\/ziggy\/dist\/vue.m\";\n\ncreateInertiaApp({\n title: (title) => `${title} - ${appName}`,\n resolve: (name) =>\n resolvePageComponent(\n `.\/Pages\/${name}.vue`,\n import.meta.glob(\".\/Pages\/**\/*.vue\")\n ),\n setup({ el, app, props, plugin }) {\n return createApp({ render: () => h(app, props) })\n .use(plugin)\n .use(ZiggyVue, Ziggy)\n .mount(el);\n },\n});<\/code><\/pre>\n@routes<\/code>:<\/p>\n<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n \n <title inertia>{{ config('app.name', 'Laravel') }}<\/title>\n\n \n @routes\n @vite('resources\/js\/app.js')\n @inertiaHead\n<\/head>\n\n<body class=\"font-sans antialiased\">\n @inertia\n<\/body>\n\n<\/html><\/code><\/pre>\nnpm install && npm run dev<\/code><\/pre>\n<Link :href=\"'\/posts\/' + article.id\">\n {{ article.title }}\n<\/Link><\/code><\/pre>\n<Link :href=\"route('article.show', article.id)\">\n {{ article.title }}\n<\/Link><\/code><\/pre>\nIndicadores de progresso<\/h3>\n
npm install @inertiajs\/progress<\/code><\/pre>\n