Install Laravel with InertiaJS Svelte Tailwindcss DaisyUI

Laravel InertiaJS Svelte Tailwindcss DaisyUI Installation with laravel breeze
Create a folder and open CMD/Terminal with the folder location
terminal/ cmd
composer create-project laravel/laravel .
This will create a Laravel Project inside the current directory
Now visit to InertiaJS website & let's do the server setup
terminal/ cmd
composer require inertiajs/inertia-laravel
This will, install the Inertia server-side adapter using the Composer package manager.
Next, setup the root template that will be loaded on the first page visit to your application. So browse to laravel Resources>views folder.
Create a file named app.blade.php file & paste the below code snippet
app.blade.php
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> @vite('resources/js/app.js') @inertiaHead </head> <body> @inertia </body> </html>
Next we need to setup the Inertia middleware.
terminal/ cmd
php artisan inertia:middleware
Once the middleware has been published,
register the
HandleInertiaRequests
middleware in
App\Http\Kernel.php
as the last item in your
web
middleware group.
Kernel.php
'web' => [ // existing code \App\Http\Middleware\HandleInertiaRequests::class, ],
That's it, you're all ready to go server-side!
//--------------------------------------------------------CLIENT SIDE
First, install the Inertia client-side adapter for svelte
terminal/ cmd
npm install @inertiajs/svelte
Next, we have to update our main JavaScript file, which reside
resources > js > app.js
to boot the Inertia app.
Copy the code snippet to resources > js > app.js file
app.js
import "./bootstrap"; import { createInertiaApp } from "@inertiajs/svelte"; createInertiaApp({ resolve: (name) => { const pages = import.meta.glob("./Pages/**/*.svelte", { eager: true }); return pages[`./Pages/${name}.svelte`]; }, setup({ el, App, props }) { new App({ target: el, props }); }, });
//---------------------------------------------DEFINE INITIAL PAGE
Create a folder named "Pages" inside resources/js folder
Now create a file name "Welcome.svelte" inside resources > js > Pages folder
Now, copy the code snippet to Welcome.svelte file
Welcome.svelte
<script> let stack = "svelte" </script> <main> <h1> Welcome to Laravel {stack} stack </h1> </main>
Open "web.php" file inside routes folder
Now, we have to define the route to the file that we just created
web.php
<?php use Inertia\Inertia; use Illuminate\Support\Facades\Route; Route::get('/', function () { return Inertia::render('Welcome'); });
Now we have to install a package called @sveltejs/vite-plugin-svelte which a vite plugin for svelte
terminal
npm install @sveltejs/vite-plugin-svelte
Now, open vite.config.js file & insert this code inside plugin
svelte({ })
so the final code will be
vite.config.js
import { defineConfig } from "vite"; import laravel from "laravel-vite-plugin"; import { svelte } from "@sveltejs/vite-plugin-svelte"; export default defineConfig({ plugins: [ laravel({ input: ["resources/css/app.css", "resources/js/app.js"], refresh: true, }), svelte({}), ], });
Now we have to run two con-current command and both of this command must be run in separate window, you can not close the window at this moment
terminal/ cmd
npm run dev
terminal/ cmd
php artisan serve
Now we can see our svelte code running on http://127.0.0.1:8000/
and we can check vite configuration is working on http://localhost:5173/
At this point our setup is almost complete, and going forward is comparatively easy because a github user named "tapan288" already published a composer package consist of laravel breeze with svelte component. Also this package take care of complex configuration of vite-svelte plugin and configuration of tailwind.
You can install the package via Composer:
terminal
composer require tapansharma/breeze-svelte --dev
Now install daisyui
terminal
npm i daisyui
open tailwind config file and add this line in plugin
tailwind config file
require('daisyui')