Inertia-Vue-installation

Install Inertia:

# Server side adapter
composer require inertiajs/inertia-laravel

# Install Vue.js && client side adapter for Vue.js
npm install vue @inertiajs/inertia @inertiajs/inertia-vue

Add Inertia's root view (app.blade.php)

touch resources/views/app.blade.php

Put this in the file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>{{ config('app.name') }}</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Poppins:400,700" rel="stylesheet">

        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                font-family: 'Poppins', sans-serif;
                margin: 0;
            }
        </style>

        <link href="{{ mix('css/app.css') }}" rel="stylesheet">
        <script src="{{ mix('js/app.js') }}" defer></script>
        @routes
    </head>

    <body>
        @inertia
    </body>
</html>

Boot Inertia from app.js

import { InertiaApp } from '@inertiajs/inertia-vue'
import Vue from 'vue'

Vue.use(InertiaApp)

const app = document.getElementById('app')

new Vue({
  render: h => h(InertiaApp, {
    props: {
      initialPage: JSON.parse(app.dataset.page),
      resolveComponent: name => require(`./Pages/${name}`).default,
    },
  }),
}).$mount(app)

Create some pages & register some routes

Create the files

mkdir resources/js/{Pages,Shared}
touch resources/js/Shared/Layout.vue
touch resources/js/Pages/Home.vue
touch resources/js/Pages/About.vue

Put this in Layout.vue

<template>
    <div>
        <header>
            <inertia-link href="/">Home</inertia-link>
            <inertia-link href="/about">About</inertia-link>
        </header>
        <slot></slot>
    </div>
</template>

<script>
export default {}
</script>

Put this in Home.vue:

<template>
    <h1>Homepage</h1>
</template>

<script>
import Layout from '../Shared/Layout'

export default {
    layout: Layout
}
</script>

Put this in About.vue:

<template>
    <h1>About</h1>
</template>

<script>
import Layout from '../Shared/Layout'

export default {
    layout: Layout
}
</script>

use Inertia\Inertia;

Route::get('/', fn () => Inertia::render('Home'));
Route::get('/about', fn () => Inertia::render('About'));

Install Tailwindcss

# Install the dependencies
npm install --dev tailwindcss postcss-nesting postcss-import

# Generate the config file
npx tailwind init

Setup purgeCSS for smaller styles

npm install --dev @fullhuman/postcss-purgecss

Put this in webpack.mix.js:

const cssImport = require('postcss-import')
const cssNesting = require('postcss-nesting')
const mix = require('laravel-mix')
const path = require('path')
const purgecss = require('@fullhuman/postcss-purgecss')
const tailwindcss = require('tailwindcss')

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css/app.css')
    .options({
        postCss: [
            cssImport(),
            cssNesting(),
            tailwindcss('tailwind.config.js'),
            ...mix.inProduction() ? [
                purgecss({
                    content: ['./resources/views/**/*.blade.php', './resources/js/**/*.vue'],
                    defaultExtractor: content => content.match(/[\w-/:.]+(?<!:)/g) || [],
                    whitelistPatternsChildren: [/nprogress/],
                }),
            ] : [],
        ],
    })
    .webpackConfig({
        output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
        resolve: {
            alias: {
                'styles': path.resolve('resources/css'),
                '@': path.resolve('resources/js'),
            },
        },
    })
    .version()
    .sourceMaps()

Put this inside resources/css/app.css:

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

ahgumasing/Inertia-Vue-Tailwind-Installation.md