新しくNuxtプロジェクトを作成する よく使うライブラリ導入 2020年2月時点メモ

前回の記事に引き続きでよく使うライブラリの導入を行う

remoter.hatenablog.com

node-sass sass-loader

sassを使えるように

npm install --save-dev node-sass sass-loader

これだけでsassが使えるようになるが今ままだとprettierのエラーがでるのコメントアウトなりして対応

<template>
  <div class="hoge">
    TSET
  </div>
</template>

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

<style lang="sass" scoped>
.hoge
  font-size: 40px
</style>

pug pug-plain-loader

pugを使えるように

npm install --save-dev pug@2.0.3 pug-plain-loader

これでpugが使えるようになったのでpugで書き直すと以下のように

<template lang="pug">
  .hoge TEST
</template>

// 省略

nuxt-property-decorator

github.com

npm i -S nuxt-property-decorator

nuxt.config.jsを編集

import colors from 'vuetify/es5/util/colors'

export default {
  mode: 'spa',
  // 省略　以下 編集,追記
  build: {
    babel: {
      plugins: [
        ['@babel/plugin-proposal-decorators', { legacy: true }],
        ['@babel/plugin-proposal-class-properties', { loose: true }]
      ]
    }
  }
}

nuxt-property-decoratorでtest.vueを書き直すと以下のようになる

<template lang="pug">
  .hoge TEST
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

@Component({ components: {} })
class Test extends Vue {
  created() {
    console.log('typescript')
  }
}
export default Test
</script>

<style lang="sass" scoped>
.hoge
  font-size: 40px
</style>

tsconfig.jsonを編集

{
  "compilerOptions": {
    "experimentalDecorators": true, // 追記
    "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"
  ]
}

この例では全く恩恵はないですね・・・

ここから先はプロジェクトや環境によって - vuex-module-decorators - vee-validate - nuxt-fontawesome などを導入していくことが多い