Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error Undefined variable $components in blade after including @splade #508

Open
galexpert opened this issue Aug 24, 2023 · 4 comments
Open

Comments

@galexpert
Copy link

galexpert commented Aug 24, 2023

  • 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
Copy link

Same problem

@muhannadalhariri
Copy link

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

@isaacangello
Copy link

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.

@Th3BiSh0p
Copy link

Same issue here... the only modification I did was update from laravel 10 to laravel 11

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants