【Vue.js3】Laravelのblade.phpからVueコンポーネントに変数を渡す際にundefinedになる

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>

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。