LaravelのbladeファイルとVue.jsが両方共存する形でフロント画面を作る際にbladeファイルで受け取った値をVue.jsのコンポーネントにpropsで渡そうとした際にunderindになってしまいましたので解決方法を備忘録で残しておきます。
原因
最初にcreateAppでマウントする際にbladeからVueコンポーネントに変数を渡す予定のコンポーネントを登録しておく必要がありました。
Bladeファイル
<script src="{{ mix('js/app.js') }}" defer="defer"></script>
<div id="app">
<app :user_id='@json($user_id)'></app>
</div>app.js
undefinedになる書き方
マウントする際にコンポーネントが未定義のため、propsが渡らない
import "./bootstrap";
import { createApp } from "vue";
import App from "./App.vue";
const App = async () => {
const app = createApp(App);
app.mount("#app");
};
App();propsが渡る書き方
import "./bootstrap";
import { createApp } from "vue";
import App from "./App.vue";
const App = async () => {
const app = createApp({});
app.component("App", App); //global registration
app.mount("#app");
};
App();App.vue
<template>
<h1>App</h1>
</template>
<script setup>
import { defineProps } from "vue";
const props = defineProps({
user_id: {
type: Number,
required: true,
},
});
console.log(props.user_id);
</script>関連記事
