Nuxt.js v2.8.1 と TypeScript 3.5.3でプロジェクトを作ってみたときのメモ

2019/07/09に公開されているnuxt.jsのバージョンに合わせて内容を更新

準備

1. nodebrewでnodeのv10.16.0にあげる
2. npm i -g npmでnpmを最新にしておく
3. yarn global add typescriptをして3.5.3にあげる

参考にした情報一覧

https://nuxtjs.org/guide/typescript/

プロジェクト生成

• npx create-nuxt-app myproject

✨  Generating Nuxt.js project in /Users/自分/myproject
? Project name myproject
? Project description My awe-inspiring Nuxt.js project
? Author name myname
? Choose the package manager Yarn
? Choose UI framework Buefy
? Choose custom server framework Express
? Choose Nuxt.js modules Axios
? Choose linting tools ESLint
? Choose test framework Jest
? Choose rendering mode Universal (SSR)

必要なものを追加していく

# できたディレクトリに移動
cd myproject
# typescript用の依存ファイルを追加
yarn add -D @nuxt/typescript
yarn add ts-node
# eslint用の設定を追加
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

# ファイル作成（初回起動時に自動で書き込まれるので空ファイルでOK）
touch tsconfig.json

nuxt.config.jsをnuxt.config.tsにリネームして中身を修正する

import NuxtConfiguration from '@nuxt/config'

const config: NuxtConfiguration = {
  // タイプするか `Ctrl + Space` を押すとオートコンプリートできます
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://buefy.github.io/#/documentation
    'nuxt-buefy',
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/eslint-module'
  ],
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
  },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  }
}

export default config

初回起動（ここでtsconfig.jsonに自動で設定が書き込まれる）

yarn nuxt dev -o

書き込まれたtsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/vue-app"
    ]
  }
}

eslintの設定をtypescript用に修正

• .eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  plugins: ['@typescript-eslint'],
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended'
  ],
  // add your custom rules here
  rules: {
    'nuxt/no-cjs-in-config': 'off',
    '@typescript-eslint/no-unused-vars': 'error'
  }
}