Nuxt2.6でTypescriptを使ってみる

#はじめに
Nuxt2.6でTypescriptに対応されたようです。

今まではnuxt-tsを使ってTypescriptに対応していました
Nuxt2.6からはTypescriptに対応されたので、nuxtでできるということ！
実際に使ってみました。

#0.環境

下記のバージョンで動作しています。

$ npm -version
6.9.0

$ node -v
12.1.0

$ nvm --version
0.34.0

#1.初期化

nuxt-sampleというフォルダを作成して、npm installでpackage.jsonを作成します。

$ mkdir nuxt-sample
$ cd nuxt-sample

$ npm init

#2.npxインストール

npxをインストールされていない方は、下記のようにインストールしてください。

$ npm install -g npx

#3.create-nuxt-app

Nuxt.js プロジェクトの雛形を作成します。

$ npx create-nuxt-app

自分の環境では、nuxtのバージョンが2.4になっていました。
バージョンを2.6へ上げてみたいと思います。

#5.ncuをインストールする

nuxtのバージョンを上げるためにnpm-check-updatesをインストールします。

$ npm install -g npm-check-updates

#6.nuxtのバージョンを2.6へ更新する

ncuを使用して、nuxtを更新しましょう。

$ ncu    //更新するものを確認する
$ ncu -u //package.jsonを更新する
$ npm install //更新したものをインストールする

#7. Typescriptをインストール
必要なものをインストールします。

$ npm install typescript ts-node @nuxt/typescript vue-property-decorator

#8. tsconfig.jsonの作成

nuxt-sample/tsconfig.jsonを作成します。

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "types": [
      "@types/node",
      "@nuxt/vue-app"
    ],
    "paths": { "@/*": [ "./*" ], "~/*": [ "./*" ] },
    "experimentalDecorators": true   
  },
}

#9. nuxt.config.tsへ変更
nuxt.config.jsからnuxt.config.tsへ変更します。

中身は下記のように変更します。

nuxt.config.ts

import NuxtConfiguration from '@nuxt/config'

const config: NuxtConfiguration = {
  // Type or Press `Ctrl + Space` for autocompletion
}

export default config

#10 Typescriptへ変更

scriptにlang="ts"とつけると、typescriptとして使えます。
nuxt-sample/pages/index.vueを下記のように変更します。

index.vue

<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>

nuxt-sample/components/Logo.vueに下記を追加します。

Logo.vue

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class Logo extends Vue {
}
</script>

#11. 動作

ローカルホスト上で動作してみましょう。

npm run dev

http://localhost:3000/へアクセスすると、NuxtがTypescriptで動作しています。

#おわりに
最初の設定をクリアするとtypescriptとして動作するようになるので、nuxtも使いやすくなりますね。
node.jsはバージョンによって動作しないことが多いので、バージョンをしっかりと管理することが大事かと思います。