Как передать параметры из blade шаблона во vue3 компонент?

Question

Как передать параметры из blade шаблона во vue3 компонент? Развернул чистый проект последней версии лары и установил последнюю версию vue3. В консоли всегда undefined а в шаблоне пустая строка, то есть по факту данные не передаются в компонент как это было ранее во vue2. Подскажите в чем проблема и как пофиксить?

Код Blade шаблона:

    <body class="antialiased">
    <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
        <div id="app">
            <App param="123">
            </App>
        </div>
    </div>
</body>
<script src="{{ mix('js/app.js') }}"></script>

Vue компонент:

<template>
<div>
    param: {{ param }}
</div>
</template>

<script>
export default {
    name: 'App',
    props: ['param'],
    mounted() {
        console.log(this.param);
    }
};
</script>

webpack.mix.js:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

package.json:

{
"private": true,
"scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
},
"devDependencies": {
    "axios": "^0.21",
    "laravel-mix": "^6.0.6",
    "lodash": "^4.17.19",
    "postcss": "^8.1.14"
},
"dependencies": {
    "vue": "^3.2.31",
    "vue-loader": "^17.0.0"
}
}

БЛОГ НА HUSL

Как передать параметры из blade шаблона во vue3 компонент?

Ответы (0 шт):