【Laravel6】Vue.js3 + TypeScriptを導入してみた٩( 'ω' )و☆★

概要

Dockerで構築したLaravel6環境にVue.js3 + TypeScriptを導入してみました。

Laravel-MixがVue.js3に対応した(TypeScript導入まで)を存分に参考にしながらやったのですが、この記事の前段階で少し詰まるところがあったのでまとめておきます。

環境

$ composer -V
Composer version 2.0.9 2021-01-27 16:09:27

$ php artisan --version
Laravel Framework 6.20.16

$ npm list vue
/var/www/html
`-- vue@3.0.7

前提

• Laravelの環境構築が終わっている
• Docker環境じゃなくてもできると思いますが検証してないです
• エラー吐きつつ導入したのでこの中で不要な工程もあるかもですm(__)m

Laravel + Vue.jsのDocker環境を構築したい方は僕が過去に執筆した記事も併せて見てみてください。

• 絶対に失敗しないDockerでLaravel+Vueの実行環境（LEMP環境）を構築する方法〜前編〜
• 絶対に失敗しないDockerでLaravel6.8+Vueの実行環境（LEMP環境）を構築する方法〜後編〜

Laravel6にVue.js3 + TypeScriptの導入

Vue.js3のインストール

$ npm install vue@next -D

vue-loaderのインストール

$ npm install vue-loader@next -D

これをインストールしてなくてnpm run devでエラー吐きました。

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

$ npm install laravel-mix-vue3 -D

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

$ npm install @vue/compiler-sfc -D

TypeScript用の必要なモジュールをインストール

$ npm install @types/webpack-env typescript ts-loader -D

以降の作業

Laravel-MixがVue.js3に対応した(TypeScript導入まで)の通りにやれば完了です😁

（と言いながらlaravel-mix-vue3、@vue/compiler-sfc、TypeScript用の必要なモジュールのインストールも記事に載っています...）

package.jsonの中身

package.json

{
    // 略

    "devDependencies": {
        "@types/webpack-env": "^1.16.0",
        "@vue/compiler-sfc": "^3.0.7",
        "axios": "^0.21.1",
        "browser-sync": "^2.26.14",
        "browser-sync-webpack-plugin": "^2.3.0",
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.1",
        "laravel-mix-vue3": "^0.7.0",
        "lodash": "^4.17.19",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "ts-loader": "^8.0.18",
        "typescript": "^4.2.3",
        "vue": "^3.0.7",
        "vue-loader": "^16.1.2"
    }
}

※browser-sync、browser-sync-webpack-plugin等は別の機能用モジュールなので不要です。

まとめ

• 基本的に添付の記事がとてもわかりやすいのでそちらを見れば（多分）できますw
• TypeScriptでVueコンポーネントをimportしようとすると下画像のように赤波線が出て気持ち悪いけど解決方法がわからぬ...
  

参考

• Laravel-MixがVue.js3に対応した(TypeScript導入まで)
• laravel-mix-vue3