Help us understand the problem. What is going on with this article?

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

以前、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/にアクセスすれば次のページが開く。

image.png

Typescriptの導入

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

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

tsconfig.jsonyarn 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も必要なモジュールをインストールするだけで特に設定せず使えて簡単。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした