Python

// Create a fresh laravel project
composer create-project laravel/laravel example-app OR laravel new example-app


// install npm dependencies 
npm install


// Install postcss and autoprefixer
npm install -D tailwindcss postcss autoprefixer


// Create tailwind css config file
npx tailwindcss init


// Add ./resources/js/**/*.{vue,js} to the content in the tailwind.config.js file
module.exports = {
    content: ["./resources/js/**/*.{vue,js}"],
    theme: {
        extend: {},
    },
    plugins: [],
};


// Add the Tailwind's directives to resources/css/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;


// require Tailwind into webpack.mix.js
mix.js("resources/js/app.js", "public/js").postCss(
    "resources/css/app.css",
    "public/css",
    [require("tailwindcss")]
);


// Install Vuejs
npm install vue@next


// Install Inertia's server side package
composer require inertiajs/inertia-laravel


// Create the inertia middleware
php artisan inertia:middleware


// Add inertia middleware to the web middleware group inside app/Http/Kernel.php
'web' => [
    // ...
    AppHttpMiddlewareHandleInertiaRequests::class,
],


// Install inertia client side
npm install @inertiajs/inertia @inertiajs/inertia-vue3

// Install inertiajs progressbar (OPTIONAL)
npm install @inertiajs/progress


// Install Ziggy
composer require tightenco/ziggy in laravel


// Setup blade root file for the application
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

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

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

<body>
    @inertia
</body>

</html>


// Setup ziggy
php artisan ziggy:generate resources/js/ziggy.js


// Add to resolve ziggy in vue
const path = require("path");

// Rezolve Ziggy
mix.alias({
    ziggy: path.resolve("vendor/tightenco/ziggy/dist/vue"),
});


// Setup resources/js/app.js
import { createApp, h } from "vue";
import { createInertiaApp, Link, Head } from "@inertiajs/inertia-vue3";
import { InertiaProgress } from "@inertiajs/progress";

import { ZiggyVue } from "ziggy";
import { Ziggy } from "./ziggy";

InertiaProgress.init();

createInertiaApp({
    resolve: async (name) => {
        return (await import(`./Pages/${name}`)).default;
    },
    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);
    },
});


// Your final webpack.mix.js file
const path = require("path");
const mix = require("laravel-mix");

// Rezolve Ziggy
mix.alias({
    ziggy: path.resolve("vendor/tightenco/ziggy/dist/vue"),
});

// Build files
mix.js("resources/js/app.js", "public/js")
    .vue({ version: 3 })
    .webpackConfig({
        resolve: {
            alias: {
                "@": path.resolve(__dirname, "resources/js"),
            },
        },
    })
    .extract()
    .postCss("resources/css/app.css", "public/css", [require("tailwindcss")])
    .version();
    
    
    
// Setup laravel routes in web.php
Route::get(
    '/',
    function () {
        return Inertia::render(
            'Home',
            [
                'title' => 'Homepage',
            ]
        );
    }
)->name( 'homepage' );


// Create links in your vue files
<Link :href="route('homepage')" 
	class="text-gray-700 bg-gray-200 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
Homepage
</Link>
Search

How to setup laravel + vuejs + inertiajs + tailwindcss

configuring tailwindcss, vue and laravel

ADD CONTENT
