LaravelにVue.jsを導入してみる。- Bladeの{{ }}とコンフリクトする問題の対処 –

2018年8月26日

 

どうも、
トレーニング後にビールを
飲んでしまう@version1です。

 

今回は、
そろそろ勉強のために、
JqueryでなくAngular, React, Vueらへん
使って見ようかということ
vue.jslaravelにインストールしてみました。

 

 

数あるjavascriptライブラリの
中でvue.jsを選んだ理由は
特になく、なんとなく
なのですが強いて言うのであれば、
今からやるのであれば後発の新しいライブラリを
使いたいと言うところでした。

 

以下、Googleトレンドで他ライブラリとの
検索の割合調べてみた画像。

javasctipyライブラリ比較

 

検索数も伸びてますね。
後発だけに他ライブラリの課題を見事に解決しているとか
いないとか

 

まずはライブラリのインストール

 

インストールの方法はこちらから

最初に触ってみる程度であれば
CDNでの読み込みが一番早いので、
htmlのヘッダ部に下記を追加してしまうのが早いです。

<script src="https://unpkg.com/vue"></script>

 

が、
これだとライブラリがアップデートされると
アプリが使うライブラリのバージョンも変わってしまうので、
ダウンロードリンクから直接
ライブラリをダウンロードして配置します。

 

 

開発版と本番版があるようなので
両方ダウンロードしてpublic/jsに

public/js/vue.js (開発版)
public/js/vue.min.js (本番版)

を配置します。

 

ヘッダ部分は以下のようにして、
.envのAPP_DEBUGの値を元に読み込むライブラリを
変えるようにしましょう。

@if (env('APP_DEBUG'))
    <script src="{{ asset('js/vue.js') }}"></script>
@else
    <script src="{{ asset('js/vue.min.js') }}"></script>
@endif

 

Hello Worldしてみる 〜 Bladeとのコンフリクト解消方も ~

 

上のような設定が終わっていれば
下記のようにすればHello Vue!
という文字が表示されるので
導入完了です!

 

※注意※

Laravelbladeを使っている場合は、
{{}}のMastache記法がコンフリクトして、
Vueのテキスト表示がPHPに解釈されエラーとなってしまいます。

blade + vueの場合は
blade(PHP)の式を書く場合 -> {{}}で囲う
vueの式を書く場合は、 -> {{}} の前に@を表示する

ようにしてください。

 

<!DOCTYPE html>
<head>
    <title>Sample</title>
    <link href="{{ asset('css/reset.css') }}" rel="stylesheet">
    <link href="{{ asset('css/style.css') }}" rel="stylesheet">
    @if (env('APP_DEBUG'))
        <script src="{{ asset('js/vue.js') }}"></script>
    @else
        <script src="{{ asset('js/vue.min.js') }}"></script>
    @endif
</head>

<body>
    <div class="container" id="app">
        @{{ message }}
    </div>
    <script>
      var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
</html>

 

以上です。

↓ここではVue.jsでできたアプリを試していますので是非
https://jp.vuejs.org/v2/examples/