yoo-s.com

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

Laravel 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/

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


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

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


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

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

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


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

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

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」も読み込むようにします。


$ php artisan make:controller SampleController --resource


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

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 タグで利用可能です。

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

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


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

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

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


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

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