Souzen Yurama Notes

Laravel9にあとからVue3を導入するメモ

概要

SPA（シングルページアプリケーション）としてではなく、Laravel9標準のBladeテンプレートで（従来のjsみたいに、ページごとに動かしたい）実装していくためのメモです。

インストール

インストール方法はいろいろありますが、今回の環境は次の方針で用意します。

  • パッケージ管理はnpmかyarnを使用
  • コンパイル時のファイルの割り振りはLaravelのwebpack.mix.jsで設定
  • バージョンはVue3に固定
  • SFC(単一コンポーネントファイル、拡張子は一般的に.vue）はローカル作成
  • production環境はnpmによるコンパイルをしてデプロイ

参考資料： https://v3.ja.vuejs.org/guide/installation.html#npm

Vue3本体のインストール

Laravelのpackage.jsonのあるディレクトリで、
npmのコマンドを叩いてインストールします。

$ npm install vue@next

webpack.js用のローダーの追加

これが無いと、コンパイル時にファイルが認識できずに失敗してしまいます。
https://vue-loader.vuejs.org/

$ npm install vue-loader

開発環境用ツールのインストール

コンポーネントファイル(.vue)を生成するためのツールです。乱暴な話、全部手作りする場合は無くてもいいです。
これはローカルの開発環境でのみ使用するため、「-D」オプション(--save-devと等価)で開発環境のnpmコンパイル用としてpackage.jsonに追加します。

$ npm install -D @vue/compiler-sfc

実装

参考資料： https://v3.ja.vuejs.org/guide/single-file-component.html

単一コンポーネントファイル作成

Laravelのディレクトリで resources/js/components ディレクトリを作成し、設置します。

ここでVueのサンプルと異なる点があります。
bladeテンプレートも{{}}のブラケット構文を使うのでコンフリクトしてしまうので、Vue側の記述は @{{ greetings }} で、先頭に「@」をつけて対処します。

example.vue

<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

<template>
  <p class="greeting">@{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

example.jsへ実装

Laravelのディレクトリの直下の resources/js ディレクトリがあるので、
そこに作成していきます。

流れとしては「import ExampleVue from ‘./components/example.vue’」で、作成しておいたexample.vueのコンポーネントを読み込んでVue-Exampleとしています。

次に、Bladeテンプレート中で、「mount('#example')」で指定されている「example」のIDを持つタグ内でVue自体が使えるようになると思ってください。

example.js

import * as Vue from 'vue'
import VueExample from './components/experiment.vue'

const example= {
    components: {
        'vue-example': VueExample , // <vue-example>のタグにVueExampleコンポーネントを割り当て
    }
};

Vue.createApp(example).mount('#example')

Bladeテンプレートへの実装

<vue-example></vue-example> という独自タグが、
VueExample（example.vueのコンポーネント）のtemplate部分に置き換えられると考えてください。

{{ mix('js/example.js') } } の記述をしておくと、自動的にパラメータと付与してキャッシュの制御をしてくれます。

example.blade.php

<!DOCTYPE html>
<html lang="ja">
   <body>
     <div id="example">
        <!-- Vueコンポーネント部分 -->
        <vue-example></vue-example>
     </div>
     <script src="{{ mix('js/example.js') }}"></script> 
  </body>
</html>

コンパイルの設定

vueの単一コンポーネントをロードさせるため、該当行の末尾に .vue() を追記します。

そして、app.js に設定した場合はノータッチで大丈夫ですが、example/example.js のような個別のパスを設定した場合、Laravelの直下のwebpack.mix.jsに追記をします。 .js('resources/js/example.js', 'public/example') が追加部分で、コンパイル時に public/js/example/example.js が出力されるようになります。


参考資料： https://laravel-mix.com/docs/main/vue

webpack.mix.js

mix
  .js('resources/js/app.js', 'public/js')
  .js('resources/js/example.js', 'public/example/js').vue()
  .sass('resources/sass/app.scss', 'public/css')
  .version();

コンパイル

ローカル（開発環境）の場合

npm run dev

デプロイ（公開環境）の場合

npm run prod

Souzen Yurama

, , ,