Jak używać Inertia.js w swoich projektach Laravel

Aplikacje wielostronicowe (MPA) z dnia na dzień stają się coraz mniej popularne. Znane platformy, takie jak Facebook, Twitter, YouTube, Github i wiele innych, już zamiast tego korzystają z technologii aplikacji jednostronicowych (SPA).

Ta modna technologia umożliwia użytkownikom szybkie i responsywne korzystanie z aplikacji internetowych, ponieważ wszystko jest renderowane po stronie klienta. Jednak może to być uciążliwe dla programistów, którzy budują aplikacje renderowane po stronie serwera za pomocą frameworków takich jak Laravel lub Django.

Na szczęście Inertia.js wkroczył i przyszedł na ratunek.
Brakujący składnik, którego potrzebują Twoje projekty Laravel? Bezwładność.js. Dowiedz się więcej z tego szczegółowego przewodnika Kliknij, aby tweetować
W tym artykule pokażemy, jak zacząć korzystać z Inertia.js i jak używać go z Laravel, Vue.js i Tailwind CSS, aby stworzyć nowoczesną aplikację internetową dla blogów. Podzielimy się również tym, jak sprawić, by SPA były bardziej przyjazne dla SEO, a także kilkoma innymi sztuczkami.

Jeśli dopiero zaczynasz pracę z Laravelem, zalecamy najpierw przeczytanie tego artykułu, abyś był gotowy do działania.

Dlaczego SPA?

Zanim zadamy sobie pytanie, dlaczego powinniśmy korzystać z Inertii, musimy najpierw zadać sobie pytanie: „Dlaczego SPA?”

Dlaczego ktoś miałby preferować aplikacje renderowane po stronie klienta zamiast tradycyjnych aplikacji po stronie serwera? Co zmusiłoby programistę Laravela z pełnym stosem do pożegnania się z komponentami typu blade?

Krótka odpowiedź: ponieważ szybkość i responsywność są niezbędne do udanego zaangażowania użytkowników.

W przypadku MPA przeglądarka stale wysyła żądania do backendu, który następnie wykonuje liczne zapytania do bazy danych. Po przetworzeniu zapytań przez bazę danych i serwer i dostarczeniu ich do przeglądarki strona jest renderowana.

Ale SPA są różne. Aplikacja przenosi wszystko, czego użytkownik może potrzebować, bezpośrednio na stronę, eliminując potrzebę wysyłania zapytań przez przeglądarkę lub ponownego ładowania strony w celu renderowania nowych elementów HTML.

Ze względu na to jedyne w swoim rodzaju doświadczenie użytkownika, wiele znanych firm domaga się, aby ich strony internetowe stały się aplikacjami jednostronicowymi.

To powiedziawszy, tworzenie aplikacji jednostronicowych może być trudne dla programistów Laravel, ponieważ wymagałoby od nich rozpoczęcia korzystania z Vue.js lub React zamiast szablonów blade, co spowodowałoby utratę wielu klejnotów Laravel, które oszczędzają czas i wysiłek.

Jednak teraz, gdy mamy Inertia.js, wszystko się zmieniło.

Dlaczego bezwładność?

Jeśli programiści Laravel mieliby zbudować web SPA z Vue przed Inertią, musieliby skonfigurować interfejsy API i zwrócić dane JSON za pomocą Laravel, a następnie użyć czegoś takiego jak AXIOS do pobrania danych w komponentach Vue. Potrzebowaliby również czegoś takiego jak Vue Router do zarządzania trasami, co oznaczałoby utratę routingu Laravel, a także oprogramowania pośredniego i kontrolerów.

Z drugiej strony Inertia.js umożliwia programistom tworzenie nowoczesnych jednostronicowych aplikacji Vue, React i Svelte przy użyciu klasycznego routingu i kontrolerów po stronie serwera. Inertia została zaprojektowana dla programistów Laravel, Ruby on Rails i Django, aby umożliwić im tworzenie aplikacji bez zmiany technik kodowania tworzenia kontrolerów, pobierania danych z bazy danych i renderowania widoków

Dzięki Inertia.js programiści Laravela poczują się jak w domu.

Jak działa bezwładność

Zbudowanie SPA tylko za pomocą Laravela i Vue zapewni Ci pełną stronę JavaScript dla Twojego frontendu, ale nie zapewni Ci to doświadczenia z aplikacją na jednej stronie. Każde kliknięcie łącza spowoduje ponowne uruchomienie platformy po stronie klienta przy następnym ładowaniu strony.

W tym miejscu pojawia się inercja.

Inertia to w zasadzie biblioteka routingu po stronie klienta. Umożliwia nawigację między stronami bez konieczności ponownego ładowania całej strony. Osiąga się to za pomocą komponentu <Link> , który jest lekkim opakowaniem standardowego znacznika zakotwiczenia.

Kiedy klikniesz link Inertia, Inertia przechwytuje kliknięcie i zamiast tego przekierowuje cię do XHR. Przeglądarka nie będzie w ten sposób przeładowywać strony, zapewniając użytkownikowi pełne korzystanie z jednej strony.

Pierwsze kroki z bezwładnością

