DEV Community

Cover image for Laravel 9 with Inertia.js + Vite + Vue.js + Tailwind CSS from Laravel
Indunil Peramuna
Indunil Peramuna

Posted on

Laravel 9 with Inertia.js + Vite + Vue.js + Tailwind CSS from Laravel

Hello, Here I m writing a guide to setup a Laravel 9 Web App with Inertiajs and Vue3. Here i m not explaining the process much but the steps of getting the example app up and running.

Getting Started

  • Setting up laravel 9 - Latest 
curl -s "https://laravel.build/example-app" | bash
Enter fullscreen mode Exit fullscreen mode

replace 'example-app' with your app name

  • Install VueJs - Latest 
npm install vue@next
Enter fullscreen mode Exit fullscreen mode
  • Installing Inertia.js in Laravel 
composer require inertiajs/inertia-laravel
php artisan inertia:middleware
Enter fullscreen mode Exit fullscreen mode

HandleInertiaRequests.php will be created inside app/Http/Middleware. We'll just need to add this middleware to the web middleware group inside app/Http/Kernel.php:

'web' => [
    // ...
    \App\Http\Middleware\HandleInertiaRequests::class,
],
Enter fullscreen mode Exit fullscreen mode

Coming next is the Inertia's client side. We're using Vue 3, so we'll install Inertia alongside with the Vue 3 adapter:

  • Installing Inertia.js in NPM 
npm install @inertiajs/inertia @inertiajs/inertia-vue3
Enter fullscreen mode Exit fullscreen mode

Let's throw in the Inertia's progress bar. This will be used as a loading indicator between page navigation.

npm install @inertiajs/progress
Enter fullscreen mode Exit fullscreen mode
  • Ziggy Inertia uses Laravel's routes, so we won't need to use a client side router, but to make use of Laravel's web.php routes, we have to pass them to the DOM somehow. The easiest way to do it to use Ziggy. Let's install Ziggy: 
composer require tightenco/ziggy
Enter fullscreen mode Exit fullscreen mode
  • Ziggy Setup Let's get back to Ziggy and generate the .js file that contains all of our routes. We'll gonna import this into our app.js a bit later. 
php artisan ziggy:generate resources/js/ziggy.js
Enter fullscreen mode Exit fullscreen mode
  • Installing Tailwind CSS

Tailwind requires the least amount of effort. We just need to install postcss and autoprefixer too.

npm install -D tailwindcss postcss autoprefixer
npm i @tailwindcss/forms
Enter fullscreen mode Exit fullscreen mode

Let's create the tailwind config file...

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

We also have to add the Tailwind's directives to resources/css/app.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode
  • Tailwind and PostCSS Change the tailwind.config.js with following 
module.exports = {
    mode: "jit",
    purge: ['./resources/**/*.{js,jsx,ts,tsx,vue,blade.php}'],
    theme: {},
    variants: {},
    plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Change the postcss.config.js with following

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}
Enter fullscreen mode Exit fullscreen mode

Setting up vite.config.js

Following is the vite config with all the settings.

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'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            'ziggy': '/vendor/tightenco/ziggy/src/js',
            'ziggy-vue': '/vendor/tightenco/ziggy/src/js/vue'
        },
    },
});
Enter fullscreen mode Exit fullscreen mode

Finally, let's deal with app.js 

import { createApp, h } from "vue";
import { createInertiaApp, Link, Head } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

import { ZiggyVue } from "ziggy-vue";
import { Ziggy } from "./ziggy";
import '../css/app.css';

InertiaProgress.init();

createInertiaApp({
    resolve: async (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .component("Link", Link)
            .component("Head", Head)
            .mixin({ methods: { route } })
            .mount(el);
    },
});
Enter fullscreen mode Exit fullscreen mode

Setup your Views

  • app.blade.php

Create file called app.blade.php inside your /resources/views folder and basically it will act as a bootstrap for vue + inertiajs.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    @routes
    @vite('resources/js/app.js')
    @inertiaHead
</head>

<body>
@inertia
</body>

</html>
Enter fullscreen mode Exit fullscreen mode
  • Vue Pages You will have to create a folder inside your /resources/js called Pages.

sample welcome.vue

<template>
    <head title="Homepage Title"></head>
    <h1>Homepage </h1>
</template>
Enter fullscreen mode Exit fullscreen mode

Building your app

Last thing we need to do is to change our package.json's scripts.

{
    "dev": "vite",
    "build": "vite build"
}
Enter fullscreen mode Exit fullscreen mode

Now, in order to build you will have to firstly generate the ziggy.js file by running:

// You can find this command in the previous guide
php artisan ziggy:generate resources/js/ziggy.js
Enter fullscreen mode Exit fullscreen mode

Then you can run the dev or build:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Also, make sure you clear your view cache because this might cause some issues after the migrations: php artisan view:cache.

Top comments (1)

Collapse
 
natanchik89 profile image
Natanchik89 • • Edited

Thanks for the work guide. I could not normally switch from webpack to vite. :) Here you need to replace the purge with content, from the 3.0 version of the Tailwind patch. :)

module.exports = {
    mode: "jit",
    content: ['./resources/**/*.{js,jsx,ts,tsx,vue,blade.php}'],
    theme: {},
    variants: {},
    plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Read next

wannabe_dev profile image

Hello World✨

wannabe de:v -

clouddefenseai profile image

Most Common Types of Ransomware

CloudDefense.AI -

apoorv12 profile image

How I Sync my Obsidian Notes For Free !

Apoorv Khandelwal -

juarezasjunior profile image

C# Tip: Top-level Statements

Juarez Júnior -