はじめに
Laravel8+Vue3+TypeScriptの開発環境構築方法についての記事となります。
紹介するのはlaravel/uiを使用した方法となります。
環境構築
Laravelプロジェクト作成
記事投稿時点ではLaravelの最新は8系ですが、
9系リリースされても8系でプロジェクト作成されるように末尾でバージョン指定しています。
composer create-project laravel/laravel example-app "8.*"
Vueインストール
laravel/uiを使用してLaravelプロジェクトにVueをインストールします。
composer require laravel/ui
認証機能が不要であれば--authは外してください。
php artisan ui vue --auth
Vue2からVue3に変更
laravel/uiでインストールしたvueが2系なので3に変更する必要あります。
(一応package.jsonでVueのバージョンを確認してください)
vueはバージョン指定でnextを指定するとvue3系をインストールすることができます。
vuexやvue-router等のパッケージも同様
npm uninstall vue-template-compiler
npm install -D vue@next vue-loader@~16 @vue/compiler-sfc
TypeScriptインストール&設定
必要パッケージインストール
npm install -D typescript ts-loader
tsconfig.json新規作成
TypeScriptコンパイル時の設定ファイルですが、
このファイルが無ければコンパイルができないのでプロジェクト直下に作成します。
(下記内容はVueの公式推奨のものを使用)
{
"compilerOptions": {
"target": "es5",
"strict": true,
"module": "es2015",
"moduleResolution": "node"
}
}
app.js修正
app.jsをapp.tsに拡張子変更して内容をVue3で書き直します。
import { createApp } from "vue"
import App from "./App.vue"
createApp(App).mount("#app")
App.vueは各自好きな様に作成して頂いて構いませんが、
サンプルとして後述しています。
shims-vue.d.tsファイルを新規作成
.vueファイルを認識できるようにshims-vue.d.tsを作成します。
こちらも記述しないとimportでエラーが発生します。
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
mix修正
コンパイル対象ファイルを指定するjsメソッドをtsメソッドに変更し、
先程app.jsの拡張子変更したので.tsに変更します。
- mix.js('resources/js/app.js', 'public/js')
+ mix.ts('resources/js/app.ts', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css')
動作確認
環境構築は完了したので最低限Vue3とTypeScriptが動作するか確認します。
ルーティング
Route::get('/', function () {
return view('index');
});
ビュー
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app"></div>
</body>
</html>
Vue
<template>
<div>
{{ message }}
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue"
export default defineComponent({
setup(){
const message = ref<string>("Hello TypeScript")
return {
message
}
}
})
</script>
以上となります。
不足がありましたらご指摘頂けたら幸いです。