Laravelのview(bladeテンプレート)からVue.jsにグローバルパラメータを渡したい時など

最初、

<router-view app_name="{{ config('app.name') }}"></router-view>

とかしてたけど、こんなの逐一やってらんねー。

検索したけどあんまり見つからない…ajaxで渡せとかそんな面倒なこと…

ということで、「ぼくのかんがえるさいきょうのLaravelからVueへの変数の渡し方」

Laravel 側

Controllerで変数を渡す

<?php
    /**
     * @brief vue用のViewを返す
     */
    public function vue()
    {
        $params = [
            'app_name' => config('app.name')
        ];
        return view('index')
            ->with('params', $params);
    }

bladeでJavaScriptのグローバル変数に振ってやる

@section('content')
<div id="app">
    <router-view></router-view>
</div>
<script>var globalParams = @json($params);</script>
<script src="{{ asset(mix('js/app.js')) }}" defer></script>
@endsection

Vue側

Vueのrootにcomputedにgparamをつける

import Vue from 'vue';
// 省略
const app = new Vue({
    el: '#app',
    // 省略
    computed: {
        gparam: function(){
            return globalParams;
        }
    },

Vueの各Vueやコンポーネントでは$rootでcallする。

<template>
<div>
     <h1>{{ $root.gparam.app_name }}</h1>

ﾄﾞﾔｧ