如何正确地将道具从 laravel 8 刀片传递到 vue 3 组件

Question

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")

Answer 1

---

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.