Nuxt.js 2.9をちらっと触ってみた

今日Twitterを見ていると唐突にNuxt.js 2.9がリリースされた旨がツイートされていました。

Nuxt v2.9.0 is out 🥳- Typescript support now externalised (https://t.co/AlvY55s0cC)- Vue Meta upgraded to v2.0- 10+ bug fixes 🐞- 10+ new features 🚀https://t.co/vEfQoUWh8l pic.twitter.com/qwmSsEfkxJ

— Nuxt.js (@nuxt_js) August 20, 2019

特にこれが気になりました。

Typescript support now externalised

TypeScriptサポートの外部パッケージ化？

ということでちょっと試してみました。

create-nuxt-app

create-nuxt-appのリポジトリを見てみたところ既に2.9がありました（というか既に2.9.2まで進んでいるようです）

ということで普通にcreate-nuxt-appでさっと初期化します。

yarn create nuxt-app nuxt-typescript

とりあえずそのまま実行

ビルド。ビルド中の画面もいつからか出るようになっているので良いですよね。

で、まあ普通にいつもの画面が表示されます。

TypeScriptを導入

で、先程のツイートのリンクにNuxt.jsのTypeScriptのドキュメントページが含まれていました。

Nuxt TypeScript

こちらを参考に設定していきます。まず、@nuxt/typescript-buildをインストールします。

yarn add --dev @nuxt/typescript-build

そしてnuxt.config.jsにも設定を追加します。

export default {
  buildModules: ['@nuxt/typescript-build']
}

そして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"
  ]
}

Componentを追加

Componentのサンプルもありますのでこれを追加します。

Components | Nuxt TypeScript

せっかくなのでまだ使ったことがなかったFunction APIで試してみます。まずインストール。

yarn add vue-function-api

下記を実行しろと書いてあるのでプラグインに追加します。

import Vue from 'vue';
import { plugin } from 'vue-function-api';

Vue.use(plugin);

これをplugin/function-api.jsとして保存し、nuxt.config.jsに追記します。

  plugins: ['~/plugins/function-api.js'],

で、あとはあれこれやって下記のようなUserDetail.vueというコンポーネントを作成します。

<template>
  <div>
    Name: {{ fullName }}
    Message: {{ message }}
  </div>
</template>


<script lang="ts">
import Vue from 'vue'
import { computed, value, createComponent, PropType } from 'vue-function-api'
import User from '../models/User'

interface Props {
  user?: User
}

export default Vue.extend({
  name: 'YourComponent',

  props: {
    user: Object
  },

  setup(props: Props) {
    console.log(props)
    const fullName = computed(() =>
      props.user ? `${props.user.firstName} ${props.user.lastName}` : ''
    )
    const message = value('This is a message')

    return {
      fullName,
      message,
      user: props.user
    }
  }
})
</script>

Userインターフェースは呼び出し元でも使うのでmodels/User.tsというファイルに保存しておきます。

interface User {
  firstName: string
  lastName: number
}

そして、pages/index.vueから呼び出します。scriptにはlang="ts"を付けます。（lastNameは数値みたいですね）

    <UserDetail :user="user"></UserDetail>
  </div>
</template>

<script lang="ts">
import Logo from '~/components/Logo.vue'
import UserDetail from '~/components/UserDetail.vue'
import User from '../models/User'

export default {
  components: {
    Logo,
    UserDetail
  },
  data() {
    const user: User = {
      firstName: 'Taro',
      lastName: 777
    }
    return { user }
  }
}
</script>

で、実行してみると表示されました。

一番気になってたテンプレートの補完は……効かないかもです。一応Object APIとClass APIも試してみましたが。（なにか方法があるのかもしれませんが）

ちなみにthis.$routerとか以前（もしかしたらだいぶ前？かもですが）エラーになってた気がするんですがちゃんと補完されるみたいですね。

create-nuxt-appのTypeScript対応は？

GitHubで個人的に追ってるcreate-nuxt-appのissueにも「TypeScript対応の機運キタコレ！」と書き込みがありました。

Typescript support · Issue #23 · nuxt/create-nuxt-app

はやく対応が進むといいですね。

まとめ

さほど大きなアップデートではなかったかもですが、とにかくTypeScriptの設定方法が公式に書かれていて便利だということを知れたりfunctions-apiを触ったりということを試せてよかったです。

というかバージョン上がりまくりでわけわからないですね。何にしろ今後にも期待です。