Aby zrozumieć Inertię i jak zintegrować ją z Laravel, zbudujemy aplikację internetową do blogów o nazwie Kinsta Blog , używając najpotężniejszej kombinacji, Laravel dla backendu, Vue.js dla frontendu JavaScript i CSS Tailwind do stylizacji.

Jeśli wolisz skorzystać z tego samouczka w środowisku lokalnym, możesz użyć DevKinsta, potężnego narzędzia dla programistów, projektantów i agencji, które umożliwia im tworzenie jednostronicowych i wielostronicowych aplikacji internetowych WordPress. Na szczęście WordPress można łatwo zintegrować z Laravel za pomocą pakietu Corcel.

Wymagania wstępne

Aby jak najlepiej wykorzystać ten samouczek, powinieneś zapoznać się z następującymi kwestiami:

• Podstawy Laravela (instalacja, baza danych, migracje baz danych, Eloquent Models, kontrolery i routing)
• Podstawy Vue.js (instalacja, struktura i formularze)

Jeśli nie masz pewności, sprawdź te fantastyczne bezpłatne i płatne samouczki dotyczące Laravel. W przeciwnym razie wskoczmy.

Krok pierwszy: zainstaluj podstawowe elementy

Aby skupić się na Inertia.js i od razu przejść do zabawnej części, upewnij się, że masz gotową następującą konfigurację:

1. Świeżo zainstalowany projekt Laravel 9 o nazwie kinsta-blog
2. Tailwind CSS CLI zainstalowany w naszym projekcie Laravel
3. Dwa komponenty blade w kinsta-blog/resources/views do przeglądania strony głównej bloga i jeden artykuł na blogu, jak pokazano poniżej:

   „ /resources/views/index.blade.php ”:

    <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Kinsta Blog</title> </head> <body> <header> <h1>Kinsta Blog</h1> </header> <main> <h2>Read our latest articles</h2> <section> <article> <div> <img src="/images/kinsta-logo.png" alt="Article thumbnail" /> </div> <h3>Title for the blog</h3> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem itaque error vel perferendis aliquam numquam dignissimos, expedita perspiciatis consectetur! </p> <a href="#">Read more</a> </article> </section> </main> <footer> <h2>Join our Newsletter</h2> <input type="email" /> </footer> </body> </html>

   „/resources/views/ show.blade.php ”:

    <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Kinsta Blog</title> </head> <body> <main> <article> <div> <img src="/images/kinsta-logo.png" alt="Article thumbnail" /> </div> <h1>Title for the blog</h1> <p>Article content goes here</p> </article> </main> <footer> <h2>Join our Newsletter</h2> <input type="email" /> </footer> </body> </html>

4. Lokalna baza danych MySQL o nazwie kinsta_blog podłączona do naszego projektu:

   „ .env ”:

    DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=kinsta_blog DB_USERNAME=root DB_PASSWORD=

5. Model artykułu, migracje i fabryki:

   „aplikacja/Modele/ Artykuł.php ”:

    <?php namespace AppModels; use IlluminateDatabaseEloquentFactoriesHasFactory; use IlluminateDatabaseEloquentModel; class Article extends Model { use HasFactory; protected $fillable = ['title', 'excerpt', 'body']; }

   „baza danych/migracje/ create_articles_table.php ”:

    <?php use IlluminateDatabaseMigrationsMigration; use IlluminateDatabaseSchemaBlueprint; use IlluminateSupportFacadesSchema; return new class extends Migration { public function up() { Schema::create('articles', function (Blueprint $table) { $table->id(); $table->string('title'); $table->text('excerpt'); $table->text('body'); $table->timestamps(); }); } public function down() { Schema::dropIfExists('articles'); } };

   „baza danych/fabryki/ Artykuły.php ”:

    <?php namespace DatabaseFactories; use IlluminateDatabaseEloquentFactoriesFactory; class ArticleFactory extends Factory { public function definition() { return [ 'title' => $this->faker->sentence(6), 'excerpt' => $this->faker->paragraph(4), 'body' => $this->faker->paragraph(15), ]; } }

To wszystko, czego potrzebujemy, aby zacząć! Teraz przejdźmy do rzeczy i wprowadźmy Inertia.js do naszego projektu.

Krok 2: Zainstaluj bezwładność

Proces instalacji Inertii jest podzielony na dwie główne fazy: po stronie serwera (Laravel) i po stronie klienta (VueJs).

Oficjalny przewodnik instalacji w dokumentacji Inertia jest trochę nieaktualny, ponieważ Laravel 9 domyślnie używa teraz Vite, ale omówimy to również.

1. Po stronie serwera

Pierwszą rzeczą, którą musimy zrobić, to zainstalować adaptery po stronie serwera Inertia za pomocą poniższego polecenia terminala za pośrednictwem Composer.

 composer require inertiajs/inertia-laravel

Teraz skonfigurujemy nasz szablon główny, który będzie pojedynczym plikiem kasetowym, który będzie używany do ładowania plików CSS i JS, a także katalog główny Inertia, który będzie używany do uruchamiania naszej aplikacji JavaScript.

