nuxtjsでtypescriptを利用できるように設定してみる

参考ページ

• 下記のサイトを参考に設定する

typescript.nuxtjs.org

typescriptの設定

• インストール

# npm i @nuxt/typescript-build @nuxt/types @nuxt/typescript-runtime

• nuxt.config.jsファイルのbuildModulesを下記のように修正する

  buildModules: [
    ['@nuxt/typescript-build', {
      typeCheck: true,
      ignoreNotFoundWarnings: true
    }]
  ],

• tsconfig.jsonファイルを作成して下記のように記述する

{
  "compilerOptions": {
    "target": "ES2018",
    "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"
  ]
}

• vue-shim.d.tsファイルを作成して下記のように記述する

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

• package.jsonを下記のように変更する

"scripts": {
  "dev": "nuxt-ts",
  "build": "nuxt-ts build",
  "generate": "nuxt-ts generate",
  "start": "nuxt-ts start"
},

eslintの設定

• インストール

# npm i -D @nuxtjs/eslint-config-typescript

• .eslintrc.jsファイルを作成して下記の記述をする

module.exports = {
  extends: [
    '@nuxtjs/eslint-config-typescript'
  ]
}

• package.jsonファイルのsciprtの箇所に下記の記述を追加する

  "scripts": {
    "lint": "eslint --ext .ts,.js,.vue ."
  },