The demand for more efficient and seamless user experiences has increased as web development evolves. Traditional multi-page applications (MPAs) are slowly being replaced by faster, more dynamic, and responsive single-page applications (SPAs). Popular platforms like Facebook, Twitter, and YouTube have adopted SPAs, which provide users with a smoother and more interactive browsing experience. However, building SPAs with server-side frameworks like Laravel can be difficult, mainly when keeping the code clean and manageable.<\/p>\n\n\n\n
This is where Inertia.js comes in, offering a game-changing solution for Laravel developers. Inertia allows you to create modern, SPA-like experiences without completely changing your existing Laravel application. It acts as a bridge between the backend and frontend, enabling you to use powerful JavaScript frameworks like Vue.js or React while still maintaining server-side logic in Laravel.<\/p>\n\n\n\n
In this article, we’ll explore the benefits of using Inertia with Laravel, explain how it simplifies the development process, and guide you through getting started with Laravel Inertia. By the end, you’ll understand how to use Inertia to build dynamic, modern web applications without the complexity of traditional SPA development.<\/p>\n\n\n\n
Inertia.js provides a powerful solution for combining modern frontend technologies with Laravel. It allows developers to create dynamic, interactive user interfaces using Laravel’s strong backend features. Using Inertia with Laravel, developers can streamline their workflow, combining the best of both worlds in a simple approach that makes development easier and improves the user experience.<\/p>\n\n\n\n
Inertia simplifies web development by letting Laravel manage the server-side logic, while frontend frameworks like Vue.js or React handle the client-side actions. This removes the need for a separate API layer, as Inertia enables smooth backend and frontend communication. As a result, developers can work faster, maintain their code more efficiently, and create a more cohesive application.<\/p>\n\n\n\n
Another significant advantage is the improved developer experience. Inertia lets developers stay in a familiar Laravel environment while enjoying modern frontend features without the hassle of managing separate codebases. The process is much simpler than traditional SPA development, which often involves complex API interactions. Inertia also boosts performance by improving page load times and navigation, reducing the need for full page reloads while supporting Laravel’s server-side rendering capabilities.<\/p>\n\n\n\n
Additionally, Inertia\u2019s smooth integration between the backend and frontend makes it easier to transition from traditional server-rendered applications to dynamic, client-side experiences. Developers no longer need to deal with different frameworks or complicated API structures. With shared code between the backend and frontend, Inertia simplifies the application logic and data flow, making it easier to maintain and scale. This leads to a more efficient development process and a better user experience.<\/p>\n\n\n\n
Laravel Inertia solves key challenges in web development by connecting server-side and client-side development. It makes it easier to create dynamic web applications and eliminates the need for a separate API layer.<\/p>\n\n\n\n
Using Inertia with Laravel provides a simple way to build modern web applications. It combines Laravel\u2019s server-side power with the dynamic, interactive features of frontend frameworks like Vue.js or React. This integration lets developers use Laravel’s strong backend and a more dynamic, SPA-like frontend experience without entirely switching to SPA architecture.<\/p>\n\n\n\n
Inertia also makes it easier to build interactive web applications by allowing developers to create dynamic user interfaces while keeping the backend logic centralized within Laravel. This approach avoids the complexity of traditional multi-page applications or entirely separate SPAs, making it simpler to create responsive and dynamic applications without managing complex frontend-backend separation.<\/p>\n\n\n\n
Moreover, Inertia removes the need to create and maintain separate API endpoints for communication between the frontend and backend. With Inertia, Laravel controllers manage both the backend logic and the data sent to the frontend, making development smoother and the codebase more consistent. This reduces the complexity of managing separate API layers, simplifying the overall architecture and improving maintainability.<\/p>\n\n\n\n
Inertia.js changes the way the frontend and backend interact in web applications. It allows developers to create modern, dynamic user interfaces while maintaining Laravel’s traditional server-driven architecture. As a bridge between the backend and frontend, Inertia makes it easy to connect them without the complexity of building a complete Single-Page Application (SPA).<\/p>\n\n\n\n
Inertia lets Laravel manage the server-side logic while using frontend frameworks like Vue.js or React to render the user interface. This approach allows developers to create SPA-like experiences without needing an entirely separate API layer. Instead of rendering entire pages on the server and sending them to the browser, Inertia only returns the necessary data to update the page. This keeps the architecture simple, efficient, and well-integrated, making it easier to build dynamic applications.<\/p>\n\n\n\n
Instead of traditional full-page reloads, Inertia uses dynamic data transfers between the client and server. When a user clicks a link or submits a form, Inertia sends an AJAX request (using XHR or Fetch API) to the backend. Laravel controllers handle the request and return the required data rather than reloading a whole page. The client-side Inertia JavaScript then updates only the relevant parts of the page, providing a faster and smoother user experience.<\/p>\n\n\n\n
Inertia also handles state and reactivity by letting the frontend framework manage page updates based on the data returned from the backend. The frontend keeps track of the state, and when the data changes, it re-renders only the necessary components. Inertia makes the application behave like a SPA by managing routing on the client side and updating the page dynamically, all while keeping the backend in control of the data and logic. This approach makes it easier to create interactive user interfaces without complex client-side state and routing management.<\/p>\n\n\n\n
In this section\u2019ll walk you through integrating Inertia.js into a Laravel application. By the end, you\u2019ll have a fully functional blog app with Laravel as the backend, Vue.js for the frontend, and Tailwind CSS for styling. Let’s get started!<\/p>\n\n\n\n
Before starting, you should have a basic understanding of:<\/p>\n\n\n\n
First, set up the essential components of your blog application. Either create a new Laravel project or navigate to an existing one.<\/p>\n\n\n\n
Create a Blade component for the homepage of your blog in \/resources\/views\/index.blade.php:<\/p>\n\n\n\n
<!DOCTYPE html>\n\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n\n\u00a0\u00a0<head>\n\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"utf-8\" \/>\n\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n\n\u00a0\u00a0\u00a0\u00a0<title>Devrims Blog<\/title>\n\n\u00a0\u00a0<\/head>\n\n\u00a0\u00a0<body>\n\n\u00a0\u00a0\u00a0\u00a0<header>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h1>Devrims Blog<\/h1>\n\n\u00a0\u00a0\u00a0\u00a0<\/header>\n\n\u00a0\u00a0\u00a0\u00a0<main>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2>Read our latest articles<\/h2>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<section>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<article>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src=\"\/images\/Devrims-logo.png\" alt=\"Article thumbnail\" \/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h3>Title for the blog<\/h3>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p><\/p>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a href=\"#\">Read more<\/a>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/article>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/section>\n\n\u00a0\u00a0\u00a0\u00a0<\/main>\n\n\u00a0\u00a0\u00a0\u00a0<footer>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2>Join our Newsletter<\/h2>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"email\" \/>\n\n\u00a0\u00a0\u00a0\u00a0<\/footer>\n\n\u00a0\u00a0<\/body>\n\n<\/html><\/code><\/pre>\n\n\n\nNext, create another Blade component for a single article view at \/resources\/views\/show.blade.php:<\/p>\n\n\n\n
<!DOCTYPE html>\n\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n\n\u00a0\u00a0<head>\n\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"utf-8\" \/>\n\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n\n\u00a0\u00a0\u00a0\u00a0<title>Devrims Blog<\/title>\n\n\u00a0\u00a0<\/head>\n\n\u00a0\u00a0<body>\n\n\u00a0\u00a0\u00a0\u00a0<main>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<article>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src=\"\/images\/Devrims-logo.png\" alt=\"Article thumbnail\" \/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h1>Title for the blog<\/h1>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>Article content goes here<\/p>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/article>\n\n\u00a0\u00a0\u00a0\u00a0<\/main>\n\n\u00a0\u00a0\u00a0\u00a0<footer>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2>Join our Newsletter<\/h2>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"email\" \/>\n\n\u00a0\u00a0\u00a0\u00a0<\/footer>\n\n\u00a0\u00a0<\/body>\n\n<\/html><\/code><\/pre>\n\n\n\nSet Up Database<\/h3>\n\n\n\n
Create a new MySQL database called Devrims_blog and update the .env file in your Laravel project with the following connection settings:<\/p>\n\n\n\n
DB_CONNECTION=mysql\n\nDB_HOST=127.0.0.1\n\nDB_PORT=3306\n\nDB_DATABASE=Devrims_blog\n\nDB_USERNAME=root\n\nDB_PASSWORD=<\/code><\/pre>\n\n\n\nCreate the Article Model<\/h3>\n\n\n\n
Create a model for the Article entity at app\/Models\/Article.php:<\/p>\n\n\n\n
<?php\n\nnamespace App\\Models;\n\nuse Illuminate\\Database\\Eloquent\\Factories\\HasFactory;\n\nuse Illuminate\\Database\\Eloquent\\Model;\n\nclass Article extends Model\n\n{\n\n\u00a0\u00a0\u00a0\u00a0use HasFactory;\n\n\u00a0\u00a0\u00a0\u00a0protected $fillable = ['title', 'excerpt', 'body'];\n\n}<\/code><\/pre>\n\n\n\nRun Migrations<\/h3>\n\n\n\n
Create a migration file for the articles table:<\/p>\n\n\n\n
<?php\n\nuse Illuminate\\Database\\Migrations\\Migration;\n\nuse Illuminate\\Database\\Schema\\Blueprint;\n\nuse Illuminate\\Support\\Facades\\Schema;\n\nreturn new class extends Migration\n\n{\n\n\u00a0\u00a0\u00a0\u00a0public function up()\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Schema::create('articles', function (Blueprint $table) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->id();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->string('title');\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->text('excerpt');\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->text('body');\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$table->timestamps();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0public function down()\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Schema::dropIfExists('articles');\n\n\u00a0\u00a0\u00a0\u00a0}\n\n};<\/code><\/pre>\n\n\n\nRun the migrations with the following:<\/p>\n\n\n\n
php artisan migrate<\/code><\/pre>\n\n\n\nCreate a Factory for Demo Articles<\/h3>\n\n\n\n
Create a factory to generate demo articles at database\/factories\/ArticleFactory.php:<\/p>\n\n\n\n
<?php\n\nnamespace Database\\Factories;\n\nuse Illuminate\\Database\\Eloquent\\Factories\\Factory;\n\nclass ArticleFactory extends Factory\n\n{\n\n\u00a0\u00a0\u00a0\u00a0public function definition()\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return [\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'title' => $this->faker->sentence(6),\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'excerpt' => $this->faker->paragraph(4),\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'body' => $this->faker->paragraph(15),\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0];\n\n\u00a0\u00a0\u00a0\u00a0}\n\n}<\/code><\/pre>\n\n\n\nNow that your basic blog and articles are stored in the database let\u2019s integrate Inertia.js.<\/p>\n\n\n\n
Step 2: Install Inertia.js<\/h3>\n\n\n\n
Integrating Inertia.js involves the server-side (Laravel) setup and the client-side (Vue.js) setup.<\/p>\n\n\n\n
Server-Side Setup<\/h3>\n\n\n\n\n- Install the Inertia server-side package via Composer:<\/li>\n<\/ol>\n\n\n\n
composer require inertiajs\/inertia-laravel<\/code><\/pre>\n\n\n\n\n- Create a Blade template to load the Inertia app and other assets (CSS and JS). In \/resources\/views\/app.blade.php, add:<\/li>\n<\/ol>\n\n\n\n
<!DOCTYPE html>\n\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n\n\u00a0\u00a0<head>\n\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"utf-8\" \/>\n\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n\n\u00a0\u00a0\u00a0\u00a0<title inertia>{{ config('app.name', 'Laravel') }}<\/title>\n\n\u00a0\u00a0\u00a0\u00a0<!-- Scripts -->\n\n\u00a0\u00a0\u00a0\u00a0@vite('resources\/js\/app.js') @inertiaHead\n\n\u00a0\u00a0<\/head>\n\n\u00a0\u00a0<body class=\"font-sans antialiased\">\n\n\u00a0\u00a0\u00a0\u00a0@inertia\n\n\u00a0\u00a0<\/body>\n\n<\/html><\/code><\/pre>\n\n\n\n\n- Install the Inertia middleware:<\/li>\n<\/ol>\n\n\n\n
php artisan inertia:middleware<\/code><\/pre>\n\n\n\n\n- Add the middleware to the web group in \/app\/Http\/Kernel.php:<\/li>\n<\/ol>\n\n\n\n
'web' => [\n\n\u00a0\u00a0\u00a0\u00a0\/\/ ...\n\n\u00a0\u00a0\u00a0\u00a0App\\Http\\Middleware\\HandleInertiaRequests::class,\n\n],<\/code><\/pre>\n\n\n\nClient-Side Setup<\/h3>\n\n\n\n\n- Install Vue.js and Inertia.js for the frontend using npm:<\/li>\n<\/ol>\n\n\n\n
npm install @inertiajs\/inertia @inertiajs\/inertia-vue3\n\nnpm install vue@next<\/code><\/pre>\n\n\n\n\n- Create the Inertia.js app setup in resources\/js\/app.js:<\/li>\n<\/ol>\n\n\n\n
import \".\/bootstrap\";\n\nimport \"..\/css\/app.css\";\n\nimport { createApp, h } from \"vue\";\n\nimport { createInertiaApp } from \"@inertiajs\/inertia-vue3\";\n\nimport { resolvePageComponent } from \"laravel-vite-plugin\/inertia-helpers\";\n\ncreateInertiaApp({\n\n\u00a0\u00a0title: (title) => `${title} - ${appName}`,\n\n\u00a0\u00a0resolve: (name) =>\n\n\u00a0\u00a0\u00a0\u00a0resolvePageComponent(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0`.\/Pages\/${name}.vue`,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0import.meta.glob(\".\/Pages\/**\/*.vue\")\n\n\u00a0\u00a0\u00a0\u00a0),\n\n\u00a0\u00a0setup({ el, app, props, plugin }) {\n\n\u00a0\u00a0\u00a0\u00a0return createApp({ render: () => h(app, props) })\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.use(plugin)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.mount(el);\n\n\u00a0\u00a0},\n\n});<\/code><\/pre>\n\n\n\n\n- Install the Vite Vue plugin:<\/li>\n<\/ol>\n\n\n\n
npm i @vitejs\/plugin-vue<\/code><\/pre>\n\n\n\n\n- Update the vite.config.js file:<\/li>\n<\/ol>\n\n\n\n
import { defineConfig } from \"vite\";\n\nimport laravel from \"laravel-vite-plugin\";\n\nimport vue from \"@vitejs\/plugin-vue\";\n\nexport default defineConfig({\n\n\u00a0\u00a0plugins: [\n\n\u00a0\u00a0\u00a0\u00a0laravel({\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0input: [\"resources\/css\/app.css\", \"resources\/js\/app.js\"],\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0refresh: true,\n\n\u00a0\u00a0\u00a0\u00a0}),\n\n\u00a0\u00a0\u00a0\u00a0vue({\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0template: {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0transformAssetUrls: {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0base: null,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0includeAbsolute: false,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\n\u00a0\u00a0\u00a0\u00a0}),\n\n\u00a0\u00a0],\n\n});<\/code><\/pre>\n\n\n\n\n- Finally, run the following commands to install dependencies and compile your assets:<\/li>\n<\/ol>\n\n\n\n
npm install\n\nnpm run dev<\/code><\/pre>\n\n\n\nNow, you\u2019ve successfully integrated Laravel with Vue.js and Inertia.js! Your app is ready, and you can continue building your blog application with dynamic pages powered by Inertia.js.<\/p>\n\n\n\n
Creating Inertia Pages<\/h2>\n\n\n\n
In this section, we\u2019ll learn how to create Inertia pages in a Laravel application. The goal is to replace traditional Blade templates with Vue.js components and load them dynamically using Inertia. We will create components for the homepage, the article view, and a layout to organize the content efficiently.<\/p>\n\n\n\n
Step 1: Set Up the Pages Folder<\/h3>\n\n\n\n
To organize your Vue.js components, start by creating a Pages folder inside the resources\/js directory:<\/p>\n\n\n\n
resources\/js\/Pages<\/code><\/pre>\n\n\n\nNext, move the Blade components you created earlier (such as the homepage index.blade.php and article view show.blade.php) into this folder as .vue files.<\/p>\n\n\n\n
For example:<\/p>\n\n\n\n
\n- Rename index.blade.php to Index.vue<\/li>\n\n\n\n
- Rename show.blade.php to Show.vue<\/li>\n<\/ul>\n\n\n\n
Use uppercase letters for the component names to follow Vue.js conventions.<\/p>\n\n\n\n
Step 2: Convert Blade Templates into Vue Components<\/h3>\n\n\n\n
Now, let\u2019s transform the content of these Blade files into standard Vue.js components.<\/p>\n\n\n\n
Creating Index.vue<\/h3>\n\n\n\n
For the homepage (index.blade.php), the new Vue component in resources\/js\/Pages\/Index.vue will look like this:<\/p>\n\n\n\n
<script setup>\n\n\/\/ Add any necessary JavaScript or Vue-specific logic here\n\n<\/script>\n\n<template>\n\n\u00a0\u00a0<header>\n\n\u00a0\u00a0\u00a0\u00a0<h1>Devrims Blog<\/h1>\n\n\u00a0\u00a0<\/header>\n\n\u00a0\u00a0<main>\n\n\u00a0\u00a0\u00a0\u00a0<h2>Read our latest articles<\/h2>\n\n\u00a0\u00a0\u00a0\u00a0<section>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<article>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src=\"\/images\/devrims-logo.png\" alt=\"Article thumbnail\" \/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h3>Title for the blog<\/h3>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>Article content goes here.<\/p>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a href=\"#\">Read more<\/a>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/article>\n\n\u00a0\u00a0\u00a0\u00a0<\/section>\n\n\u00a0\u00a0<\/main>\n\n\u00a0\u00a0<footer>\n\n\u00a0\u00a0\u00a0\u00a0<h2>Join our Newsletter<\/h2>\n\n\u00a0\u00a0\u00a0\u00a0<input type=\"email\" \/>\n\n\u00a0\u00a0<\/footer>\n\n<\/template><\/code><\/pre>\n\n\n\nThis will serve as the homepage for the Devrims Blog. It will display a list of articles and a newsletter sign-up form.<\/p>\n\n\n\n
Creating Show.vue<\/h3>\n\n\n\n
Next, create Show.vue for individual blog posts. In resources\/js\/Pages\/Show.vue, the article content is displayed like this:<\/p>\n\n\n\n
<script setup>\n\n\/\/ Add any necessary script or logic here\n\n<\/script>\n\n<template>\n\n\u00a0\u00a0<header>\n\n\u00a0\u00a0\u00a0\u00a0<h1>Welcome to Devrims Blog<\/h1>\n\n\u00a0\u00a0<\/header>\n\n\u00a0\u00a0<main>\n\n\u00a0\u00a0\u00a0\u00a0<article>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h1>Title for the blog<\/h1>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>Article content goes here.<\/p>\n\n\u00a0\u00a0\u00a0\u00a0<\/article>\n\n\u00a0\u00a0<\/main>\n\n\u00a0\u00a0<footer>\n\n\u00a0\u00a0\u00a0\u00a0<h2>Join our Newsletter<\/h2>\n\n\u00a0\u00a0\u00a0\u00a0<input type=\"email\" \/>\n\n\u00a0\u00a0<\/footer>\n\n<\/template><\/code><\/pre>\n\n\n\nThis page will display a single article, with the content passed dynamically via Inertia.js.<\/p>\n\n\n\n
Step 3: Create a Layout Component<\/h3>\n\n\n\n
To keep things organized, it’s a good idea to create a layout component that wraps our pages, such as the header and footer.<\/p>\n\n\n\n
Creating the Layout Component<\/h3>\n\n\n\n
Create a Layouts folder inside resources\/js:<\/p>\n\n\n\n
resources\/js\/Layouts<\/p>\n\n\n\n
Inside the Layouts folder, create a file called CWLayout.vue:<\/p>\n\n\n\n
<script setup>\n\n\/\/ Add any necessary script or logic here\n\n<\/script>\n\n<template>\n\n\u00a0\u00a0<header>\n\n\u00a0\u00a0\u00a0\u00a0<h1>Devrims Blog<\/h1>\n\n\u00a0\u00a0<\/header>\n\n\u00a0\u00a0<main>\n\n\u00a0\u00a0\u00a0\u00a0<slot \/>\n\n\u00a0\u00a0<\/main>\n\n\u00a0\u00a0<footer>\n\n\u00a0\u00a0\u00a0\u00a0<h2>Join our Newsletter<\/h2>\n\n\u00a0\u00a0\u00a0\u00a0<input type=\"email\" \/>\n\n\u00a0\u00a0<\/footer>\n\n<\/template><\/code><\/pre>\n\n\n\nIn this layout, we define a simple header and footer, and the <slot \/> allows the content of individual pages to be inserted dynamically into the layout.<\/p>\n\n\n\n
Step 4: Use the Layout in Pages<\/h3>\n\n\n\n
Now that we have the layout, we can use it in Index.vue and Show.vue to wrap the page content.<\/p>\n\n\n\n
Wrapping Index.vue with the Layout<\/h3>\n\n\n\n
In resources\/js\/Pages\/Index.vue, import the CWLayout.vue layout and wrap the page content inside the layout:<\/p>\n\n\n\n
<script setup>\n\nimport CWLayout from \"..\/Layouts\/CWLayout.vue\";\n\n<\/script>\n\n<template>\n\n\u00a0\u00a0<CWLayout>\n\n\u00a0\u00a0\u00a0\u00a0<section>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2>Read our latest articles<\/h2>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<article>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src=\"\/images\/devrims-logo.png\" alt=\"Article thumbnail\" \/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h3>Title for the blog<\/h3>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>Article content goes here!<\/p>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a href=\"#\">Read more<\/a>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/article>\n\n\u00a0\u00a0\u00a0\u00a0<\/section>\n\n\u00a0\u00a0<\/CWLayout>\n\n<\/template><\/code><\/pre>\n\n\n\nUsing the CWLayout wrapper, the homepage content will be displayed within the predefined structure of the header, footer, and main content area.<\/p>\n\n\n\n
Wrapping Show.vue with the Layout<\/h3>\n\n\n\n
Similarly, in Show.vue, import, and use the CWLayout.vue layout to wrap the article content:<\/p>\n\n\n\n
<script setup>\n\nimport CWLayout from \"..\/Layouts\/CWLayout.vue\";\n\n<\/script>\n\n<template>\n\n\u00a0\u00a0<CWLayout>\n\n\u00a0\u00a0\u00a0\u00a0<article>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h1>Title for the blog<\/h1>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>Article content goes here.<\/p>\n\n\u00a0\u00a0\u00a0\u00a0<\/article>\n\n\u00a0\u00a0<\/CWLayout>\n\n<\/template><\/code><\/pre>\n\n\n\nThis structure ensures that the article page will have the same header and footer as the homepage, maintaining consistency across the site.<\/p>\n\n\n\n
Laravel Routes and Inertia Render<\/h2>\n\n\n\n
In this section, we’ll set up routes for our Devrims Blog application and learn how to use Inertia.js to pass data from the Laravel backend to the Vue.js frontend.<\/p>\n\n\n\n
Step 1: Seed the Database with Demo Articles<\/h3>\n\n\n\n
Before setting up the routes, let’s seed the database with demo articles, which will be displayed on the blog’s homepage.<\/p>\n\n\n\n
First, create a seeder for the Article model. In the database\/seeders\/DatabaseSeeder.php file, add the following code:<\/p>\n\n\n\n
namespace Database\\Seeders;\n\nuse App\\Models\\Article;\n\nuse Illuminate\\Database\\Seeder;\n\nclass DatabaseSeeder extends Seeder\n\n{\n\n\u00a0\u00a0\u00a0\u00a0public function run()\n\n\u00a0\u00a0\u00a0\u00a0{\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Article::factory(10)->create();\u00a0 \/\/ Create 10 demo articles\n\n\u00a0\u00a0\u00a0\u00a0}\n\n}<\/code><\/pre>\n\n\n\nNow, run the following command to migrate the tables and seed the fake data into the database:<\/p>\n\n\n\n
php artisan migrate:fresh --seed<\/code><\/pre>\n\n\n\nThis will create 10 demo articles in the articles table, which we will use on the homepage.<\/p>\n\n\n\n
Step 2: Defining Routes in web.php<\/h3>\n\n\n\n
Since we\u2019re using Inertia.js to render views, we\u2019ll set up the routes in the routes\/web.php file. Instead of returning Blade views, we will use Inertia\u2019s render method to load Vue.js components.<\/p>\n\n\n\n
Add the following route in routes\/web.php to handle the homepage:<\/p>\n\n\n\n
use App\\Models\\Article;\n\nuse Illuminate\\Support\\Facades\\Route;\n\nuse Inertia\\Inertia;\n\nRoute::get('\/', function () {\n\n\u00a0\u00a0\u00a0\u00a0return Inertia::render('Index', [\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'articles' => Article::latest()->get()\u00a0 \/\/ Pass articles to the view\n\n\u00a0\u00a0\u00a0\u00a0]);\n\n})->name('home');<\/code><\/pre>\n\n\n\nHere, we fetch the latest articles from the database and pass them as a prop to the Index component. The Inertia::render() method loads the Index.vue page and passes the article’s data to it.<\/p>\n\n\n\n
Step 3: Accessing the Data in Vue.js (Inertia Page)<\/h3>\n\n\n\n
Next, let’s modify the Index.vue page to receive the articles as a prop and display them dynamically. In the resources\/js\/Pages\/Index.vue file, we define the article’s prop and loop through it to display the articles.<\/p>\n\n\n\n
Here\u2019s how you can set up the Index.vue file:<\/p>\n\n\n\n
<script setup>\n\nimport CWLayout from \"..\/Layouts\/CWLayout.vue\";\n\ndefineProps({\n\n\u00a0\u00a0articles: Array,\u00a0 \/\/ Define the articles prop as an array\n\n});\n\n<\/script>\n\n<template>\n\n\u00a0\u00a0<CWLayout>\n\n\u00a0\u00a0\u00a0\u00a0<h2>Read our latest articles<\/h2>\n\n\u00a0\u00a0\u00a0\u00a0<section>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<!-- Looping over articles -->\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<article v-for=\"article in articles\" :key=\"article.id\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src=\"\/images\/devrims-logo.png\" alt=\"Article thumbnail\" \/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h3>{{ article.title }}<\/h3>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>{{ article.excerpt }}<\/p>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a href=\"#\">Read more<\/a>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/article>\n\n\u00a0\u00a0\u00a0\u00a0<\/section>\n\n\u00a0\u00a0<\/CWLayout>\n\n<\/template><\/code><\/pre>\n\n\n\nIn this template, we loop over the article’s prop using v-for to display each article’s title, excerpt, and a placeholder “Read more” link. The article’s prop is passed from the Laravel backend via the route.<\/p>\n\n\n\n
Step 4: Handling Data in the Show Page<\/h3>\n\n\n\n
If you want to display individual articles on a separate page, you can define a route for the show page and pass the article data to it.<\/p>\n\n\n\n
In routes\/web.php, add a route to display an individual article:<\/p>\n\n\n\n
Route::get('\/articles\/{article}', function (Article $article) {\n\n\u00a0\u00a0\u00a0\u00a0return Inertia::render('Show', [\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'article' => $article\u00a0 \/\/ Pass the article data to the show page\n\n\u00a0\u00a0\u00a0\u00a0]);\n\n})->name('article.show');\n\nNext, create the Show.vue component to render the article details. In resources\/js\/Pages\/Show.vue, we access the article data and display it like this:\n\n<script setup>\n\nimport CWLayout from \"..\/Layouts\/CWLayout.vue\";\n\ndefineProps({\n\n\u00a0\u00a0article: Object,\u00a0 \/\/ Define the article prop as an object\n\n});\n\n<\/script>\n\n<template>\n\n\u00a0\u00a0<CWLayout>\n\n\u00a0\u00a0\u00a0\u00a0<article>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h1>{{ article.title }}<\/h1>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>{{ article.body }}<\/p>\n\n\u00a0\u00a0\u00a0\u00a0<\/article>\n\n\u00a0\u00a0<\/CWLayout>\n\n<\/template><\/code><\/pre>\n\n\n\nIn this component, we display the full content of the article, including its title and body. The article prop is passed from the route and contains the data of the selected article.<\/p>\n\n\n\n
Using Tailwind CSS with Inertia.js<\/h2>\n\n\n\n
One of the best features of Inertia.js is how easily it integrates with frontend tools like Tailwind CSS. Since Tailwind is already installed in your project when setting up Laravel Inertia, all that’s left is to ensure your Inertia components are appropriately styled. Let\u2019s walk through the steps to achieve this.<\/p>\n\n\n\n
Step 1: Configure Tailwind to Work with Inertia Components<\/h3>\n\n\n\n
To ensure Tailwind CSS can style the components in your Inertia-based app, you need to update the tailwind.config.js file. This tells Tailwind where to look for HTML and Vue.js files in the project.<\/p>\n\n\n\n
Here\u2019s how you can update the tailwind.config.js:<\/p>\n\n\n\n
\/** @type {import('tailwindcss').Config} *\/\n\nmodule.exports = {\n\n\u00a0\u00a0content: [\n\n\u00a0\u00a0\u00a0\u00a0\".\/storage\/framework\/views\/*.php\",\n\n\u00a0\u00a0\u00a0\u00a0\".\/resources\/views\/**\/*.blade.php\",\n\n\u00a0\u00a0\u00a0\u00a0\".\/resources\/js\/**\/*.vue\", \/\/ Make sure Inertia components are included here\n\n\u00a0\u00a0],\n\n\u00a0\u00a0theme: {\n\n\u00a0\u00a0\u00a0\u00a0extend: {},\n\n\u00a0\u00a0},\n\n\u00a0\u00a0plugins: [],\n\n};<\/code><\/pre>\n\n\n\nThis ensures that Tailwind scans all .vue files within resources\/js and applies its styles accordingly.<\/p>\n\n\n\n
Step 2: Import the Tailwind CSS File<\/h3>\n\n\n\n
Next, ensure the Tailwind CSS file is included in your app.js file. This allows Tailwind\u2019s styles to be applied globally across your Vue.js components.<\/p>\n\n\n\n
In resources\/js\/app.js, import the CSS file like this:<\/p>\n\n\n\n
import \"..\/css\/app.css\";<\/code><\/pre>\n\n\n\nNow, Tailwind CSS is ready to be used in your Inertia.js components.<\/p>\n\n\n\n
Step 3: Styling the Index.vue Component<\/h3>\n\n\n\n
Let\u2019s take the Index.vue component, where we display the articles and apply some Tailwind styles to make them look more appealing.<\/p>\n\n\n\n
Here\u2019s an example of how you might structure and style the Index.vue component:<\/p>\n\n\n\n
<script setup>\n\nimport CWLayout from \"..\/Layouts\/CWLayout.vue\";\n\ndefineProps({\n\n\u00a0\u00a0articles: Array, \/\/ Expecting an array of articles\n\n});\n\n<\/script>\n\n<template>\n\n\u00a0\u00a0<CWLayout>\n\n\u00a0\u00a0\u00a0\u00a0<h2 class=\"text-2xl font-bold py-10\">Read our latest articles<\/h2>\n\n\u00a0\u00a0\u00a0\u00a0<section class=\"space-y-5 border-b-2 pb-10\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<!-- Looping through articles -->\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<article\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0v-for=\"article in articles\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0:key=\"article.id\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=\"flex justify-center items-center shadow-md bg-white rounded-xl p-4 mx-auto max-w-3xl\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0src=\"\/images\/CW-logo.png\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=\"w-32 h-32 rounded-xl object-cover\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alt=\"Article thumbnail\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"flex flex-col text-left justify-between pl-3 space-y-5\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h3\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=\"text-xl font-semibold text-indigo-600 hover:text-indigo-800\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a href=\"#\">{{ article.title }}<\/a>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/h3>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>{{ article.excerpt }}<\/p>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0href=\"#\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=\"text-indigo-600 hover:text-indigo-800 w-fit self-end font-semibold\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0>Read more<\/a\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/article>\n\n\u00a0\u00a0\u00a0\u00a0<\/section>\n\n\u00a0\u00a0<\/CWLayout>\n\n<\/template><\/code><\/pre>\n\n\n\nIn this component:<\/p>\n\n\n\n
\n- The h2 header is styled to be bold and has padding applied.<\/li>\n\n\n\n
- Each article is styled using a flexbox layout to center the content and apply padding, shadow, and rounded corners.<\/li>\n\n\n\n
- The article\u2019s image is styled with Tailwind classes for size, rounded corners, and an object-fit property for better image scaling.<\/li>\n\n\n\n
- The article title and “Read more” links are styled with color classes, hover effects, and font settings.<\/li>\n<\/ul>\n\n\n\n
Step 4: Styling the Layout Component<\/h3>\n\n\n\n
Now, let\u2019s move on to the layout component, CWLayout.vue, where we can define styles for the header, footer, and main container. This layout component will be used across multiple pages to give the app a consistent look and feel.<\/p>\n\n\n\n
Here’s an example of how to style the layout with Tailwind CSS:<\/p>\n\n\n\n
<script setup><\/script>\n\n<template>\n\n\u00a0\u00a0<header class=\"bg-gradient-to-r from-blue-700 via-indigo-700 to-blue-700 w-full text-center py-4\">\n\n\u00a0\u00a0\u00a0\u00a0<h1 class=\"text-white font-bold text-4xl\">Devrims Blog<\/h1>\n\n\u00a0\u00a0<\/header>\n\n\u00a0\u00a0<main class=\"container mx-auto text-center\">\n\n\u00a0\u00a0\u00a0\u00a0<slot \/> <!-- This will be replaced by the content of the page -->\n\n\u00a0\u00a0<\/main>\n\n\u00a0\u00a0<footer class=\"bg-gradient-to-b from-transparent to-gray-300 w-full text-center mt-5 py-10 mx-auto\">\n\n\u00a0\u00a0\u00a0\u00a0<h2 class=\"font-bold text-xl pb-5\">Join our Newsletter<\/h2>\n\n\u00a0\u00a0\u00a0\u00a0<input\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=\"rounded-xl w-80 h-12 px-3 py-2 shadow-md\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type=\"email\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0placeholder=\"Write your email..\"\n\n\u00a0\u00a0\u00a0\u00a0\/>\n\n\u00a0\u00a0<\/footer>\n\n<\/template><\/code><\/pre>\n\n\n\nIn this layout:<\/p>\n\n\n\n
\n- The header uses a gradient background with large, bold, white text.<\/li>\n\n\n\n
- The main section has a container class for proper alignment and spacing.<\/li>\n\n\n\n
- The footer also uses a gradient, and the newsletter input field is styled with Tailwind classes for rounded corners and shadows.<\/li>\n<\/ul>\n\n\n\n
Step 5: Final Touches<\/h3>\n\n\n\n
With Tailwind CSS integrated into your Inertia.js app, you can create a stylish and responsive blog layout. You can also continue customizing and extending the Tailwind utility classes to match your design preferences.<\/p>\n\n\n\n
Inertia Links<\/h2>\n\n\n\n
Inertia\u2019s primary goal is to provide the experience of a single-page application (SPA) while using Laravel\u2019s powerful backend. One of the key features that helps achieve this is the <Link> component. It works like a regular anchor tag (<a>) but with extra functionality that avoids full page reloads.<\/p>\n\n\n\n
Now that our homepage displays articles let’s add functionality to allow you to view individual articles. We\u2019ll create a route to view a specific article and set up links to navigate it without refreshing the page.<\/p>\n\n\n\n
Step 1: Define Routes for Viewing Articles<\/h3>\n\n\n\n
First, we must define a route in routes\/web.php to display an individual article. We\u2019ll use Laravel\u2019s route model binding to fetch the article automatically based on its ID.<\/p>\n\n\n\n
Here\u2019s how you can add the new route:<\/p>\n\n\n\n
<?php\n\nuse App\\Models\\Article;\n\nuse Illuminate\\Support\\Facades\\Route;\n\nuse Inertia\\Inertia;\n\nRoute::get('\/', function () {\n\n\u00a0\u00a0\u00a0\u00a0return Inertia::render('Index', [\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'articles' => Article::latest()->get(),\n\n\u00a0\u00a0\u00a0\u00a0]);\n\n})->name('home');\n\nRoute::get('\/posts\/{article:id}', function (Article $article) {\n\n\u00a0\u00a0\u00a0\u00a0return Inertia::render('Show', [\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'article' => $article,\n\n\u00a0\u00a0\u00a0\u00a0]);\n\n})->name('article.show');<\/code><\/pre>\n\n\n\nIn this code:<\/p>\n\n\n\n
\n- The Route::get(‘\/posts\/{article:id}’, …) route accepts an id parameter and uses Laravel\u2019s route model binding to fetch the article directly from the database.<\/li>\n\n\n\n
- The Inertia::render(‘Show’, [‘article’ => $article]) method renders the Show.vue component and passes the article data to it.<\/li>\n<\/ul>\n\n\n\n
Step 2: Using Inertia\u2019s <Link> Component<\/h3>\n\n\n\n
Now that we have the route in place, we need a way to navigate to individual articles from the homepage. This is where Inertia\u2019s <Link> component comes in. The <Link> component allows us to navigate to different pages without refreshing the entire page, ensuring a smooth and fast user experience.<\/p>\n\n\n\n
In our Index.vue component, we\u2019ll import the Link component from Inertia and replace the regular <a> tags with <Link> components. This ensures seamless navigation.<\/p>\n\n\n\n
Here\u2019s how to do that:<\/p>\n\n\n\n
<script setup>\n\nimport DevrimsLayout from \"..\/Layouts\/DevrimsLayout.vue\";\n\nimport { Link } from \"@inertiajs\/inertia-vue3\";\n\ndefineProps({\n\n\u00a0\u00a0\u00a0\u00a0articles: Array,\n\n});\n\n<\/script>\n\n<template>\n\n\u00a0\u00a0<DevrimsLayout>\n\n\u00a0\u00a0\u00a0\u00a0<section class=\"space-y-5 border-b-2 pb-10\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h2 class=\"text-2xl font-bold pt-10 mx-auto text-center\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Read our latest articles\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/h2>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<article\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0v-for=\"article in articles\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0:key=\"article.id\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=\"flex justify-center items-center shadow-md bg-white rounded-xl p-4 mx-auto max-w-3xl\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0src=\"\/images\/Devrims-logo.png\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=\"w-32 h-32 rounded-xl object-cover\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alt=\"Article thumbnail\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"flex flex-col text-left justify-between pl-3 space-y-5\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h3\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=\"text-xl font-semibold text-indigo-600 hover:text-indigo-800\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<Link :href=\"'\/posts\/' + article.id\">{{ article.title }}<\/Link>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/h3>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>{{ article.excerpt }}<\/p>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<Link\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0:href=\"'\/posts\/' + article.id\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=\"text-indigo-600 hover:text-indigo-800 w-fit self-end font-semibold\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0>Read more<\/Link\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/article>\n\n\u00a0\u00a0\u00a0\u00a0<\/section>\n\n\u00a0\u00a0<\/DevrimsLayout>\n\n<\/template><\/code><\/pre>\n\n\n\nIn this code:<\/p>\n\n\n\n
\n- We imported the Link component from Inertia to replace the <a> tag.<\/li>\n\n\n\n
- The href attribute is dynamically set to the URL of the individual article, using the article.id as part of the path (i.e., \/posts\/{article.id}).<\/li>\n\n\n\n
- The Link component works like a regular anchor tag but without causing a page to reload.<\/li>\n<\/ul>\n\n\n\n
Step 3: Displaying the Article in Show.vue<\/h3>\n\n\n\n
Next, we need to create the Show.vue component to display each article. This component will receive the article data as a prop and render it accordingly.<\/p>\n\n\n\n
Here\u2019s an example of how you can set up Show.vue:<\/p>\n\n\n\n
<script setup>\n\nimport DevrimsLayout from \"..\/Layouts\/DevrimsLayout.vue\";\n\ndefineProps({\n\n\u00a0\u00a0\u00a0\u00a0article: Object,\n\n});\n\n<\/script>\n\n<template>\n\n\u00a0\u00a0<DevrimsLayout>\n\n\u00a0\u00a0\u00a0\u00a0<article class=\"mx-auto mt-10 flex justify-center max-w-5xl border-b-2\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0src=\"\/images\/Devrims-logo.png\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0class=\"w-80 h-80 rounded-xl mx-auto py-5\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alt=\"Article Image\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"text-left flex flex-col pt-5 pb-10 px-10\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h1 class=\"text-xl font-semibold mb-10\">{{ article.title }}<\/h1>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>{{ article.body }}<\/p>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\n\u00a0\u00a0\u00a0\u00a0<\/article>\n\n\u00a0\u00a0<\/DevrimsLayout>\n\n<\/template><\/code><\/pre>\n\n\n\nIn this component:<\/p>\n\n\n\n
\n- We use defineProps to expect an article object passed from the route in Index.vue.<\/li>\n\n\n\n
- The article title and body are displayed with some Tailwind CSS styling.<\/li>\n<\/ul>\n\n\n\n
Step 4: Testing the Links<\/h3>\n\n\n\n
When you visit the homepage and click on the article title or the “Read more” link, Inertia will seamlessly load the Show.vue component for the individual article without refreshing the page. You will see the article’s details displayed in a styled layout.<\/p>\n\n\n\n
Step 5: Advanced Use of <Link><\/h3>\n\n\n\n
While in the example above, we used <Link> to perform a simple GET request, Inertia\u2019s <Link> component is quite versatile. It can also trigger other HTTP methods like POST, PUT, PATCH, or DELETE, turning it into a button or a form.<\/p>\n\n\n\n
For example, if you want to log the user out without refreshing the page, you can do so with:<\/p>\n\n\n\n
<Link href=\"\/logout\" method=\"post\" as=\"button\" type=\"button\">Logout<\/Link><\/code><\/pre>\n\n\n\nThis example uses the method=”post” attribute to send a POST request when the link is clicked, and the as=”button” attribute turns the link into a button element.<\/p>\n\n\n\n
Laravel Inertia Tips and Tricks You Should Know<\/h2>\n\n\n\n
Now that you have a working SPA using Laravel, Inertia, and Tailwind CSS, it’s time to explore some advanced Inertia techniques that will make your development process smoother and enhance your application’s performance and usability. Here are some helpful tips and tricks for working with Inertia:<\/p>\n\n\n\n
1. Generating URLs with Named Routes<\/h3>\n\n\n\n
Inertia makes it easy to work with dynamic URLs without manually writing out complete URLs. If you’re using named routes in Laravel, you can use the route() helper function to generate URLs dynamically. This is especially useful when your routes have multiple parameters.<\/p>\n\n\n\n
To integrate this into your Inertia app, use the Ziggy package. This package allows you to generate named routes within your Inertia components.<\/p>\n\n\n\n
Install Ziggy:<\/strong><\/p>\n\n\n\ncomposer require tightenco\/ziggy<\/code><\/pre>\n\n\n\nThen, in your resources\/js\/app.js file, import and configure Ziggy:<\/p>\n\n\n\n
import { createApp, h } from \"vue\";\n\nimport { createInertiaApp } from \"@inertiajs\/inertia-vue3\";\n\nimport { resolvePageComponent } from \"laravel-vite-plugin\/inertia-helpers\";\n\nimport { ZiggyVue } from \"..\/..\/vendor\/tightenco\/ziggy\/dist\/vue.m\";\n\ncreateInertiaApp({\n\n\u00a0\u00a0\u00a0\u00a0title: (title) => `${title} - ${appName}`,\n\n\u00a0\u00a0\u00a0\u00a0resolve: (name) => resolvePageComponent(`.\/Pages\/${name}.vue`, import.meta.glob(\".\/Pages\/**\/*.vue\")),\n\n\u00a0\u00a0\u00a0\u00a0setup({ el, app, props, plugin }) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return createApp({ render: () => h(app, props) })\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.use(plugin)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.use(ZiggyVue, Ziggy)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.mount(el);\n\n\u00a0\u00a0\u00a0\u00a0},\n\n});<\/code><\/pre>\n\n\n\nNext, include the @routes directive in your resources\/views\/app.blade.php file to make sure Ziggy is available in your JavaScript:<\/p>\n\n\n\n
<head>\n\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"utf-8\">\n\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n\u00a0\u00a0\u00a0\u00a0<title inertia>{{ config('app.name', 'Laravel') }}<\/title>\n\n\u00a0\u00a0\u00a0\u00a0@routes\n\n\u00a0\u00a0\u00a0\u00a0@vite('resources\/js\/app.js')\n\n\u00a0\u00a0\u00a0\u00a0@inertiaHead\n\n<\/head><\/code><\/pre>\n\n\n\nAfter setting this up, you can replace manually typed URLs with your components’ route() helper. For example, change:<\/p>\n\n\n\n
<Link :href=\"'\/posts\/' + article.id\">{{ article.title }}<\/Link><\/code><\/pre>\n\n\n\nTo:<\/p>\n\n\n\n
<Link :href=\"route('article.show', article.id)\">{{ article.title }}<\/Link><\/code><\/pre>\n\n\n\nThis approach makes your code cleaner, less error-prone, and more flexible if route definitions change in the future.<\/p>\n\n\n\n
2. Progress Indicators<\/h3>\n\n\n\n
SPAS needs to provide feedback to users during navigation. Inertia includes a built-in progress indicator using the @inertiajs\/progress library. When data is being loaded, a loading bar and spinner appear.<\/p>\n\n\n\n
To set it up, first install the package:<\/p>\n\n\n\n
npm install @inertiajs\/progress<\/code><\/pre>\n\n\n\nThen, import and configure it in your resources\/js\/app.js file:<\/p>\n\n\n\n
import { InertiaProgress } from \"@inertiajs\/progress\";\n\nInertiaProgress.init({\n\n\u00a0\u00a0\u00a0\u00a0color: \"#000000\", \/\/ Customize the color of the loading bar\n\n\u00a0\u00a0\u00a0\u00a0showSpinner: true, \/\/ Show the loading spinner\n\n});<\/code><\/pre>\n\n\n\nThis adds a smooth loading bar at the top of the screen when navigating between pages. The Inertia.js documentation provides customization options for the progress indicator’s appearance and behavior.<\/p>\n\n\n\n
3. Scroll Management<\/h3>\n\n\n\n
Sometimes, users want to keep their scroll position when navigating between pages. For example, after submitting a comment, you may want to reload the page to show the new comment but retain the user\u2019s scroll position.<\/p>\n\n\n\n
Inertia offers a preserve-scroll attribute for its <Link> component to achieve this. It ensures that the scroll position is preserved when navigating to a new page.<\/p>\n\n\n\n
Here\u2019s how to use it:<\/p>\n\n\n\n
<Link :href=\"route('article.show', article.id)\" preserve-scroll>\n\n\u00a0\u00a0\u00a0\u00a0{{ article.title }}\n\n<\/Link><\/code><\/pre>\n\n\n\nThis keeps the user\u2019s scroll position intact when they click on a link and navigate to another page, which is excellent for a smooth user experience in SPAs.<\/p>\n\n\n\n
4. Handling Form Submissions<\/h3>\n\n\n\n
Inertia also allows you to handle form submissions seamlessly without reloading the page. You can use the <Link> component to send POST, PUT, PATCH, or DELETE requests as if they were buttons or forms. This is useful for logging out, submitting a form, or deleting a resource.<\/p>\n\n\n\n
For example, to trigger a logout via a button without refreshing the page:<\/p>\n\n\n\n
<Link href=\"\/logout\" method=\"post\" as=\"button\" type=\"button\">Logout<\/Link><\/code><\/pre>\n\n\n\nThis sends a POST request to the \/logout route when the button clicks, just like a traditional form submission, but without causing a page to reload.<\/p>\n\n\n\n
5. Nested Layouts<\/h3>\n\n\n\n
Inertia supports nested layouts, allowing you to create reusable layout components that can be extended throughout your application. This helps keep your code DRY (Don\u2019t Repeat Yourself).<\/p>\n\n\n\n
For example, you can have a global layout with a header, sidebar, and footer and then inject specific page content into the main content area.<\/p>\n\n\n\n
Here\u2019s how to use nested layouts:<\/p>\n\n\n\n
In resources\/js\/Layouts\/DefaultLayout.vue:<\/strong><\/p>\n\n\n\n<template>\n\n\u00a0\u00a0<header>\n\n\u00a0\u00a0\u00a0\u00a0<!-- Header content -->\n\n\u00a0\u00a0<\/header>\n\n\u00a0\u00a0<main>\n\n\u00a0\u00a0\u00a0\u00a0<slot><\/slot>\n\n\u00a0\u00a0<\/main>\n\n\u00a0\u00a0<footer>\n\n\u00a0\u00a0\u00a0\u00a0<!-- Footer content -->\n\n\u00a0\u00a0<\/footer>\n\n<\/template><\/code><\/pre>\n\n\n\nIn resources\/js\/Pages\/Article\/Show.vue:<\/strong><\/p>\n\n\n\n<template>\n\n\u00a0\u00a0<DefaultLayout>\n\n\u00a0\u00a0\u00a0\u00a0<h1>{{ article.title }}<\/h1>\n\n\u00a0\u00a0\u00a0\u00a0<p>{{ article.body }}<\/p>\n\n\u00a0\u00a0<\/DefaultLayout>\n\n<\/template><\/code><\/pre>\n\n\n\nThis method allows you to reuse common layout structures while keeping flexibility for specific page content.<\/p>\n\n\n\n
6. Handling Flash Messages<\/h3>\n\n\n\n
Inertia makes passing and displaying flash messages, such as success or error notifications, easy. You can pass messages from the controller to the Inertia response and display them in your components.<\/p>\n\n\n\n
For example, in your Laravel controller:<\/p>\n\n\n\n
return Inertia::render('Dashboard', [\n\n\u00a0\u00a0\u00a0\u00a0'message' => session('message')\n\n]);\n\nThen, in your Vue component:\n\n<template>\n\n\u00a0\u00a0<div v-if=\"message\" class=\"alert alert-success\">\n\n\u00a0\u00a0\u00a0\u00a0{{ message }}\n\n\u00a0\u00a0<\/div>\n\n<\/template>\n\n<script setup>\n\ndefineProps({\n\n\u00a0\u00a0message: String,\n\n});\n\n<\/script><\/code><\/pre>\n\n\n\nThis allows you to display messages on the frontend without reloading the page, maintaining the smooth experience that Inertia provides.<\/p>\n\n\n\n
SEO Tips for Laravel Inertia<\/h2>\n\n\n\n
Since the rise of single-page applications (SPAs), search engine optimization (SEO) has become more challenging. Traditional SPAs render content on the client side using JavaScript, which search engines often struggle to crawl. This can hurt your website’s visibility in search results. However, platforms like Facebook and GitHub successfully use SPAs and maintain strong SEO, proving that achieving good SEO performance with a SPA is possible.<\/p>\n\n\n\n
Inertia.js offers several solutions to help make your SPA more SEO-friendly and ensure search engines easily index your Laravel-based Inertia app.<\/p>\n\n\n\n
1. Server-Side Rendering (SSR) with Vue and Laravel<\/h3>\n\n\n\n
One of the best ways to improve SEO for your Laravel Inertia SPA is by enabling Server-Side Rendering (SSR). SSR allows the server to render the initial page request and send fully-rendered HTML to the browser, which makes it easier for search engines to crawl your site. It also provides a faster, more interactive experience for users.<\/p>\n\n\n\n
Here\u2019s how SSR works with Inertia.js and Vue:<\/p>\n\n\n\n
\n- Initial Page Rendering<\/strong>: When a user or search engine bot requests a page, the server renders it and sends the HTML back instead of relying on JavaScript to render the page in the browser.<\/li>\n\n\n\n
- Search Engine Friendly<\/strong>: This pre-rendering allows search engines to quickly parse the page content without executing JavaScript.<\/li>\n<\/ul>\n\n\n\n
To implement SSR in your Laravel Inertia app, you must set up a Node.js service to render Vue components. Laravel is a PHP framework that does not run on a Node.js server. The server will render the components and return the HTML to the client.<\/p>\n\n\n\n
Steps to Set Up SSR:<\/strong><\/p>\n\n\n\n\n- Install the required packages:<\/strong><\/li>\n<\/ol>\n\n\n\n
npm install @vue\/server-renderer @inertiajs\/server<\/code><\/pre>\n\n\n\n\n- Create an SSR entry file in resources\/js\/ssr.js:<\/strong> This file is similar to your regular app.js but designed to run on a Node.js server:<\/li>\n<\/ol>\n\n\n\n
import { createSSRApp, h } from \"vue\";\n\nimport { renderToString } from \"@vue\/server-renderer\";\n\nimport { createInertiaApp } from \"@inertiajs\/inertia-vue3\";\n\nimport createServer from \"@inertiajs\/server\";\n\nimport { resolvePageComponent } from \"laravel-vite-plugin\/inertia-helpers\";\n\nimport { ZiggyVue } from \"..\/..\/vendor\/tightenco\/ziggy\/dist\/vue.m\";\n\nconst appName = \"Laravel\";\n\ncreateServer((page) =>\n\n\u00a0\u00a0\u00a0\u00a0createInertiaApp({\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0page,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0render: renderToString,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: (title) => `${title} - ${appName}`,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0resolve: (name) =>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0resolvePageComponent(\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0`.\/Pages\/${name}.vue`,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0import.meta.glob(\".\/Pages\/**\/*.vue\")\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0),\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setup({ app, props, plugin }) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return createSSRApp({ render: () => h(app, props) })\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.use(plugin)\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.use(ZiggyVue, {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0...page.props.ziggy,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0location: new URL(page.props.ziggy.location),\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\n\u00a0\u00a0\u00a0\u00a0})\n\n);<\/code><\/pre>\n\n\n\n\n- Configure Vite for SSR:<\/strong> In vite.config.js, specify the SSR entry file:<\/li>\n<\/ol>\n\n\n\n
import { defineConfig } from \"vite\";\n\nimport laravel from \"laravel-vite-plugin\";\n\nimport vue from \"@vitejs\/plugin-vue\";\n\nexport default defineConfig({\n\n\u00a0\u00a0\u00a0\u00a0plugins: [\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0laravel({\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0input: \"resources\/js\/app.js\",\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ssr: \"resources\/js\/ssr.js\",\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}),\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0vue({\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0template: {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0transformAssetUrls: {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0base: null,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0includeAbsolute: false,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}),\n\n\u00a0\u00a0\u00a0\u00a0],\n\n});<\/code><\/pre>\n\n\n\n\n- Update your build script in package.json:<\/strong><\/li>\n<\/ol>\n\n\n\n
\"build\": \"vite build && vite build --ssr\"<\/code><\/pre>\n\n\n\nAfter completing this setup, run npm run build to generate your SSR bundle and prepare your app for production.<\/p>\n\n\n\n
2. Title and Meta Tags for SEO<\/h3>\n\n\n\n
SEO depends heavily on proper metadata for each page, including the <title> and <meta> tags. Since JavaScript applications only render content inside the <body>, they don’t naturally modify the <head> section of the document. Fortunately, Inertia provides a <Head> component to set page titles and meta tags dynamically.<\/p>\n\n\n\n
How to Use Inertia\u2019s <Head> Component:<\/strong><\/p>\n\n\n\n\n- Import the <Head> Component<\/strong> from Inertia in your Vue component:<\/li>\n<\/ol>\n\n\n\n
import { Head } from '@inertiajs\/inertia-vue3';<\/code><\/pre>\n\n\n\n\n- Set the <title> and other meta tags<\/strong> in your page component:<\/li>\n<\/ol>\n\n\n\n
<template>\n\n\u00a0\u00a0<Head>\n\n\u00a0\u00a0\u00a0\u00a0<title>My Awesome Blog<\/title>\n\n\u00a0\u00a0\u00a0\u00a0<meta name=\"description\" content=\"A blog about Laravel and Inertia.js.\" \/>\n\n\u00a0\u00a0\u00a0\u00a0<meta name=\"keywords\" content=\"Laravel, Inertia, Vue.js, SEO\" \/>\n\n\u00a0\u00a0<\/Head>\n\n<\/template><\/code><\/pre>\n\n\n\nYou can also set a global title for all pages. For example, in your app.js file:<\/p>\n\n\n\n
createInertiaApp({\n\n\u00a0\u00a0\u00a0\u00a0title: (title) => `${title} - My Laravel App`,\n\n\u00a0\u00a0\u00a0\u00a0...\n\n});<\/code><\/pre>\n\n\n\nThis ensures that each page has meaningful titles and metadata, which is crucial for SEO and social sharing.<\/p>\n\n\n\n
3. Monitor Your Application\u2019s Performance<\/h3>\n\n\n\n
Website speed is an essential factor in SEO rankings. Slow loading times can negatively impact user experience and search engine rankings. Consider using performance monitoring tools to optimize your Laravel Inertia app’s performance.<\/p>\n\n\n\n
You can use tools like Google Lighthouse<\/strong> or WebPageTest to track performance issues<\/strong>. These tools provide insights into essential SEO factors such as Time to First Byte (TTFB), page load times, and Core Web Vitals.<\/p>\n\n\n\n4. Server-side rendering and Dynamic Content<\/h3>\n\n\n\n
If your content is dynamic, such as blog posts or news feeds, search engines must be able to crawl it. With SSR, content is rendered on the server and delivered as HTML. However, if the content changes frequently, ensure that search engines always receive up-to-date HTML.<\/p>\n\n\n\n
For instance, if you’re fetching blog posts dynamically, ensure the initial HTML served to search engines contains the most recent content. Using Inertia\u2019s SSR with Vue’s server-side rendering capabilities will ensure search engines can index your dynamic content immediately.<\/p>\n\n\n\n
By implementing these strategies, you can improve your Laravel Inertia app’s SEO and ensure that search engines index your content efficiently.<\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Inertia.js has become one of the most powerful tools for building modern Single-Page Applications (SPAs), and when paired with Laravel, it unlocks even greater possibilities. This smooth integration of PHP and JavaScript allows developers to build highly interactive apps without losing the power and simplicity of Laravel\u2019s backend.<\/p>\n\n\n\n
With official support for Inertia.js in popular Laravel starter kits like Breeze and Jetstream, it\u2019s clear that Inertia is here to stay. It enables developers to create fast, dynamic, and SEO-friendly SPAs that feel like native apps, all while maintaining the structure of traditional server-rendered applications.<\/p>\n\n\n\n
In this blog, we\u2019ve covered how to get started with Laravel Inertia, created basic pages, and explored advanced topics like routing, SEO optimization, and helpful Inertia tips. While this tutorial is a great starting point, there\u2019s much more to discover about Inertia. As you continue developing and improving your applications, you\u2019ll uncover even more powerful features Inertia has to offer.<\/p>\n\n\n\n
Whether you\u2019re a Laravel enthusiast or a professional developer looking to improve your workflow, Inertia.js is worth exploring. We hope this article has inspired you to build modern SPAs with Laravel and Inertia, and we encourage you to explore this innovative technology further.<\/p>\n\n\n\n
What else would you like us to explore about Laravel or Inertia? Share your thoughts and suggestions in the comments below. We\u2019d love to hear from you!<\/p>\n","protected":false},"excerpt":{"rendered":"
The demand for more efficient and seamless user experiences has increased as web development evolves. Traditional multi-page applications (MPAs) are slowly being replaced by faster, more dynamic, and responsive single-page applications (SPAs). Popular platforms like Facebook, Twitter, and YouTube have adopted SPAs, which provide users with a smoother and more interactive browsing experience. However, building […]<\/p>\n","protected":false},"author":5,"featured_media":69532,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[15],"tags":[50],"ad-banner":[86],"blog-popup":[81],"cta-banner":[],"class_list":["post-66926","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","tag-laravel-development","ad-banner-laravel","blog-popup-app-laravel"],"acf":[],"_links":{"self":[{"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/posts\/66926","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/comments?post=66926"}],"version-history":[{"count":10,"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/posts\/66926\/revisions"}],"predecessor-version":[{"id":69549,"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/posts\/66926\/revisions\/69549"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/media\/69532"}],"wp:attachment":[{"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/media?parent=66926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/categories?post=66926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/tags?post=66926"},{"taxonomy":"ad-banner","embeddable":true,"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/ad-banner?post=66926"},{"taxonomy":"blog-popup","embeddable":true,"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/blog-popup?post=66926"},{"taxonomy":"cta-banner","embeddable":true,"href":"https:\/\/devrims.com\/blog\/wp-json\/wp\/v2\/cta-banner?post=66926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}