2019-08-21に投稿

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

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

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

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

create-nuxt-app.png

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

まとめ

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

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


だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント