Vuetify 2 isDark issue

[cartoonmadrasah]

Hi. I can't seem to get Vuetify (2.0) on Gridsome (0.6.7) right. I followed the instructions, added vuetify, whitelisted it in the server config and then when I place a test component, I am not seeing any colors:

The error in the console shows as:
Error in getter for watcher "isDark": "TypeError: this.$vuetify.theme is undefined".

On build I get this error:

I did some research on this issue, and they say I need to wrap in my Default.vue . But when I am wrapping it the screen becomes totally blank.

I also suspect it might have to do something with Vuetify 2.0 and Bootstrapping the Vuetify Object but cant seem to make it right.

Kindly help and guide. Thank you.

[cartoonmadrasah]

Just checked Vuetify version 1.5.16 works fine but version 2.0.5 breaks (need a solution):

[cartoonmadrasah]

Ok i got it working. Here's what I did:

In Default.vue I added this code:

`<script>
import Vuetify from 'vuetify'

export default {
vuetify: new Vuetify(),
}
</script>`

And for build I added this code to gridsome.server.js:

`const nodeExternals = require('webpack-node-externals');

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

[0xDaksh]

I think the right way to do this for vuetify 2 is

main.js

import DefaultLayout from '~/layouts/Default.vue'
import Vuetify from 'vuetify'
import "vuetify/dist/vuetify.min.css"

export default function (Vue, { appOptions }) {
  // Set default layout as a global component
  Vue.use(Vuetify);
  appOptions.vuetify = new Vuetify({});
  Vue.component('Layout', DefaultLayout);
}

layouts/Default.vue

  <v-app>
    <v-content>
      <!-- your code here -->
      <v-container fluid>
        <slot />
      </v-container>
    </v-content>
  </v-app>

[EmmyMay]

How do you add vuetify to gridsome

[hacknug]

How do you add vuetify to gridsome

https://gridsome.org/docs/assets-css/#vuetify