Nuxt.jsで使っているVuetifyのバージョンを1系から2系にアップグレードする

Nuxt.js 2.8.1
Vuetify 1.5.16
TypeScript 3.5.3

Vuetifyが大幅にアップデートしていたので、やったことをメモ

やったこと

既存のVuetifyやVuetifyLoader、sassやnode-sassをyarn remove

yarn remove @nuxtjs/vuetify vuetify vuetify-loader node-sass sass-loader

代わりに@nuxtjs/vuetifyをyarn addする

yarn add --dev @nuxtjs/vuetify

nuxt.config.tsの変更

  // @nuxtjs/vuetifyを追加
  devModules: ['@nuxtjs/vuetify'],
...
  // 1系のグローバルCSS（~/assets/style/app.styl）を削除
  css: [], 
...
  build: {
    transpile: ['vuetify/lib'],
    // VuetifyLoaderを削除する
    // plugins: [new VuetifyLoaderPlugin()],
    loaders: {
    // stylusは不要
    //  stylus: {
    //    import: ['~assets/style/variables.styl']
    //  }
    // sassのindentedSyntaxをtrueにセット
      sass: {
        indentedSyntax: true
      }
    },

plugin/vuetify.jsの修正

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import colors from 'vuetify/es5/util/colors'

// Vue.use(Vuetify, {...})を以下のように修正
Vue.use(Vuetify)
export default new Vuetify({...})

tsconfig.jsonに@nuxtjs.vuetifyを追加
機能の書き換え（Framework以降の章を参照）

Release v2.0.0 · vuetifyjs/vuetify · GitHub

参考にした手順

設定中に出たエラー

上記の通りにやれば出ないと思う

 ERROR  in ./node_modules/vuetify/src/styles/main.sass

Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: Cannot find module 'node-sass'

これっぽい

github.com

[Bug Report] Cannot startup with Vuetify2.0 (Sass file error) · Issue #7950 · vuetifyjs/vuetify · GitHub

これに従う