Laravelバージョン

動作確認はLaravel Framework 7.19.1で行っています

前提条件

eclipseでLaravel開発環境を構築する。デバッグでブレークポイントをつけて止める。(WindowsもVagrantもdockerも)
本記事は上記が完了している前提で書かれています
プロジェクトの作成もapacheの設定も上記で行っています

LaravelでJavaScript、CSSを使う
本記事は上記が完了している前提で書かれています

Vue.jsを使う準備

Laravelの認証(web画面)
を実行した人はもう準備が済んでいます
上記記事で行った
composer require laravel/ui
php artisan ui vue --auth
でVue.jsを使うのに必要なものがインストールされていました
やってない人は
composer require laravel/ui
php artisan ui vue
npm install
をしましょう
package.jsonを見てみるとvueが追加されているはずです

コンポーネント作成

/sample/resources/js/components/Sample.vue作成

Sample.vue

<template>
  <div>
    <div>{{ message }}</div>
  </div>
</template>


<script>
export default {
  props: {
      message: {title: String, default: 'hello world'}
  }
}
</script>

コンポーネント登録

/sample/resources/js/app.jsに
Vue.component('sample', require('./components/Sample.vue').default);
を追記

app.js

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

app.jsを見るとVue.component('example-component', require('./components/ExampleComponent.vue').default);が既に書かれていたと思います。また、resources/js/components/ExampleComponent.vueが既に存在していたはずです
Laravelでは事前にapp.jsにVue.jsを使う準備ができており、開発者はそこにVue.jsのグローバルコンポーネントを登録すれば使えるようになっています

Controllerにメソッド追加

(1) /sample/app/Http/Controllers/SampleController.phpにvueメソッドを追記

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

(2) /sample/routes/web.phpに下記を追記
Route::get('sample/vue', 'SampleController@vue');

viewの作成

/sample/resources/views/sample/vue.blade.phpファイル作成

vue.blade.php

<html>
    <head>
        <title>sample</title>
        <script src="{{ asset('js/app.js') }}" defer></script>
    </head>
    <body>
        <div id="app">
            <sample />
        </div>
    </body>
</html>

JavaScriptビルド実行

コマンドラインで
cd sample
npm run dev

動作確認

http://localhost/laravelSample/sample/vue

実行結果

hello world

LaravelでVue.jsを使う

目次