[PHP][Laravel][vue] vue側に大量のconfig値や定義値を渡したい

バージョン

Laravel 5.8
Vue.js 2.6.10

概要

Laravel側で管理しているconfigフォルダで管理している値や定数などを
Vue側から呼ばれたAPIに渡して判定条件や表示文字列に使用する。

渡したい値が１つや２つであれがblade側で以下のようにして渡せる。

<hoge-component code="{{ $user_code }}"></hoge-component>

しかし、大量に渡したい場合は以下に記載する方法がよい。

方法

APIのレスポンスデータに定義値などをcontroller側でまとめてセットする。
今回は以下の記事で作ったextra項目を使用する。

[PHP][Laravel] APIのResponseデータをカスタムしてシステム内でレスポンス形式をルール化・共通化する - １分技術ブログ

コード

■controller

    /**
     * ユーザーデータ取得API
     */
    public function showUser()
    {
        $user = Auth::user();
        // ユーザー関連の定義データ取得
        $extra = self::getDefineData();
        return response()->success($user, $extra);
    }

■vue

<template>
  <!-- user_defineに格納されている値を使用できる -->
</template>

<script>
export default {
    data() {
        return {
            user_info: [],
            user_define: []
        }
    },
    mounted() {
        let self = this;
        let url = "/ajax/user/show";
        axios.get(url).then(function(response) {
            self.user_info = response.data.response;
            self.user_define = response.data.extra;
        });
    },
}
</script>