新しくNuxtプロジェクトを作成する Typescriptセットアップまで 2020年2月時点メモ

ja.nuxtjs.org

npx create-nuxt-app sampleapp

create-nuxt-app v2.10.1
✨  Generating Nuxt.js project in sampleapp
? Project name sampleapp
? Project description My first-rate Nuxt.js project
? Author name remoter
? Choose the package manager Npm
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools ESLint, Prettier
? Choose test framework None
? Choose rendering mode Single Page App
? Choose development tools jsconfig.json (Recommended for VS Code)

cd sampleapp
npm run build
npm run start

ブラウザで http://localhost:3000/ にアクセスすると以下の様に表示される

次にtypescriptのセットアップ

typescript.nuxtjs.org

npm install --save-dev @nuxt/typescript-build

VSCode立ち上げ

code .

buildModule追記

// nuxt.config.js
import colors from 'vuetify/es5/util/colors'

export default {
  mode: 'spa',
  /*
   ** Headers of the page
   */
  head: {
    titleTemplate: '%s - ' + process.env.npm_package_name,
    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 dev-modules
   */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    '@nuxtjs/vuetify',
    '@nuxt/typescript-build' // <= 追記
  ],
  /*
   ** Nuxt.js modules
   */
  modules: [],
  /*
   ** vuetify module configuration
   ** https://github.com/nuxt-community/vuetify-module
   */
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    // extend(config, ctx) {} ※ lintエラーになるためコメントアウト
  }
}

tsconfig.jsonを作成

// 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"
  ]
}

@typesディレクトリを作成しその中にvue-shim.d.tsを作成

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

これでTypescriptでvueのコンポーネントは作れる 試しに pages/text.vueを作成

<template>
  <div>TSET</div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  created() {
    console.log('typescript')
  }
})
</script>

npm run dev で 開発用サーバーを起動し http://localhost:3000/test にアクセスすると以下のように表示される

次に Runtimeのセットアップ

typescript.nuxtjs.org

npm install @nuxt/typescript-runtime

package.jsonのnuxtコマンドをnuxt-tsコマンドに変更します

{
  "name": "sampleapp",
  "version": "1.0.0",
  "description": "My first-rate Nuxt.js project",
  "author": "remoter",
  "private": true,
  "scripts": {
    "dev": "nuxt-ts", // 変更
    "build": "nuxt-ts build", // 変更
    "start": "nuxt-ts start", // 変更
    "generate": "nuxt-ts generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  },
  "dependencies": {
    "@nuxt/typescript-runtime": "^0.3.10",
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "@nuxt/typescript-build": "^0.5.8",
    "@nuxtjs/eslint-config": "^1.0.1",
    "@nuxtjs/eslint-module": "^1.0.0",
    "@nuxtjs/vuetify": "^1.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-plugin-prettier": "^3.0.1",
    "prettier": "^1.16.4"
  }
}

Lintの設定

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

.eslintrc.jsの編集

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    '@nuxtjs',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended',
    '@nuxtjs/eslint-config-typescript' // 追記
  ],
  plugins: [
    'prettier'
  ],
  // add your custom rules here
  rules: {
    'space-before-function-paren': 0
  }
}