Ponieważ używamy najnowszej wersji Laravel 9 v9.3.1, musimy również umożliwić Vite działanie magii, umieszczając ją w naszych tagach w /resources/views/ app.blade.php :

 <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Fetch project name dynamically --> <title inertia>{{ config('app.name', 'Laravel') }}</title> <!-- Scripts --> @vite('resources/js/app.js') @inertiaHead </head> <body class="font-sans antialiased"> @inertia </body> </html>

Zwróć uwagę, w jaki sposób jesteśmy w stanie dynamicznie pobrać tytuł projektu, dodając atrybut Inertia do tagów <title> .

Dodaliśmy również dyrektywę @vite do głowy, aby Vite znała ścieżkę do naszego głównego pliku JavaScript, w którym stworzyliśmy naszą aplikację i zaimportowaliśmy nasz CSS. Vite to narzędzie, które pomaga w rozwoju JavaScript i CSS, umożliwiając programistom przeglądanie zmian frontendu bez konieczności odświeżania strony podczas lokalnego rozwoju.

Naszym kolejnym krokiem będzie stworzenie oprogramowania pośredniczącego HandleInertiaRequests i opublikowanie go w naszym projekcie. Możemy to zrobić, uruchamiając poniższe polecenie terminala w katalogu głównym naszego projektu:

 php artisan inertia:middleware

Po zakończeniu przejdź do „App/Http/ Kernel ” i zarejestruj HandleInertiaRequests jako ostatni element w swoim webowym oprogramowaniu pośredniczącym:

 'web' => [ // ... AppHttpMiddlewareHandleInertiaRequests::class, ],

2. Po stronie klienta

Następnie musimy zainstalować nasze zależności frontendowe Vue.js 3 w taki sam sposób, jak po stronie serwera:

 npm install @inertiajs/inertia @inertiajs/inertia-vue3 // or yarn add @inertiajs/inertia @inertiajs/inertia-vue3

Następnie musisz pobrać Vue.js 3:

 npm install [email protected]

Następnie zaktualizuj główny plik JavaScript, aby zainicjować Inertia.js za pomocą Vue.js 3, Vite i Laravel:

„zasoby/js/ aplikacja.js ”:

 import "./bootstrap"; import "../css/app.css"; import { createApp, h } from "vue"; import { createInertiaApp } from "@inertiajs/inertia-vue3"; import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"; createInertiaApp({ title: (title) => `${title} - ${appName}`, resolve: (name) => resolvePageComponent( `./Pages/${name}.vue`, import.meta.glob("./Pages/**/*.vue") ), setup({ el, app, props, plugin }) { return createApp({ render: () => h(app, props) }) .use(plugin) .mount(el); }, });

W powyższym fragmencie kodu używamy wtyczki resolvePageComponent i mówimy jej, aby rozwiązała nasze komponenty z katalogu ./Pages/$name.vue . Dzieje się tak, ponieważ później w naszym projekcie zapiszemy nasze komponenty Inertia w tym katalogu, a ta wtyczka pomoże nam automatycznie załadować te komponenty z właściwego katalogu.

Pozostało tylko zainstalować vitejs/plugin-vue :

 npm i @vitejs/plugin-vue

I zaktualizuj plik 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({ template: { transformAssetUrls: { base: null, includeAbsolute: false, }, }, }), ], });

Ostatnim krokiem jest zainstalowanie naszych zależności i skompilowanie naszych plików:

 npm install npm run dev

I voila! Masz działającą aplikację Laravel 9 z Vue.js 3 i Vite. Teraz musimy zobaczyć, jak coś dzieje się w akcji!

Tworzenie stron bezwładności

Czy pamiętasz te dwa pliki blade ( index i show ) do przeglądania naszej strony głównej i jednego artykułu?

Jedynym plikiem blade, którego będziemy potrzebować podczas korzystania z Inertii, jest app.blade.php , którego użyliśmy już podczas instalacji Inertii. Co się teraz dzieje z tymi plikami?

Przekształcimy te pliki z komponentów blade w komponenty Inertia.js.

Każda strona w Twojej aplikacji ma własny kontroler i komponent JavaScript z Inertią. Pozwala to uzyskać tylko te dane, które są wymagane dla tej strony, bez użycia interfejsu API. Strony Inertia to nic innego jak komponenty JavaScript, w naszym przypadku są to komponenty Vue.js. Nie mają w sobie nic szczególnie godnego uwagi. Więc to, co będziemy robić, to owijanie całej zawartości HTML między tagami <template> , a wszystko, co dotyczy JavaScript, będzie owijane tagami <script> .

Utwórz folder o nazwie „Strony” i przenieś tam swoje pliki. Będziemy więc mieć „ index.blade.php ” i „ show.blade.php ” w „ ./resources/js/Pages ”. Następnie zmienimy format pliku na „.vue” zamiast „.blade.php”, zamieniając pierwszą literę ich imion na wielką i zamienimy jego zawartość w standardowy komponent Vue.js. Wykluczymy tagi <html> , <head> i <body> , ponieważ są one już zawarte w głównym komponencie kasetowym.

