Breaking News: Grepper is joining You.com. Read the official announcement!

How to setup laravel + vuejs + inertiajs + tailwindcss

Fierce Flamingo answered on January 22, 2022 Popularity 9/10 Helpfulness 5/10

answer How to setup laravel + vuejs + inertiajs + tailwindcss

related configuring tailwindcss, vue and laravel

How to setup laravel + vuejs + inertiajs + tailwindcss

Comment

// 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' => [
    // ...
    \App\Http\Middleware\HandleInertiaRequests::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>

Popularity 9/10 Helpfulness 5/10 Language whatever

Source: Grepper

Tags: inertiajs laravel tailwind-css whatever

Link to this answer
Share Copy Link

Contributed on Apr 16 2022

Fierce Flamingo

0 Answers Avg Quality 2/10

Closely Related Answers

configuring tailwindcss, vue and laravel

Comment

const mix = require("laravel-mix");

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

Popularity 9/10 Helpfulness 2/10 Language python

Source: vuejsexamples.com

Tags: laravel

Link to this answer
Share Copy Link

Contributed on Jan 22 2022

Determined Dunlin

0 Answers Avg Quality 2/10

How to setup laravel + vuejs + inertiajs + tailwindcss

Contents

More Related Answers

How to setup laravel + vuejs + inertiajs + tailwindcss

Closely Related Answers

configuring tailwindcss, vue and laravel

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.