arrow_back Return to Posts

Setting Up Laravel + Inertia + Vite + Tailwind + Daisy-UI
By Godwin Udofia in December 2022 ~ Laravel

The steps

  1. Create a laravel app laravel new <project_name>

  2. Add inertia: https://inertiajs.com/server-side-setup, https://inertiajs.com/client-side-setup

  3. Check note on configuring Vite: https://laravel.com/docs/9.x/vite#configuring-vite

    MODIFICATIONS

    // package.json

{
  "devDependencies": {
      "@vitejs/plugin-vue": "^4.2.3",
  }
}

    // vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    plugins: [
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './resources/js/'),
        },
    }
});

    // app.js

import './bootstrap';
import { createApp, h } from 'vue'
import {createInertiaApp} from '@inertiajs/inertia-vue3'

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', {eager: true})
        return pages[`./Pages/${name}.vue`]
    },
    setup({el, App, props, plugin}) {
        createApp({render: () => h(App, props)})
            .use(plugin)
            .mount(el);
    },
});

  4. Install Tailwind CSS: https://tailwindcss.com/docs/guides/laravel

  5. Install Daisy UI: https://daisyui.com/docs/install/

That’s it!

Comments