Laravel6でVue.js3を使うための設定方法

Laravel6のインストール方法

以前の記事で紹介しているので、リンクを張って割愛とする。
Laravel6の開発環境の構築 | ヒッキー予備軍のブログ

Laravel6環境にVue.js3のインストール方法

まずは、この記事を書く上で参考にさせていただいたページへのリンクはこちらです。

【Laravel6】Vue.js3 + TypeScriptを導入してみた٩( 'ω' )و☆★ – Qiita
Laravel-MixがVue.js3に対応した(TypeScript導入まで) – Qiita

1. Vue.js3 のインストール

   npm install --save-dev vue@next

2. vue-loader のインストール

   npm install --save-dev vue-loader@next

3. laravel-mix-vue3 のインストール

   npm install --save-dev laravel-mix-vue3

4. @vue/compiler-sfc のインストール

   npm install --save-dev @vue/compiler-sfc

5. cross-env のインストール

   npm install --save-dev cross-env

6. “resource/js/app.js” の編集

   require('./bootstrap');
   
   import { createApp } from 'vue'
   import App from './App.vue'
   
   createApp(App).mount('#app')

7. “resource/js/App.vue” の作成

   <template>
     <div>Hello World</div>
   </template>

8. “webpack.mix.js” に追記

   
   const mix = require('laravel-mix');
   
   require('laravel-mix-vue3');
   
   (略)
   
   //mix.js('resources/js/app.js', 'public/js');
   mix.vue3('resources/js/app.js', 'public/js');
   mix.sass('resources/sass/app.scss', 'public/css');

9. 設定を反映

   npm install && npm run dev

Typescript は今回、見送ることにしているので掲載しておりません。悪しからず。。。