how to properly pass prop from laravel 8 blade to vue 3 component

user_10418421 0
Viewed 468

I'm trying to get the value of user prop as in the blade file when the App component is mounted but I get undefined in the console. I was wondering if something changed in Vue 3 because it worked in Vue 2.

How can I get the value of the user prop?

laravel.blade file

@extends('layouts.app')

@section('content')
    <App 
    @if(auth()->check()) 
        :user="1"
    @endif> 
    </App>
@endsection

App.vue

<template>
    <div> {{user}} </div>
</template>

<script>
export default {
    name: 'App',

    props: [ 'user'],

    mounted(){
        console.log(this.user)
    }
}
</script>

app.js

import { createApp } from 'vue';
import App from './components/App'
import router from './router';

require('./bootstrap'); 
const app = createApp(App)
app.use(router).mount("#app")
vuejs3 laravel php javascript
1 Answers

From the migration docs:

The propsData option has been removed. If you need to pass props to the root component instance during its creation, you should use the second argument of createApp

const app = createApp(
  {
    props: ['username'],
    template: '<div>{{ username }}</div>'
  },
  { username: 'Evan' }
)

It's not as convenient as the Vue 2 way, and I haven't found a good work-around of sending data from your Laravel controller directly to your Vue component. Best bet may be to get the info by querying your API in the created() method in Vue.

user_63176380
Related