Nuxt v2 + TypeScript 環境構築

最近Vue.jsを勉強してます。Nuxt v2が半年ほど前にアナウンスされ、先日ようやくリリースされました。良い機会なのでTypeScriptで開発できる環境構築をメモしておきます。Vueファイル内のHTMLはPug（Jade）にします。

Nuxt.js v2
TypeScript
eslint
nuxt-class-component
Pug（Jade）

Nuxt.js v2 setup

vue cli を使うのでインストールしておきます

$ npm i -g vue-cli

スターターテンプレートから始めます。Nuxtのインストールはこちらを参考にしてます。 https://ja.nuxtjs.org/guide/installation

$ vue init nuxt-community/starter-template example 
$ cd example 
$ yarn or npm i（以下yarn）

これを書いてる現時点ではversionが 1.0.0 のままなので、 yarn remove して再インストールします。

$ yarn remove nuxt $ yarn add nuxt

package.json を開いて確認してみてください

package.json

1 2	`- "nuxt": "^1.0.0" + "nuxt": "^2.0.0"`

yarn dev で起動してみる

$ yarn dev

eslintが読み込めないエラーがでます

Module build failed (from ./node\_modules/eslint-loader/index.js): TypeError: Cannot read property 'eslint' of undefined at Object.module.exports (/Users/cotapon//example/node\_modules/eslint-loader/index.js:148:18)

nuxt.config.json を開いて下記の箇所を変更します

nuxt.config.json

build: {
    /*
    ** Run ESLint on save
    */
    - extend (config, { isDev, isClient }) {
    -   if (isDev && isClient) {
 
    + extend (config) {
    +   if (process.server && process.browser) {

これで yarn dev すると動くので、 nuxt-edge 化することができました

TypeScriptに対応する

modules ディレクトリを作ってその中に typescript.js ファイルを作って下記を記入します https://github.com/nuxt/nuxt.js/issues/3256#issuecomment-385527847

/modules/typescript.js

module.exports = function() {
  this.nuxt.options.extensions.push('ts')
 
  this.extendBuild((config) => {
    const tsLoader = {
      loader: 'ts-loader',
      options: {
        appendTsSuffixTo: [/\.vue$/],
        transpileOnly: true,
      },
      exclude: [
        /vendor/,
        /\.nuxt/,
      ],
    }
    config.module.rules.push({
      test: /((client|server)\.js)|(\.tsx?)$/,
      ...tsLoader,
    })
    for(let rule of config.module.rules){
      if(rule.loader === 'vue-loader'){
        if(!rule.options.loaders){
          rule.options.loaders = {}
        }
        rule.options.loaders.ts = tsLoader
      }
    }
    if(config.resolve.extensions.indexOf('.ts') < 0){
      config.resolve.extensions.push('.ts')
    }
  })
}

nuxt.config.json を編集します

nuxt.config.json

1
2
3

modules: [
  '~/modules/typescript.js'
]

typescript と ts-loader をインストールします

command

1	`$ yarn add -D typescript ts-loader`

tsconfig.json がないとビルドできないので準備する

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es2015"],
    "module": "es2015",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "strictNullChecks": true,
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"]
    }
  }
}

eslintの設定

方向性的には下記のスライド10ページ目を参考にさせていただきます

https://speakerdeck.com/sue71/nuxt-and-typescript?slide=10

.eslintrc.json は下記を参考にさせていただきます

https://github.com/joe-re/eslint-vue-typescript-sample/blob/master/.eslintrc.json

.eslintrs.json

{
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "typescript-eslint-parser"
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended",
    "typescript"
  ]
}

必要なパッケージをインストールします

$ yarn add -D eslint-config-typescript eslint-plugin-typescript typescript-eslint-parser

nuxt-class-componentを使う

TypeScriptでコンポーネントを書きたい場合に使用する vue-class-component のNuxt版です

$ yarn add -D nuxt-class-component \[/code\]

page/index.vue は下記のような感じになります

page/index.vue

<script lang="ts">
import Vue from 'vue';
import Component from 'nuxt-class-component';
 
import AppLogo from '~/components/AppLogo.vue';
 
@Component({
    components: {
        AppLogo
    }
})
export default class Index extends Vue {
 
}
</script>

Pugに対応する

Nuxt v2はv1と比較して pug-loader が入ってないみたいなので、インストールしないと使えません