In this section we will install laravel Splade. Splade provides a super easy way to build Single Page Applications (SPA) using standard Laravel Blade templates, enhanced with renderless Vue 3 components. In essence, you can write your app using the simplicity of Blade, and besides that magic SPA-feeling, you can sparkle it to make it interactive. All without ever leaving Blade.
Create Laravel project
composer create-project laravel/laravel laravel-splade
install laravel splade via composer:
composer require protonemedia/laravel-splade
Install splade file.
php artisan splade:install
Install npm dependency.
npm install && npm run dev
You can see root file splade
views/root.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@spladeHead
@vite('resources/js/app.js')
</head>
<body class="font-sans antialiased">
@splade
</body>
</html>
views/home.blade.php
<x-layout>
<x-slot name="header">
{{ __('Home') }}
</x-slot>
<x-panel class="flex flex-col items-center pt-16 pb-16">
<x-application-logo class="block h-12 w-auto" />
<div class="mt-8 text-2xl">
Welcome to your Splade application!
</div>
</x-panel>
</x-layout>
Run laravel and vite server
php artisan serve
//and
npm run dev
For more details read laravel splade
