Nuxt.jsとTypeScriptで開発環境を作るときのまとめ。(2019/9/5時点)
お急ぎの方は、
記事中の作業を行ったものをnuxt.ts-templateとしてGitHubのリポジトリに上げたので、cloneないしForkして使ってほしい。
目指すもの
create nuxt-app したときと同じ環境で、下記のものが使えること。
すぐにNuxt.jsとTypeScriptを用いて開発を始められる環境を構築する。
- Nuxt.js v2.9.2
- TypeScript
- ESLint
- nuxt-property-decorator
nuxt-property-decorator (vue-property-decorator)
Nuxt.jsとTypeScriptを組み合わせるときは、nuxt-property-decorator(vue-property-decorator)の利用が推奨されている。^1
もともとのNuxt.jsとは書き方が変わる。参考文献にいくつか載せてあるので、もともとの書き方と比較しながら慣れると良さそう。^2
今回は最後にインストールするので、一つ前のESLintまでで止まればこれを使わない環境も構築できる。
手順
大まかには次の流れで進む。
いくつかハマりどころがあったので、私の環境でうまく行った手順を残しておく。
(特にESLintに文句を言われることが多く、最初いきあたりばったりで進めていたら沢山のパッケージをインストールしてしまった。
この記事は、その後不要なものがあまり入らないようにやり直した内容の記録である。)
- yarn create nuxt-app
- TypeScriptを入れる
- vue-property-decoratorを入れる
- ESLintを入れる
1. create nuxt-app
Nuxt.jsで環境構築するときにお決まりのcreate-nuxt-app。
yarnだと、 $ yarn create nuxt-app hogehoge とする。
$ yarn create nuxt-app nuxt.ts-template
$ cd nuxt.ts-template/
$ yarn dev
2. Install TypeScript
まず、TypeScriptに関するパッケージをインストールする。
$ yarn add -D @nuxt/typescript-build
$ yarn add @nuxt/typescript-runtime @nuxt/types
$ mv nuxt.config.js nuxt.config.ts
$ touch tsconfig.json
TypeScriptに合わせて以下の設定ファイルを2つ、ソースを3つ書き換える。
package.jsontsconfig.json (新たに作成)nuxt.config.tsindex.vueLogo.vue
./package.json
...
"scripts": {
- "dev": "nuxt",
- "build": "nuxt build",
- "start": "nuxt start",
- "generate": "nuxt generate"
+ "dev": "nuxt-ts",
+ "build": "nuxt-ts build",
+ "start": "nuxt-ts start",
+ "generate": "nuxt-ts generate"
},
...
./tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"lib": [
"esnext",
"esnext.asynciterable",
"dom"
],
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"baseUrl": ".",
"paths": {
"~/*": [
"./*"
],
"@/*": [
"./*"
]
},
"types": [
"@types/node",
"@nuxt/types"
]
},
"exclude": [
"node_modules"
]
}
./nuxt.config.ts
+import {Configuration} from '@nuxt/types'
-export default {
+const nuxtConfig: Configuration = {
...
buildModules: [
+ '@nuxt/typescript-build'
],
...
}
+module.exports = nuxtConfig
./pages/index.vue
-<script>
+<script lang="ts">
./components/Logo.vue
...
</template>
+
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+})
+</script>
+
<style>
...
$ yarn dev
3. ESlint
ESLintと関連パッケージをインストールする。(今回はcreate nuxt-appでESLintをインストールしていないのでESLint自体もここでインストールする。)
$ yarn add eslint-config eslint
$ yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser @nuxtjs/eslint-config-typescript
$ touch .eslintrc.js
ESLintの設定を以下の3ファイルに記述する。
package.jsonnuxt.config.ts.eslintrc.js
package.json
...
"scripts": {
"dev": "nuxt-ts",
"build": "nuxt-ts build",
"start": "nuxt-ts start",
- "generate": "nuxt-ts generate"
+ "generate": "nuxt-ts generate",
+ "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
+ "lint:fix": "eslint --ext .ts,.js,.vue --ignore-path .gitignore . --fix"
},
...
nuxt.config.ts
...
build: {
/*
** You can extend webpack config here
*/
+ /*
extend (config, ctx) {
}
+ */
...
.eslintrc.js
module.exports = {
plugins: ['@typescript-eslint'],
parserOptions: {
parser: '@typescript-eslint/parser'
},
extends: [
'@nuxtjs/eslint-config-typescript'
],
rules: {
'@typescript-eslint/no-unused-vars': 'error'
}
}
$ yarn lint:fix
$ yarn dev
4.nuxt-property-decorator
nuxt-property-decoratorをインストールする。(vue-property-decoratorでも良いかもしれない。)
$ yarn add nuxt-property-decorator
nuxt-property-decoratorに合わせて2ファイルを変更する。
tsconfig.json (デコレータの使用を宣言する。)index.vue (デコレータを使った書き方に修正する。)
./tsconfig.json
...
"compilerOptions": {
...
"types": [
"@types/node",
"@nuxt/types"
- ]
+ ],
+ "experimentalDecorators": true
},
...
./pages/index.vue
...
<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
import Logo from '~/components/Logo.vue'
-export default {
+@Component({
components: {
Logo
}
-}
+})
+export default class Index extends Vue {
+}
</script>
...
$ yarn dev
お疲れさまでした。
参考
重要参考文献
- Qiita Nuxt.js 2.9でのTypeScript対応
- Nuxt TypeScript Setup
その他の参考文献
- Nuxt.js インストール ... yarn create nuxt-app について
- GitHub eslint-config ... eslint-configのセットアップ
- デコレータ | TypeScript 日本語ハンドブック | js STUDIO ...
experimentalDecoratorsについて
- TypeScriptではじめるVueコンポーネント（vue-class-component）... vue-property-decorator(nuxt-property-decorator)を使った
@Componentデコレータの書き方
- Nuxt.js+ExpressのプロジェクトをTypeScript化する ... nuxt-property-decoratorを使った
@Componentデコレータの書き方
- はじめてのvue-property-decorator ... vue-property-decorator(nuxt-property-decorator)を使ったデコレータの書き方
- ^1: Nuxt.js TypeScriptサポートに書かれている。(Nuxt.js v2.8までの記述のため、このページの内容のとおりではv2.9.2ではうまく行かない)
- ^2: GitHub vue-property-decoratorに記載がある。
景品で頂いたEcho Show5。スマートスピーカーを買うタイミングを失っていたのでありがたい。