„zasoby/js/strony/ indeks.vue ”:

 <script setup> // </script> <template> <header> <h1>Kinsta Blog</h1> </header> <main> <h2>Read our latest articles</h2> <section> <article> <div> <img src="/images/kinsta-logo.png" alt="Article thumbnail" /> </div> <h3>Title for the blog</h3> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem itaque error vel perferendis aliquam numquam dignissimos, expedita perspiciatis consectetur! </p> <a href="#">Read more</a> </article> </section> </main> <footer> <h2>Join our Newsletter</h2> <input type="email" /> </footer> </template>

„zasoby/js/strony/ Show.vue ”:

 <script setup> // </script> <template> <header> <h1>Welcome to Kinsta Blog</h1> </header> <main> <article> <h1>Title for the blog</h1> <p>Article content goes here</p> </article> </main> <footer> <h2>Join our Newsletter</h2> <input type="email" /> </footer> </template>

Coś mnie naprawdę niepokoi! Ciągle kopiujemy i wklejamy nasz nagłówek i stopkę w każdym komponencie, co nie jest dobrą praktyką. Stwórzmy podstawowy układ Inertia do przechowywania naszych trwałych komponentów.

Utwórz folder o nazwie „Layouts” w „ /resources/js ” iw tym folderze utwórz plik o nazwie „KinstaLayout.vue”. Ten plik będzie miał nasz nagłówek i stopkę oraz main z <slot /> , aby umożliwić osadzenie w nim wszystkich komponentów opakowanych w ten układ. Ten plik powinien wyglądać tak:

„resources/js/Layouts/ KinstaLayout.vue ”:

 <script setup></script> <template> <header> <h1>Kinsta Blog</h1> </header> <main> <slot /> </main> <footer> <h2>Join our Newsletter</h2> <input type="email" /> </footer> </template>

Następnie zaimportujemy ten nowy układ na nasze strony i otoczymy nim całą zawartość HTML. Nasze komponenty powinny wyglądać tak:

Indeks. vue :

 <script setup> import KinstaLayout from "../Layouts/KinstaLayout.vue"; </script> <template> <KinstaLayout> <section> <h2>Read our latest articles</h2> <article> <div> <img src="/images/kinsta-logo.png" alt="Article thumbnail" /> </div> <h3>Title for the blog</h3> <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem itaque error vel perferendis aliquam numquam dignissimos, expedita perspiciatis consectetur! </p> <a href="#">Read more</a> </article> </section> </KinstaLayout> </template>

Pokaż.vue :

 <script setup> import KinstaLayout from "../Layouts/KinstaLayout.vue"; </script> <template> <KinstaLayout> <article> <h1>Title for the blog</h1> <p>Article content goes here</p> </article> </KinstaLayout> </template>

Trasy Laravela i renderowanie bezwładności

Najpierw użyjmy pliku „ ArticleFactory ”, który mamy z punktu początkowego naszego samouczka i wstawmy kilka artykułów do naszej bazy danych.

„baza danych/seeders/ databaseSeeder.php ”:

 <?php namespace DatabaseSeeders; use AppModelsArticle; use IlluminateDatabaseSeeder; class DatabaseSeeder extends Seeder { public function run() { Article::factory(10)->create(); } }

Następnie naciśnij poniższe polecenie terminala, aby przeprowadzić migrację tabel i wprowadzić fałszywe dane z fabryk:

 php artisan migrate:fresh --seed

Spowoduje to utworzenie 10 fałszywych artykułów w bazie danych, które będziemy musieli przekazać do naszego widoku za pomocą routingu Laravel. Teraz, gdy używamy Inertii do renderowania widoków, sposób, w jaki pisaliśmy nasze trasy, nieznacznie się zmieni. Stwórzmy naszą pierwszą trasę Laravel Inertia w „routes/ web.php ” i zwróćmy widok strony głównej z „/resources/js/Pages/ Index.vue ”.

„trasy/ web.php ”:

 <?php use AppModelsArticle; use IlluminateSupportFacadesRoute; use InertiaInertia; Route::get('/', function () { return Inertia::render('Index', [ 'articles' => Article::latest()->get() ]); })->name('home');

Zauważ, że zaimportowaliśmy Inertia i nie użyliśmy pomocnika view() Laravel do zwrócenia widoku, ale zamiast tego użyliśmy Inertia::render . Inertia będzie również domyślnie szukać nazwy pliku, o której wspomnieliśmy w naszej trasie, w folderze Pages w „resources/js”.

Przejdź do pliku indeksu i ustaw pobrane dane jako rekwizyt i zapętl je za pomocą v-for , aby wyświetlić wyniki. Pomiędzy znacznikami skryptu zdefiniuj przekazane dane jako rekwizyt. Wszystko, co Inertia musi wiedzieć, to jakiego rodzaju danych oczekujesz, co w naszym przypadku jest obiektem „Article” zawierającym tablicę artykułów.

„zasoby/js/strony/ indeks.vue ”:

 <script setup> import KinstaLayout from "../Layouts/KinstaLayout.vue"; defineProps({ Articles: Object, }); </script>

Pamiętaj, że wystarczy zdefiniować go jako rekwizyt bez zwracania go, ponieważ używamy formatu setup dla interfejsu API kompozycji Vue.js 3. Jeśli używamy interfejsu API opcji, musielibyśmy go zwrócić.

