はじめに

Laravel で Vue を使うときに実施したことなどのメモ。

TL;DR

以下について簡単に整理した

  • Laravel + Vue の利用方法
  • Vue コンポーネントの利用方法
  • 一部ページでのみ Vue を利用する方法
  • Vue で Laravel の多言語化ファイルを利用する方法
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. Laravel で Vue を動作させる
    2. Vue のコンポーネントを利用する
      1. 余談: Vue ファイルの格納パス
    3. 特定ページでだけ Vue を使いたい
    4. Vue で Laravel の多言語化ファイルを参照
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$ cat /etc/os-release
PRETTY_NAME="Ubuntu 16.04.6 LTS"

$ php -v
PHP 7.3.16-1+ubuntu16.04.1+deb.sury.org+1 (cli) (built: Mar 20 2020 13:51:21) ( NTS )

$ composer -V
Composer version 1.9.1 2019-11-01 17:20:17

$ composer info laravel/framework
name     : laravel/framework
versions : * v5.7.28

$ npm -v
6.14.5

$ node -v
v12.7.0

$ npm ls vue
vue@2.6.12 | MIT | deps: none | versions: 299

詳細

Laravel で Vue を動作させる

参考:

細かい設定方法は上記ページを参照。

resources/views/layouts/app.blade.php などのレイアウトファイルを編集。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- ... -->
  <meta name="csrf-token" content="{{ csrf_token() }}"><!-- *** 追加 *** -->
  <!-- ... -->
</head>
<body>
<div id="app">
  <!-- ... -->
</div>
<script src="{{ mix('/js/app.js') }}"></script><!-- *** 追加 *** -->
</body>
</html>

resources/js/app.js などの JS ファイルを編集。

1
2
3
4
5
6
7
// ...
window.Vue = require('vue');
const app = new Vue({
  el: '#app',
  template: '<div>Hello vue & laravel</div>',
});
// ...

Laravel-mix の設定、webpack.mix.js を編集。

参考: Laravel(Laravel Mix) で JavaScript を良い感じに取り扱う

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const mix = require('laravel-mix');
require('laravel-mix-polyfill');

mix.js('resources/js/app.js', 'public/js')
  .polyfill({
    enabled: true,
    useBuiltIns: "usage",
    // targets: {}  // *** ブラウザ指定があれば追加 ***
  });

if (mix.inProduction()) {
  mix.version();
} else {
  mix.browserSync('localhost');
}

npm run watch などを実行後、該当レイアウトファイルを利用するページにアクセスすると Hello vue & laravel と表示されるはず。

Vue のコンポーネントを利用する

resources/js/components/xxxx.vue を作成。(今回は MyComponent.vue とした)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div>
    Hello vue component
  </div>
</template>

<script>
export default {
  props: ['text', 'num'],
  mounted() {
    alert(`component mounted! 'text' is ${this.text}, 'num' is ${this.num}`);
  },
}
</script>

resources/js/app.js などの JS ファイルを編集。

1
2
3
4
5
6
7
8
9
10
// ...
window.Vue = require('vue');
import MyComponent from './components/MyComponent';
const app = new Vue({
  el: '#app',
  components {
    MyComponent,
  },
});
// ...

コンポーネントを利用したい箇所(blade)を変更。Vue の props や v-bind も利用可能。

1
2
3
<!-- ... -->
<my-component text="my-text" :num="1+2" />
<!-- ... -->

上手く動作すれば以下のようなダイアログが表示されるはず。

余談: Vue ファイルの格納パス

個人的には格納パスが resources/js/components/ で良いのかは悩みどころ。

resources/js/xxxx.js みたいな Vue とは関係ないものもあるなら、resources/js/vue/components/xxxx.vue とか resources/vue/components/xxxx.vue とかでも良いかも？

特定ページでだけ Vue を使いたい

特殊な要件になるが、一部だけ SPA(っぽい) 感じにしたいような場合。

resources/js/app.js を使うと(一般的に)全てのページが対象になるので、別の JS ファイルに new Vue を記述し、その JS ファイルを対象の blade ファイルで使うようにすると良い。

resources/js/app.js

1
2
3
// ...
window.Vue = require('vue');
// ...

resources/js/hoge.js

1
2
3
4
5
6
7
import MyComponent from './components/MyComponent';
const app = new Vue({
  el: '#my-target',
  components: {
    MyComponent,
  },
});

webpack.mix.js

1
2
3
4
5
6
7
8
9
// ...
mix.js('resources/js/app.js', 'public/js')
  .js('resources/js/hogejs', 'public/js')
  .polyfill({
    enabled: true,
    useBuiltIns: "usage",
    // targets: {}
  });
// ...

hoge.js は最後に読み込みたいため、@push, @stack を使う。

参考: Laravel(Laravel Mix) で JavaScript を良い感じに取り扱う

resources/views/.../hoge.blade.php

1
2
3
4
5
6
7
8
9
10
11
12
@extends('layouts.app')
@push('scripts')
  <script src="{{ mix('/js/hoge.js') }}"></script>
@endpush

@section('content')
<!-- ... -->
<div id="my-target">
  <my-component>
</div>
<!-- ... -->
@endsection

resources/views/layouts/app.blade.php

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- ... -->
</head>
<body>
@yield('content')
<script src="{{ mix('/js/app.js') }}"></script>
@stack('scripts')<!-- *** 追加 *** -->
</body>
</html>

Vue で Laravel の多言語化ファイルを参照

Laravel の blade ファイルで resources/lang/ja.json の内容を参照し __('hello') として表示していたものを、Vue 側でも同様に resources/lang/ja.json を利用して表示したい場合。

参考: LaravelとVue.jsで多言語対応を行う – Webプログラマーきたむーの技術ブログ

kazupon/vue-i18n をインストール

1
$ npm i vue-i18n

resources/js/app.js を修正、resources/lang/ja.json を利用するように設定。
(修正ファイルや参照パスは人それぞれなので、適宜読み替え)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// ...
window.Vue = require('vue');

import VueI18n from 'vue-i18n';
Vue.use(VueI18n);

const locale = 'ja';
const i18n = new VueI18n({
  locale,
  messages: {
    ja : require('../lang/ja.json'),  // resources/lang/ja.json を参照
  },
});

const app = new Vue({
  i18n,
  el: '#app',
});

resources/lang/ja.json

1
2
3
{
  "hello": "こんにちわ"
}

xxxx.vue では $t で表示。

1
2
3
4
5
<template>
  <div>
    {{ $t('hello') }}  <!-- 'こんにちわ' として表示される -->
  </div>
</template>

kazupon/vue-i18n の詳細な使い方(ドキュメント)は Getting started | Vue I18n を参照。

まとめ

以下について簡単に整理した

  • Laravel + Vue の利用方法
  • Vue コンポーネントの利用方法
  • 一部ページでのみ Vue を利用する方法
  • Vue で Laravel の多言語化ファイルを利用する方法

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list