Nuxtがv2.5から標準でTypeScriptに対応したので、Nuxt + TypeScriptでプロジェクトを始めようとした際、自分好みに使っていくにはけっこう設定等が必要だったので忘れないように手順を書き残そうと思います。なお、既存のNuxtアプリケーションをTS化するわけではなくあくまで新規プロジェクト作成を前提としています。
プロジェクト作成
まずは手っ取り早くcreate nuxt-appで新規プロジェクトを作成します。
$ yarn create nuxt-app nuxt-ts-sample
いろいろ聞かれます。
? Project name (nuxt-ts-sample)
Enterを押す。
? Project description (My pioneering Nuxt.js project)
Enterを押す。
? Use a custom server framework
❯ none
express
koa
adonis
hapi
feathers
micro
noneにカーソルをあててEnterを押す。
? Choose features to install
◉ Progressive Web App (PWA) Support
◉ Linter / Formatter
◉ Prettier
❯◉ Axios
全部チェックつけます。
? Use a custom UI framework (Use arrow keys)
❯ none
bootstrap
vuetify
bulma
tailwind
element-ui
buefy
これもなんでも。今回はnoneにします。
? Use a custom test framework (Use arrow keys)
none
❯ jest
ava
これもなんでも。jest選んでおきます。
? Choose rendering mode (Use arrow keys)
❯ Universal
Single Page App
これもなんでも。Universal選んでおきます。
? Author name (keiichirosoeda)
必要であれば書き換えて、Enterを押す。
? Choose a package manager (Use arrow keys)
npm
❯ yarn
yarn派なのでyarnを選んでEnter。
ようやくソースコードがダウンロードされます。
まずはビルド
srcディレクトリを作成
個人的に、srcディレクトリにコードをまとめるのが好きなので、各ディレクトリをsrcに移動します。
$ cd nuxt-ts-sample
$ mkdir src
$ mv assets components layouts middleware pages plugins server static store test src
nuxt.config.jsでソースのディレクトリを指定。
nuxt.config.jsに一行加えてsrcDirを変更します。
module.exports = {
srcDir: 'src/',
// ...
};
一度ビルドして立ち上げてみます。
$ yarn dev
http://localhost:3000/ へアクセスし、以下画面がでれば問題ないです。
TypeScript化
では早速TypeScriptで書きかえていきます。
必要なパッケージをインストール
まずはじめに必要なパッケージをインストールします。create nuxt-appでプロジェクト作成すると、2.4系のnuxtがインストールされてしまうので（2019年3月現在）、2.5系をインストールするためnuxtも再度yarn addします。
$ yarn add nuxt vue-property-decorator
$ yarn add -D @nuxt/typescript
tsconfig.jsonを作成してビルド
yarn devすると、TypeScriptの設定ファイルが自動で書き込まれます。そのためにまず元となるtsconfig.jsonを作成します。
$ echo {} > tsconfig.json
ビルドします。
$ yarn dev
以下のようにtsconfig.jsonが上書きされます。
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"lib": [
"esnext",
"esnext.asynciterable",
"dom"
],
"esModuleInterop": true,
"experimentalDecorators": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noImplicitAny": false,
"noEmit": true,
"baseUrl": ".",
"paths": {
"~/*": [
"*"
],
"@/*": [
"*"
]
},
"types": [
"@types/node",
"@nuxt/vue-app"
]
}
}
tsconfig.jsonを修正
ソースコード内で~/xxx, ~@xxxのようにディレクトリ指定できるようにTSのコンパイル設定を修正します。
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"~/*": [
"*"
],
"@/*": [
"*"
]
},
}
}
pages/index.vueをTS化
// ...
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Logo from '~/components/Logo.vue'
@Component({
components: {
Logo
}
})
export default class Index extends Vue {
//
}
</script>
// ...
ESlintの設定を修正
TypeScriptで書けるようにESlintの設定を修正します。
プラグインのインストール
$ yarn add -D @typescript-eslint/eslint-plugin
.eslintrc.jsを修正。
module.exports = {
// ...
parserOptions: {
parser: '@typescript-eslint/parser'
},
// ...
plugins: [
'prettier',
'@typescript-eslint' // 追加
],
// ...
rules: {
'nuxt/no-cjs-in-config': 'off',
'no-unused-vars': 'off',
'no-unused-expressions': 'off'
},
// ...
}
再ビルド
$ yarn dev
再度画面が立ち上がれば、Nuxt + TypeScriptアプリケーションのひな形完成です！
おわりに
lintの設定はお好みで追加・変更していただければと。
具体的なTypeScriptでの実装についても、近いうちに書けたらと思います。vuexなど。