Zróbmy pętlę:

 <template> <KinstaLayout> <h2>Read our latest articles</h2> <section> // Looping over articles <article v-for="article in articles":key="article.id"> <div> <img src="/images/kinsta-logo.png" alt="Article thumbnail" /> </div> <h3>{{article.title}}</h3> <p>{{article.excerpt}}</p> <a href="#">Read more</a> </article> </section> </KinstaLayout> </template>

npm run dev (zostaw go uruchomionego, ponieważ używamy Vite) i php artisan serve do uruchomienia serwera programistycznego laravel i uzyskania dostępu do naszej witryny, zobaczymy oczekiwaną stronę wyświetlającą wszystkie dziesięć artykułów w bazie danych.

Teraz używamy rozszerzenia Vue DevTools Google Chrome, które pozwala nam debugować moją aplikację. Pokażemy Ci, w jaki sposób nasze dane są przekazywane do komponentu.

„Artykuły” są przekazywane do komponentu jako obiekt rekwizytu zawierający tablicę artykułów; każdy artykuł w tablicy jest również obiektem o właściwościach odpowiadających danym uzyskanym z bazy danych. Oznacza to, że wszelkie dane, które przeniesiemy z Laravela do Inertii, będą traktowane jako rekwizyt.

Używanie CSS Tailwind z Inertia.js

Ponieważ Tailwind jest już zainstalowany w naszym projekcie w punkcie początkowym, wszystko, co musimy zrobić, to powiedzieć mu, aby czytał nasze komponenty Inertia. Można to osiągnąć, edytując plik „ tailwind.config.js ” w następujący sposób:

 /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./storage/framework/views/*.php", "./resources/views/**/*.blade.php", "./resources/js/**/*.vue", ], theme: { extend: {}, }, plugins: [], };

Następnie upewnij się, że zaimportowaliśmy nasz plik CSS do „resources/js/ app.js ”:

 import "../css/app.css";

A teraz jesteśmy gotowi do stylizacji naszych komponentów.

„zasoby/js/strony/ indeks.vue ”:

 <script setup> import KinstaLayout from "../Layouts/KinstaLayout.vue"; defineProps({ articles: Object, }); </script> <template> <KinstaLayout> <h2 class="text-2xl font-bold py-10">Read our latest articles</h2> <section class="space-y-5 border-b-2 pb-10"> <article v-for="article in articles" :key="article.id" class="flex justify-center items-center shadow-md bg-white rounded-xl p-4 mx-auto max-w-3xl" > <img src="/images/kinsta-logo.png" class="w-32 h-32 rounded-xl object-cover" alt="" /> <div class="flex flex-col text-left justify-between pl-3 space-y-5"> <h3 class="text-xl font-semibold text-indigo-600 hover:text-indigo-800" > <a href="#">{{ article.title }}</a> </h3> <p> {{ article.excerpt }} </p> <a href="#" class="text-indigo-600 hover:text-indigo-800 w-fit self-end font-semibold" >Read more</a > </div> </article> </section> </KinstaLayout> </template>

„resources/js/Layouts/ KinstaLayout.vue ”:

 <script setup></script> <template> <Header class="bg-gradient-to-r from-blue-700 via-indigo-700 to-blue-700 w-full text-center py-4" > <h1 class="text-white font-bold text-4xl">Kinsta Blog</h1> </Header> <main class="container mx-auto text-center"> <slot /> </main> <footer class="bg-gradient-to-b from-transparent to-gray-300 w-full text-center mt-5 py-10 mx-auto" > <h2 class="font-bold text-xl pb-5">Join our Newsletter</h2> <input class="rounded-xl w-80 h-12 px-3 py-2 shadow-md" type="email" placeholder="Write your email.." /> </footer> </template>

Jeśli spojrzysz na przeglądarkę, zauważysz, że Vite już zaktualizował stronę za pomocą magii Tailwind.

Linki bezwładnościowe

Teraz, gdy mamy działającą stronę główną, która może wyświetlać wszystkie artykuły w bazie danych, musimy utworzyć inną trasę do wyświetlania poszczególnych artykułów. Stwórzmy nową trasę i ustawmy adres URL na symbol wieloznaczny „id”:

“trasy/ web.php ”

 <?php use AppModelsArticle; use IlluminateSupportFacadesRoute; use InertiaInertia; Route::get('/', function () { return Inertia::render('Index', [ 'articles' => Article::latest()->get() ]); })->name('home'); Route::get('/posts/{article:id}', function (Article $article) { return Inertia::render('Show', [ 'article' => $article ]); })->name('article.show');

Zaimportowaliśmy model „Article” i dodaliśmy nową trasę, aby zwrócić komponent Show.vue Inertia. Wykorzystaliśmy również powiązanie modelu trasy Laravela, które pozwala Laravelowi automatycznie pobrać artykuł, do którego się odwołujemy.

Teraz potrzebujemy tylko sposobu, aby odwiedzić tę trasę, klikając link na stronie głównej bez konieczności przeładowywania całej strony. Jest to możliwe dzięki magicznemu narzędziu Inertii <Link> . We wstępie wspomnieliśmy, że Inertia używa <Link> jako opakowania dla standardowego tagu zakotwiczenia <a> i że to opakowanie ma na celu zapewnienie jak najbardziej płynnych wizyt na stronie. W Inertia tag <Link> może zachowywać się jak tag zakotwiczenia, który wykonuje żądania <GET> , ale może też działać jednocześnie jako <button> i <form> . Zobaczmy, jak możemy to zastosować w naszym projekcie.

