FWとしてかなり早くからVue.jsをサポートしています。今回は、LaravelでVue.jsを用いた開発を始める際のファーストステップとして、Vue.jsを使った画面出力を行います。今回の開発環境は以下の通りです。12.xnpmコマンドを使用するので、Node.jsをインストールしておいてください。Laravelのルートディレクトリを「laravel/」とします。LaravelとフロントエンドLaravelでは、コンパイルなどを要するフロントエンド開発環境としてVue.jsとReactをサポートしています。Mixを用いてすぐにビルドし動くコードを出力する事ができます。(デフォルトはVue.jsセッティングになっていて、Reactを使う場合は切り替えが必要です。)Vue.jsを動かす為のセッティングそれでは設定を行っていきます。依存パッケージをインストールします。Laravelのルートディレクトリへ移動し、npmでインストールします。Mixを用いたビルドが行えるようになります。何も開発していませんが、ビルドしてみます。devビルドが正常に完了すると、以下のような表示になります。次に、実際にVue.jsで書いたコードをLaravelで表示してみます。ところが、コードを書かなくてもサンプルが既にLaravel内に用意されているので、まずはそれを利用して表示させてみます。サンプルコードは、SFC(単一ファイルコンポーネント)で提供されています。}</script>ありがたいことです。これを表示させましょう。表示用に適当なビューを用意します。}}"></script></body></html>ポイントは3つです。}}">CSRFトークンをhead内metaタグにセットしています。<example-component></example-component></div>Vueで描画する領域としてdivタグを設置し、id名を「app」とします。ExampleComponentを表示するため、example-componentタグを設置します。}}"></script>ビルドされ出力されるapp.jsを読み込みます。最後に、ルーティングです。view('sample');});ではブラウザからアクセスして確認してみます。ExampleComponentからの表示が確認できました。Vue.jsで実装した機能を動作させるさすがにサンプルコードを表示させただけでは手応えも薄いと思うので、一度はきちんとコードを書いて表示させてみます。こちらもSFCを作成します。}</style>簡単なカウントアップ・ダウンのコンポーネントを書きました。次に、Vueアプリケーションにこのコンポーネントを登録し、動作するようにします。app.jsに一行追加します。'#app'});最後に、Bladeテンプレート(ビュー)の方でSampleComponentを表示するようにします。devでビルドして、ブラウザから確認してみます。Vue.jsで実装したフロントエンドがLaravel上で動作している事を確認できました。カウントアップ・ダウンの動作も問題ないようですね。まとめ以上で作業は修了です。私の記憶では、まだVue.jsがあまり広まっていない頃からLaravelではサポートを開始していました。そんなVue.jsももう確固たるポジションを確立していて、Laravel陣営の先見の明たるや。Laravel&Vue.jsの組み合わせはおすすめです。Mix(Webpack)を導入しsassやJavaScriptをコンパイル/minifyするLaravelにReactを導入する。SESを使ってAPIメール送信を行う(Mailableクラス&SimpleEmailService)2019.12.3MySQL8.0.16で追加されたCHECK制約を試してみる。RitoLaboこのサイトについて利用規約プライバシーポリシ。