LaravelでルーティングしてページごとのVueコンポーネントを表示する方法

f:id:ustrgm:20181223003622p:plain

LaravelにVue.jsを乗っけて使ってみました. 複数ページに適応するまでの方法をまとめてみました〜

この記事に書いていること

Vue.jsの動かし方
Laravelでルーティングして, ページごとにVueのコンポーネントを表示する方法

この方法はシングルページアプリケーションではなくマルチページのアプリケーションを作る方法になります.

今回参考にした記事. めちゃくちゃ参考になりましたので僕の記事なんか見ないで, こちらをどうぞ.

LaravelからVue.jsを使う最短レシピ - Qiita

VueとBladeを使い簡単なレイアウトを作成！ - SCOUTER開発者ブログ

事前準備

Laravelの環境構築は終了させていることが前提です. 25分でできるのでこちらでもみて整えてくださいw

wally-ngm.hatenablog.com

Vue.jsでコンポーネントを作る

resources/js/components 配下にコンポーネントを作ります. 初期状態だと ExampleComponent.vue というファイルがあると思います.

適当に TestComponent.vue という名前で新しく作成します.

<template>
    <div>
        test
    </div>
</template>

resources/js/app.js を少し修正します.

ここに宣言したコンポーネントがblade.phpの中で使えるようになります...めっちゃ簡単でびびります.

Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('test-component', require('./components/TestComponent.vue'));  <=を追加

以下のコマンドを叩きます

$ npm install # 最初の一回のみ必要. その後はモジュールを追加しない限り実行しないでOK
$ npm rum dev # このコマンドでビルドされます

blade.phpに組み込む

上にも載せましたが, こちらの記事でポイントを書いてくださっててかなり助かりました. LaravelからVue.jsを使う最短レシピ - Qiita

ページA

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        {{-- 以下を追加 --}}
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
        {{-- 以下を追加 --}}
        <link rel="stylesheet" href="{{ mix('/css/app.css') }}">

    </head>
    <body>
        <div id="app">
        <div class="content">
        {{-- ここにVueのコンポーネントを埋め込む！ --}}
        <example-component></example-component>
        </div>
        </div>
        <script src=" {{ mix('js/app.js') }} "></script>
    </body>
</html>

ページB

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        {{-- 以下を追加 --}}
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
        {{-- 以下を追加 --}}
        <link rel="stylesheet" href="{{ mix('/css/app.css') }}">

    </head>
    <body>
        <div id="app">
        <div class="content">
        {{-- ここにVueのコンポーネントを埋め込む！ --}}
        <test-component></test-component>
        </div>
        </div>
        <script src=" {{ mix('js/app.js') }} "></script>
    </body>
</html>

blade.phpはこんな感じで書いてあげればOKで, 普通のHTMLタグみたいに使えるのがめっちゃいいです.

head情報とかは共通化できるので, こちらの記事ではlayoutsフォルダを作って, そこに layout.blade.phpみたいな大枠となる部分を作成し, 各ページでそれをextendして使っています. これでかなり記述が楽になりました.

VueとBladeを使い簡単なレイアウトを作成！ - SCOUTER開発者ブログ