Laravel 9 with Inertia.js + Vite + Vue.js + Tailwind CSS from Laravel
Published: 2022-12-13 06:45:06

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`.