W naszym Index.vue zaimportujemy <Link> z Inertia i usuniemy tagi kotwicy <a> i zastąpimy je tagami Inertia <Link> . Atrybut href zostanie ustawiony na adres URL trasy, który wcześniej utworzyliśmy do przeglądania artykułu:

 <script setup> import KinstaLayout from "../Layouts/KinstaLayout.vue"; import { Link } from "@inertiajs/inertia-vue3"; defineProps({ articles: Object, }); </script> <template> <KinstaLayout> <section class="space-y-5 border-b-2 pb-10"> <h2 class="text-2xl font-bold pt-10 mx-auto text-center"> Read our latest articles </h2> <article v-for="article in articles" :key="article.id" class="flex justify-center items-center shadow-md bg-white rounded-xl p-4 mx-auto max-w-3xl" > <img src="/images/kinsta-logo.png" class="w-32 h-32 rounded-xl object-cover" alt="" /> <div class="flex flex-col text-left justify-between pl-3 space-y-5" > <h3 class="text-xl font-semibold text-indigo-600 hover:text-indigo-800" > <Link :href="'/posts/' + article.id">{{ article.title }}</Link> </h3> <p> {{ article.excerpt }} </p> <Link :href="'/posts/' + article.id" class="text-indigo-600 hover:text-indigo-800 w-fit self-end font-semibold" >Read more </Link> </div> </article> </section> </KinstaLayout> </template>

Wystylizujmy Show.vue za pomocą Tailwind, aby wyglądał na nieco bardziej wystrojony i gotowy na naszą wizytę. A także musimy dać mu znać, że powinien oczekiwać obiektu „Article” i ustawić go jako rekwizyt:

 <script setup> import KinstaLayout from "../Layouts/KinstaLayout.vue"; defineProps({ article: Object, }); </script> <template> <KinstaLayout> <article class="mx-auto mt-10 flex justify-center max-w-5xl border-b-2"> <img src="/images/kinsta-logo.png" class="w-80 h-80 rounded-xl mx-auto py-5" alt="" /> <div class="text-left flex flex-col pt-5 pb-10 px-10"> <h1 class="text-xl font-semibold mb-10">{{ article.title }}</h1> <p>{{ article.body }}</p> </div> </article> </KinstaLayout> </template>

Teraz, gdy klikniemy w tytuł artykułu lub „Czytaj więcej”, zostaniemy magicznie przeniesieni do Show.vue bez odświeżania strony.

W naszym przypadku używamy <Link> jako tagu zakotwiczenia, który wysyła żądanie GET do trasy i zwraca nowe dane, ale możemy użyć <Link> również do POST , PUT , PATCH i DELETE

„trasy/ web.php ”:

 <Link href="/logout" method="post" as="button" type="button">Logout</Link>

Porady i sztuczki dotyczące inercji Laravel, które powinieneś znać

Mamy teraz działające SPA zbudowane z Laravel, Inertia i Tailwind CSS. Ale bezwładność może pomóc nam osiągnąć znacznie więcej. Nadszedł czas, aby przyswoić sobie kilka technik inercji, które pomogą zarówno programistom, jak i użytkownikom aplikacji.

Generowanie adresów URL

Być może zauważyłeś, że dodaliśmy nazwy do naszych tras Laravel bez ich użycia. Bezwładność pozwala nam używać nazwanych tras w naszych komponentach zamiast ręcznego zapisywania pełnej trasy.

Możemy to osiągnąć instalując pakiet Ziggy w naszym projekcie:

 composer require tightenco/ziggy

Następnie przejdź do „resources/js/app.js” i zaktualizuj go w następujący sposób:

 import "./bootstrap"; import "../css/app.css"; import { createApp, h } from "vue"; import { createInertiaApp } from "@inertiajs/inertia-vue3"; import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"; import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m"; createInertiaApp({ title: (title) => `${title} - ${appName}`, resolve: (name) => resolvePageComponent( `./Pages/${name}.vue`, import.meta.glob("./Pages/**/*.vue") ), setup({ el, app, props, plugin }) { return createApp({ render: () => h(app, props) }) .use(plugin) .use(ZiggyVue, Ziggy) .mount(el); }, });

Przejdź do „/resources/views/ app.blade.php ” i zaktualizuj nagłówek za pomocą dyrektywy @route :

 <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Fetch project name dynamically --> <title inertia>{{ config('app.name', 'Laravel') }}</title> <!-- Scripts --> @routes @vite('resources/js/app.js') @inertiaHead </head> <body class="font-sans antialiased"> @inertia </body> </html>

… i odśwież swoje pakiety NPM, naciskając poniższe dwa polecenia terminala:

 npm install && npm run dev

Ten pakiet pozwala nam używać nazwanych tras w naszych komponentach Inertia, więc przejdźmy do Index.vue i usuń starą ręczną trasę i zastąp ją nazwą trasy, przekazując dane normalnie, tak jakbyśmy byli w naszym kontrolerze.

