header image
header image

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

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

 

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

 

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

 

 

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

 

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

javascript-library.png

 

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

 

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

 

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

最初に触ってみる程度であれば 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/