Vuetifyが2.0にアップデートして、ようやくgridsome.jsへの導入方法が分かったので共有してみたり

参考

まもなく、公式にアップされそう
とりあえず、半分は自分用のメモという事で

めちゃくちゃ迷走したが、結局何の事は無い

appOptionsに追加するだけだった

main.js

import DefaultLayout from '~/layouts/Default.type1.vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import colors from 'vuetify/es5/util/colors'



export default function (Vue, { router, head, isClient, appOptions }) {

  // use
  Vue.use(Vuetify)

  appOptions.vuetify = new Vuetify({
    customVariables: ['~/assets/css/variables.scss'],
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.grey.darken4,
          accent: colors.shades.black,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  })

(省略)......
  
}

gridsome.server.jsも少しいじる

その前にwebpack-node-externalsモジュールをインストール

npm i webpack-node-externals

gridsome.server.js

const nodeExternals = require('webpack-node-externals')
// Server API makes it possible to hook into various parts of Gridsome
// on server-side and add custom data to the GraphQL data layer.
// Learn more: https://gridsome.org/docs/server-api

// Changes here require a server restart.
// To restart press CTRL + C in terminal and run `gridsome develop`

module.exports = function (api) {
  
  api.chainWebpack((config, { isServer }) => {
    if (isServer) {
      config.externals([
        nodeExternals({
          whitelist: [/^vuetify/]
        })
      ])
    }
  })

  (省略)......
}

こんだけでOKのようです!
sass-loaderとかnode-sassはいる