Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Zaman052's avatar

unable to pass data from laravel 9 blade to vue 3 components

when I tried in Vue 2 It worked but Vue 3 not working. Please help me. My code Vue

The quick brown fox...

  <div class="inline-flex justify-between w-full">
      <h1>{{ nodeGroups }} Hi</h1>
      
  </div>
 
export default{ props:['nodeGroups'], mounted () { // Do something useful with the data in the template console.dir(this.nodeGroups) } }

app.js import { createApp } from "vue";

import Welcome from "./components/test.vue";

createApp(Welcome).mount("#app");

Laravel blade

{{-- --}}
0 likes
8 replies
Zaman052's avatar

@MaverickChan Sorry I may not post nicely. I passed from blade to vue blade:

        <Welcome :nodeGroups="{{json_encode($company)}}"></Welcome>
    </div>

vue:

The quick brown fox...

  <div class="inline-flex justify-between w-full">
      <h1>{{ nodeGroups }} Hi</h1>
      
  </div>
 
export default{ props:['nodeGroups'], mounted () { console.dir(this.nodeGroups) } }
Zaman052's avatar

import { createApp } from "vue";

import Welcome from "./components/test.vue";

createApp(Welcome).mount("#app");

Zaman052's avatar
  <div class="inline-flex justify-between w-full">
      <h1>{{ nodeGroups }}</h1>
      
  </div>
 
export default{ props:['nodeGroups'] }
Zaman052's avatar

public function show(SubscriptionAction $action) { $company = $action->getCompanyData();

    return view('subscription.subscription_group', compact('company'));
}
Zaman052's avatar

<Welcome :nodeGroups="'{{json_encode($company)}}'"></Welcome>

Please or to participate in this conversation.