Nuxt(v2.4以降) + Typescriptセットアップ

17295 ワード
Sass pug nuxt.js TypeScript Sass テキストリンク

以前、Nuxt(v2.4未満) + Typescriptセットアップを書いたが、
Nuxtがv2.4以降公式にTypescriptをサポートしたので、新規のアプリケーションのセットアップをやってみた。

このエントリの結果できあがる構成の
2019/06/10 時点での主なモジュールのバージョンは次の通り。

  • nuxt: 2.8.1
  • typescript: 3.5.1
  • pug: 2.0.3
  • node-sass: 4.12.0

アプリケーションの作成

準備として、Node.js、Yarnのインストールが必要がだけど、そこは割愛。

次のコマンドでアプリケーションの初期化を行う。

$ yarn create nuxt-app nuxt-ts-example

上記コマンドを実行するといくつか質問される。
作成するアプリケーションの要件に応じて答えれば良いと思う。

ここでは次の様に答えて作業を進める。

? Project name nuxt-ts-example
? Project description My beautiful Nuxt.js project
? Use a custom server framework none
? Choose features to install Progressive Web App (PWA) Support, Linter / Formatter, Prettier, Axios
? Use a custom UI framework none
? Use a custom test framework jest
? Choose rendering mode Single Page App
? Author name HeRo
? Choose a package manager yarn

答え終わるとモジュールのダウンロードなどのアプリケーションの初期化が実行される。
処理が終了すると次のメッセージが出力される。

  To get started:

    cd nuxt-ts-example
    yarn run dev

  To build & start for production:

    cd nuxt-ts-example
    yarn run build
    yarn start

  To test:

    cd nuxt-ts-example
    yarn run test

上から順に開発サーバの起動方法、ビルド方法、テストの実行法を示している。

初期化されたアプリケーションをyarn run devを実行して確認してみる。
デフォルトのままだと、http://localhost:3000/にアクセスすれば次のページが開く。

Typescriptの導入

Typescript化に必要なモジュールを次のコマンドでインストールする。
nuxt-property-decoratorは必須ではないが、Typescriptを導入するならVueモジュールもClassで実装したほうがいいだろう。その場合に役立つ。

$ yarn add -D @nuxt/typescript
$ yarn add ts-node nuxt-property-decorator
$ touch tsconfig.json

tsconfig.jsonはyarn run devを実行すれば空ファイルに中身が書き込まれる。

nuxt.config.js -> nuxt.config.ts

必須ではないのだが、型チェックを受けられるのでnuxt.config.jsをTS化しておく。
公式ドキュメントに記載されている通り、拡張子を.tsに変更する。

$ mv nuxt.config.js nuxt.config.ts

型チェックのためにnuxt.config.tsを次の様に書き換える

nuxt.config.ts
import NuxtConfiguration from '@nuxt/config'

const config: NuxtConfiguration = {
  // コンフィグ
}

export default config

モジュールコードのTypescript化

これも必須ではないけれど、pages/index.vueのスクリプト部分をTS化してみる。

pages/index.vue
<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  }
}
</script>

上記部分を次の様に書き換えれば良い

pages/index.vue
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import Logo from '~/components/Logo.vue'

@Component({
  components: { logo: Logo }
})
class Index extends Vue {}
export default Index
</script>

Pugの導入

まずは必要なモジュールのインストール。
次のコマンドを実行する。

$ yarn add -D pug pug-plain-loader

あとは、各モジュールの<template>部分をPugで書き換えれば良い。
html2pug - convert your html code to pugなどを使うと簡単。

例としてpages/index.vueのPug化例を以下に示す。

pages/index.vue
<template>
  <div class="container">
    <div>
      <logo />
      <h1 class="title">
        nuxt-ts-example
      </h1>
      <h2 class="subtitle">
        My beautiful Nuxt.js project
      </h2>
      <div class="links">
        <a href="https://nuxtjs.org/" target="_blank" class="button--green"
          >Documentation</a
        >
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey"
          >GitHub</a
        >
      </div>
    </div>
  </div>
</template>

上記のHTMLを次の様に書き換えれば良い

pages/index.vue
<template lang="pug">
.container
  div
    logo
    h1.title
      | nuxt-ts-example
    h2.subtitle
      | My beautiful Nuxt.js project
    .links
      a.button--green(href="https://nuxtjs.org/" target="_blank") Documentation
      a.button--grey(href="https://github.com/nuxt/nuxt.js" target="_blank") GitHub
</template>

Sassの導入

必要なモジュールをインストールするには次のコマンドを実行する。

$ yarn add -D node-sass sass-loader

あとはやはり各コンポーネントの<style>部分をSASSで書き換えていくだけ。
css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets codeなどを使えばサクッと変換できる。

以下にpages/index.vueのSASS化の例を示す。

pages/index.vue
<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

上記を以下のように書き換えれば良い。

pages/index.vue
<style lang="sass">
.container
  margin: 0 auto
  min-height: 100vh
  display: flex
  justify-content: center
  align-items: center
  text-align: center

.title
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
  display: block
  font-weight: 300
  font-size: 100px
  color: #35495e
  letter-spacing: 1px

.subtitle
  font-weight: 300
  font-size: 42px
  color: #526488
  word-spacing: 5px
  padding-bottom: 15px

.links
  padding-top: 15px
</style>

まとめ

公式にTypescriptがサポートされたことにより、以前より簡単にTS化できるようになった。
PugもSASSも必要なモジュールをインストールするだけで特に設定せず使えて簡単。

参考