Wymienimy to:

 <Link :href="'/posts/' + article.id"> {{ article.title }} </Link>

…z tym:

 <Link :href="route('article.show', article.id)"> {{ article.title }} </Link>

Da nam to dokładnie takie samo zachowanie, jakie mieliśmy, ale jest bardziej przyjazne dla programistów i niezwykle pomocne, gdy Twoja trasa wymaga wielu parametrów.

Wskaźniki postępu

To jedna z najfajniejszych cech Inertia.js; Ponieważ SPA zapewnia interaktywną obsługę użytkownika, ciągłe otrzymywanie informacji zwrotnych o tym, czy żądanie jest ładowane, byłoby fantastycznym dodatkiem do aplikacji. Można to osiągnąć za pomocą oddzielnej biblioteki oferowanej przez firmę Inertia.

Biblioteka „@inertiajs/progress” to opakowanie NProgress, które warunkowo pokazuje wskaźniki ładowania zgodnie ze zdarzeniami Inertia. Naprawdę nie musisz wiedzieć, jak to działa za kulisami, więc po prostu zacznijmy działać.

Możemy zainstalować tę bibliotekę za pomocą poniższego polecenia terminala:

 npm install @inertiajs/progress

Po zainstalowaniu musimy zaimportować go do „ resources/js/app.js ”

 import "./bootstrap"; import "../css/app.css"; import { createApp, h } from "vue"; import { createInertiaApp } from "@inertiajs/inertia-vue3"; import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"; import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m"; import { InertiaProgress } from "@inertiajs/progress"; createInertiaApp({ title: (title) => `${title} - ${appName}`, resolve: (name) => resolvePageComponent( `./Pages/${name}.vue`, import.meta.glob("./Pages/**/*.vue") ), setup({ el, app, props, plugin }) { return createApp({ render: () => h(app, props) }) .use(plugin) .use(ZiggyVue, Ziggy) .mount(el); }, }); InertiaProgress.init({ color: "#000000", showSpinner: true });

Spowoduje to wyświetlenie paska ładowania i paska ładowania w kolorze czarnym, ale możemy zmienić kolor wraz z innymi pomocnymi opcjami, które można znaleźć w dokumentacji wskaźnika postępu Inertia.js.

Zarządzanie przewijaniem

W niektórych przypadkach możesz chcieć przejść do nowej strony, zachowując tę ​​​​samą pozycję przewijania. Być może będziesz tego potrzebować, jeśli zezwolisz użytkownikom na dodawanie komentarzy; spowoduje to przesłanie formularza i załadowanie nowego komentarza z bazy danych do twojego komponentu; będziesz chciał, aby tak się stało bez utraty pozycji przewijania przez użytkownika. Inertia załatwia to za nas.

W naszym przypadku zastosujmy to do naszego tagu <Link> w Index.vue . Aby zachować pozycję przewijania podczas przekierowywania na inną stronę za pomocą <Link> , wszystko, co musimy zrobić, to dodać atrybut preserve-scroll do <Link> :

 <Link :href="route('article.show', article.id)" preserve-scroll> {{ article.title }} </Link>

Porady dotyczące SEO

Od narodzin SPA ludzie byli zaniepokojeni optymalizacją wyszukiwarek (SEO). Powszechnie wiadomo, że jeśli zastosujesz podejście SPA, wyszukiwarki będą miały trudności z indeksowaniem Twojej aplikacji internetowej, ponieważ wszystko jest renderowane po stronie klienta, w wyniku czego Twoja witryna nie wyświetla się na górze wyników wyszukiwania; niemniej jednak, dlaczego te popularne platformy, takie jak Facebook i Github, są teraz SPA i nadal dobrze sobie radzą w SEO?

Cóż, to nie jest misja: już niemożliwa. Inertia oferuje kilka rozwiązań, które pomogą Twojemu SPA stać się przyjaznym dla SEO.

Inertia Vue SSR z Laravelem i Vite

Wyszukiwarki zawsze szukają kodu HTML w Twojej witrynie, aby zidentyfikować zawartość; jednak jeśli nie masz HTML w swoich adresach URL, zadanie to staje się trudniejsze. Tworząc SPA, wszystko, co masz na swojej stronie, to JavaScript i JSON. Inertia wprowadziła funkcję Server-Side Rendering (SSR), którą możesz dodać do swojej aplikacji. Dzięki temu aplikacja może wstępnie wyrenderować wstępną wizytę na stronie na serwerze, a następnie wysłać wyrenderowany kod HTML do przeglądarki. Pozwala to użytkownikom zobaczyć Twoje strony i wchodzić z nimi w interakcję, zanim zostaną w pełni załadowane, a także ma inne zalety, takie jak skrócenie czasu potrzebnego wyszukiwarkom na zaindeksowanie Twojej witryny.

Podsumowując, jak to działa, Inertia określi, czy działa na serwerze Node.js, i wyrenderuje nazwy komponentów, właściwości, adresy URL i wersje zasobów do HTML. Zapewni to użytkownikowi i wyszukiwarce praktycznie wszystko, co ma do zaoferowania Twoja strona.

