nuxt2 + typescript + vuetify

● インストール

npx create-nuxt-app my-app

vuetify を選択しておきます

yarn add --dev @nuxt/typescript-build @nuxt/types
yarn add --dev nuxt-property-decorator
yarn add --dev vue-mixin-decorator

// Vue2 の 場合は version3 を入れます
yarn add vee-validate@3

https://github.com/justrhysism/vue-mixin-decorator

nuxt.config.js に こちらが追加されています

  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
  ],

● tsconfig.json

vuetify を追加する

    "types": ["@nuxt/types", "@nuxtjs/axios", "@types/node", "vuetify"]

● ホットリロード

nuxt.config.js

  // hot reload
  webpack: (config) => {
    config.watchOptions = {
      aggregateTimeout: 100,
      poll: 300,
      ignored: ["/node_modules/", "/.nuxt/", "/dist/"],
    }
  } ,

● テーマをデフォルト light に設定

nuxt.config.ts

dark: false にします

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,

続きはこちらを行うと理解が深まります
https://tech.mof-mof.co.jp/blog/nuxt-vuetify/

nuxt/content
https://bit.ly/3DuvM2p

No.2215
09/16 15:56

edit