Adding buildDir to Nuxt configuration breaks Vuetify

Question

I've created a Nuxt app with "npx create-nuxt-app" command as stated in Nuxt documentation selecting Vuetify as one of the options. This creates a default Nuxt app which runs perfectly with Vuetify in webpack develop-mode. However when I add

buildDir: './../functions/nuxt'

to Nuxt configuration and run 'yarn dev' Vuetify becomes broken and render of the page stops whenever Vue reaches Vuetify and page goes blank.

These are main errors that browser gives

[Vuetify] Multiple instances of Vue detected
[Vue warn]: Error in beforeCreate hook: "Error: Vuetify is not properly initialized

Here is the nuxt.config.js

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

export default {
  mode: 'universal',
  head: {
    title: 'Frame of Nuxt2 application on Firebase',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
    ]
  },
  loading: { color: '#fff' },
  css: [
  ],
  plugins: [
  ],
  buildModules: [
    '@nuxtjs/eslint-module',
    '@nuxtjs/vuetify'
  ],
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa'
  ],
  axios: {
  },
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },
  buildDir: './../functions/nuxt',
  build: {
    extend (config, ctx) {
    }
  }
}

It seems I lack understanding of how Vuetify works with Nuxt and can't think of possible reason why building app not in default way (by default it build it inside of project in .nuxt folder) breaks it.

Would really appreciate any insight

Eduard Boiko Eduard Boiko · Accepted Answer · 2020-02-07T13:15:18

Allrighty, it appears root folder of build destination must have a vuetify in node_modules. Adding dependency solves this. In my case for 'functions' directory.

buildDir: './../functions/nuxt'

Adding buildDir to Nuxt configuration breaks Vuetify

1 Answers