Laravel で Vue コンポーネントを使う

2020/03/15

Laravel + Vue.js 環境において、Vue コンポーネントを利用してみます。

プロジェクト作成

Laravel プロジェクトを作成します。


$ composer create-project --prefer-dist laravel/laravel laravel-vuemix
$ cd laravel-vue-mix
$ chmod 777 storage
$ chmod 777 bootstrap/cache/

Laravel Vue UI 追加

Vue に対応した Laravel UI を作成します。


$ composer require laravel/ui --dev
$ php artisan ui vue
$ npm install

ファイルを確認する

Webpack Mix

webpack.mix.js が作成されています。


const mix = require('laravel-mix');

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

デフォルトでは、以下が作成&設定されています。

  • resources/js/app.js
  • resources/sass/app.scss

resources/js/app.js


Vue.component('example-component', require('./components/ExampleComponent.vue').default);

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

サンプル Vue コンポーネント

Vue UIを作成すると、「resources/js/components/ExampleComponent.vue」が作成されています。

このコンポーネントファイルは、app.js で設定されています。


Vue.component('example-component', require('./components/ExampleComponent.vue').default);

第1引数に「タグ名」、第2引数にコンポーネントを設定します。


Vue.component('タグ名', require('.vueファイルパス').default)

コンテンツ作成

コントローラー、ビュー(レイアウト、ページ)を作成し「app.js」「app.css」も読み込むようにします。

Controller

SampleController 作成


$ php artisan make:controller SampleController --resource

SampleController.php の index() を修正


    public function index()
    {
        return view('sample.index');
    }

Route 追加

sample/index にアクセスできるように、route/web.php に追記します。


Route::get('/sample', 'SampleController@index')->name('sample');

ビュー作成

レイアウトファイル

resources/views/layouts/app.blade.php を作成

head タグに app.js 用の scriptタグと app.css 用の linkタグを blade で追記します。


src="{{ asset('js/app.js') }} //script タグで head などに追記
href="{{ asset('css/app.css') }}  //link タグ head などにで追記

ページファイル

resources/views/sample/index.blade.php を作成し、ExampleComponent.vue を読み込みます。

app.js で設定した example-component タグで利用可能です。

カスタム Vue コンポーネント作成

「resources/js/components/」に MessageComponent.vue コンポーネントを作成します。

template 部分

script 部分

script タグで以下を記述します。


export default {
    data: function() {
        return {
            message: "Message Component Message!",
        }
    }
}

app.js

app.js に「MessageComponent.vue」の設定を追記します。


Vue.component('message-component', require('./components/MessageComponent.vue').default);

ビルド

npm または yarn でビルドし、app.js を書き出します。

書き出し先は、「webpack.mix.js」で設定した通りです。


$ npm install
$ npm run dev
//または
$ yarn install
$ yarn run dev

watch で監視

毎回、run dev するのは面倒なので、watch を使ってファイル修正を監視します。


$ npm run watch
//または
$ yarn run watch

Laravel で確認

実際に、Laravel にアクセス(SampleController@index)すると、 「example-component」「message-component」に対応して表示されます。

カスタムのペジネーションを作る
2020/03/30
node-sass を使って sass をコンパイルする
2020/03/30
Log ファサードでSQLログを分離して書き出す
2020/03/29
いちから始める Docker - 複数のコンテナを使う - (2020年)
2020/03/28
いちから始める Docker - docker-compose を使う - (2020年)
2020/03/28
AWS ECR を使ってみる
2020/03/26
Laravel7 でマルチ認証
2020/03/24
Mac に AWS Client を設定する
2020/03/22
Laravel 7 リリース
2020/03/19
v-html でHTML表示する
2020/03/17
Laravel で Vue コンポーネントを使う
2020/03/15
Laravel で Nuxt.js を使ってみる(Docker環境)
2020/03/15
いちから始める Docker -コンテナをビルド- (2020年)
2020/03/12
いちから始める Docker -起動してみる- (2020年)
2020/03/11
Mac で MySQL(8系)
2020/03/03
composer で vendor がインストールできない
2020/03/02
Eloquent の日付を Carbon で扱う
2020/03/01
webpack 4 入門(npm編)
2020/02/27
[Mac]容量を減らす
2020/02/14
DIコンテナはじめ
2020/02/08
freee SDKを Laravel で使ってみる
2020/02/06
freee API を使ってみる
2020/02/06
Segueを利用しない画面遷移
2020/02/01
Xcode11.3 で XVim2 を利用する
2020/01/31
Codable で JSONを読み込み
2020/01/30
Webpack入門(yarn編)
2020/01/24
MacからLaradock PostgreSQLで接続エラー
2020/01/21
Dockerで不要なコンテナ・イメージを削除
2020/01/18
Mac で Laradock の構築
2020/01/18
yarn インストール&プロジェクト作成
2020/01/12
Laravel 6.x 構築(Homestead編)
2020/01/12
Composer インストール
2020/01/12
nvm インストール
2020/01/12
npm install が Mac でエラー
2020/01/05
HTMLタグでカーソルが同時処理(ミラーリング)されてしまう
2020/01/04
DI(依存性注入)
2019/12/30
[Ubuntu]Let's Encryptで無料の証明書を利用する
2019/12/22
[Apache]Apache2.4のアクセス制限が変更
2019/12/22
[Ubuntu]rootのログインとsudo権限追加
2019/12/22
タミヤ マイコンロボット工作セットをMacに接続してみた
2019/12/21
pgAdimn4 でブラウザで開けなくなる
2019/09/28
Java8 を HomebrewとjEnvで構築
2019/09/28
Android Studio環境構築 2019
2019/09/24
ロケールの再構築
2019/08/27
vagrant グループに Apacheを追加
2019/08/27
Linux2 Apache2 + PHP7.3 + PostgreSQL10
2019/08/25
Anadondaの削除
2019/08/25
[Mac]初期設定メモ(CentOS)
2019/08/21
[Mac]PostgreSQL起動
2019/08/20
[Debian]Node.js安定板インストール
2019/08/09