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

replace 'example-app' with your app name

• Install VueJs - Latest

npm install vue@next

• Installing Inertia.js in Laravel

composer require inertiajs/inertia-laravel
php artisan inertia:middleware

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,
],

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

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

npm install @inertiajs/progress

• 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

• 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

• 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

Let's create the tailwind config file...

npx tailwindcss init

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

@tailwind base;
@tailwind components;
@tailwind utilities;

• 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: [],
}

Change the postcss.config.js with following

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

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'
        },
    },
});

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);
    },
});

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>

• 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>

Building your app

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

{
    "dev": "vite",
    "build": "vite build"
}

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

Then you can run the dev or build:

npm run dev

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

Comments

[Natanchik89]

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: [],
}