Skip to content

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 を開いて確認してみてください
- "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 を開いて下記の箇所を変更します
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
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 を編集します
modules: [
  '~/modules/typescript.js'
]
typescriptts-loader をインストールします
$ yarn add -D typescript ts-loader
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
{
  "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
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 が入ってないみたいなので、インストールしないと使えません
$ yarn add pug pug-plain-loader
<template lang="pug">
  // ここにPug形式でコーディング
</template>
[`evernote` not found]
Pocket

Be First to Comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です