Ponieważ jednak mamy do czynienia z Laravelem, nie ma to większego sensu, ponieważ Laravel jest frameworkiem PHP i nie działa na serwerze Node.js. Dlatego przekażemy żądanie do usługi Node.js, która wyrenderuje stronę i zwróci kod HTML. Dzięki temu nasza aplikacja Laravel Vue będzie domyślnie przyjazna dla SEO.

First, we need to install the Vue.js SSR npm package:

 npm install @vue/server-renderer

Another helpful Inertia “NPM” package provides a simple “HTTP” server. It is strongly recommended that you install it:

 npm install @inertiajs/server

Then, in “resources/js/”, we'll add a new file named ssr.js . This file will be very similar to the app.js file we created when installing Inertia, only it will execute in Node.js rather than the browser:

 import { createSSRApp, h } from "vue"; import { renderToString } from "@vue/server-renderer"; import { createInertiaApp } from "@inertiajs/inertia-vue3"; import createServer from "@inertiajs/server"; import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"; import { ZiggyVue } from "../../vendor/tightenco/ziggy/dist/vue.m"; const appName = "Laravel"; createServer((page) => createInertiaApp({ page, render: renderToString, title: (title) => `${title} - ${appName}`, resolve: (name) => resolvePageComponent( `./Pages/${name}.vue`, import.meta.glob("./Pages/**/*.vue") ), setup({ app, props, plugin }) { return createSSRApp({ render: () => h(app, props) }) .use(plugin) .use(ZiggyVue, { ...page.props.ziggy, location: new URL(page.props.ziggy.location), }); }, }) );

Make sure not to include everything in the ssr.js file since it will not be visible to visitors; this file is only for search engines and browsers to show the data within your page, so include only what is important to your data or only what will make your data available.

“By default, Inertia's SSR server will operate on port 13714. However, you can change this by providing a second argument to the createServer method.” Inertia DOCss.

The Inertia.js DOCs aren't explaining how to integrate Inertia SSR with Vite, but we will go through this now. Head to vite.config.js and paste the below:

 import { defineConfig } from "vite"; import laravel from "laravel-vite-plugin"; import vue from "@vitejs/plugin-vue"; export default defineConfig({ plugins: [ laravel({ input: "resources/js/app.js", ssr: "resources/js/ssr.js", }), vue({ template: { transformAssetUrls: { base: null, includeAbsolute: false, }, }, }), ], });

Next, head to package.json and change the build script:

 "build": "vite build && vite build --ssr"

Now if we run npm run build , Vite will build our SSR bundle for production. For more information about this you may visit Inertia SSR DOCs and Vite SSR DOCs.

Title and Meta

Because JavaScript applications are rendered within the document's <body> , they cannot render markup to the document's <head> because it is outside of their scope. Inertia has a <Head> component that may be used to set the page <title> , <meta> tags, and other <head> components.

To add <head> element to your Page, we must import <head> from Inertia same as we did with <Link> component:

import { Head } from '@inertiajs/inertia-vue3' <Head> <title>Kinsta Blog</title> <meta name="description" content="Kinsta blog for developers"> </Head>

Możemy również dodać globalny tytuł dla wszystkich stron, spowoduje to dodanie nazwy Twojej aplikacji obok tytułu na każdej stronie. Zrobiliśmy to już w pliku app.js :

 createInertiaApp({ title: (title) => `${title} - ${appName}`, // });

Co oznacza, że ​​jeśli dodamy <head title="Homepage"> na stronie głównej naszej aplikacji z tytułem, będzie to renderowane w następujący sposób: <title>Home - My App</title> .

Monitorowanie Twojej aplikacji

Szybkość jest jednym z najważniejszych czynników optymalizacji wydajności SEO w Twojej witrynie. Jeśli korzystasz z WordPress na swojej stronie internetowej, z tego powodu Kinsta APM pomoże Ci w monitorowaniu i uważnym obserwowaniu Twojej aplikacji w akcji. Pomaga zidentyfikować problemy z wydajnością WordPress i jest dostępny bezpłatnie we wszystkich witrynach hostowanych przez Kinsta.

Streszczenie

Inertia.js to jedna z najważniejszych dostępnych technologii; zmieszaj to z Laravelem i masz nowoczesną aplikację Single-Page zbudowaną z PHP i JavaScript. Taylor Otwell, twórca Laravel, jest tak zainteresowany Inertią, że Laravel wypuścił swoje najpopularniejsze zestawy startowe, Laravel Breeze i Jetstream, z obsługą Inertia i SSR.
Zobacz, jak zacząć korzystać z Inertia.js i jak używać go z Laravel, Vue.js i Tailwind CSS, aby stworzyć nowoczesną aplikację internetową dla blogów w tym przewodniku Kliknij, aby tweetować
Jeśli jesteś fanem Laravela lub profesjonalnym programistą, Inertia.js z pewnością przyciągnie Twoją uwagę. W tym samouczku stworzyliśmy bardzo prosty i prosty blog w zaledwie kilka minut. Jest jeszcze wiele do nauczenia się o bezwładności, a to może być dopiero pierwszy z wielu artykułów i samouczków.

Co jeszcze o Laravel chciałbyś, żebyśmy odkryli? Daj nam znać w sekcji komentarzy poniżej.