Error Undefined variable $components in blade after including @splade

[galexpert]

• Laravel Version: 9.50.2
• PHP Version: 8.1.1
• "protonemedia/laravel-splade": "^1.4"
• Splade JS Version (npm): #.#.#
• "@protonemedia/laravel-splade": "^1.4.16",
• "@vitejs/plugin-vue": "^4.0.0",
• "@vuelidate/core": "^2.0.3",
• "@vuelidate/validators": "^2.0.3",
• "bootstrap": "^5.2.3",
• "sass": "^1.58.0",
• "sass-loader": "^13.2.0",
• "vue": "^3.2.36",
• "vue-loader": "^17.0.1"
• Splade PHP Version (composer): #.#.#
• Dev environment (OS, Sail/Valet/etc): ...

Description:

Hello. Thanks for a great component. But I can't seem to get it to run. I have a Laravel 9 + vue 3 + bootstrap 5 project. Everything works fine through blade + vue component . But there is a big problem: the html vue component is not visible in the source code of the pages. I realized that I need to implement SSR technology. Found your SPLADE. I think it will solve my problems. I installed it, connected it according to the instructions... And every time I get the same error... after including the @splade directive, I get error: Undefined variable $components (in blade )

Help solve the problem, so that it would work alo !!!! I would be very grateful for any help

Steps To Reproduce Issue:

resources/views/root.blade.php

@extends('layouts.masterb5')
@section('content')
    <div id="app">
        @splade
        <div class="container">
            @if(isset($cities))
                <cost-delivery-component
                    :cities="{{json_encode($cities)}}"
                ></cost-delivery-component>
            @endif
        </div>
    </div>
@endsection

vite.config.js

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

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

resources/js/app.js

import './bootstrap';
import "@protonemedia/laravel-splade/dist/style.css";
import { createApp } from "vue/dist/vue.esm-bundler.js";
import { renderSpladeApp, SpladePlugin } from '@protonemedia/laravel-splade'
import CostDeliveryComponent from './components/CostDeliveryComponent.vue';

/*const App = createApp({
    components: {
        CostDeliveryComponent
    }
});*/

const el = document.getElementById('app')

const realtyApp = createApp({
    render: renderSpladeApp({ el })
})
    .use(SpladePlugin)
    .component('CostDeliveryComponent', CostDeliveryComponent)
    .mount(el);

//App.mount("#app")

routes/web.php

Route::group([
    'prefix' => LaravelLocalization::setLocale(),
   // 'middleware' => [  'localeSessionRedirect301',  'localeViewPath', 'splade' ]
    'middleware' => ['splade']
], function() {
    Route::get('/', [App\Http\Controllers\MainController::class, 'index'])->name('index');
});
Route::get('posts/{id}', [App\Http\Controllers\MainController::class, 'getPosts'])->name('get.posts');

app/Http/Controllers/MainController.php

   public function index()
    {
        $lang = $this->localizationService->checkLocale();
        $cities = Location::where('parent_id', '=', 0)->with(['lang' => function ($query) use ($lang) {
            $query->where('lang', '=', $lang);
        }])->get()->toArray();

        return view('root', compact('cities'));
    }

I would be extremely grateful for any help

[smortexa]

Same problem

[muhannadalhariri]

Have any one got in idea of what could be the issue?

[isaacangello]

Realmente é um problema que me incomoda bastante, estou com esse problema também, mas com laravel 10.4x, php 8.3.3, eu acho que não é bem um erro mas sim um comportamento indesejado por falta de seguir algum padrão.