Error Vuetify Not Properly Initialized

[anandkumar89]

Module version nuxtjs/vuetify 1.11.2

Describe the bug Error Vuetify not initialized properly in production. But works fine in dev mode. I have also tried creating a simple nuxt js app with vuetify and the error persists in prod

To Reproduce https://github.com/anandkumar89/nuxt-vuetify-bug.git

Steps to reproduce the behavior: Clone above repository and run following command.

cd functions/
npm install

cd ../src/
npm install 
npm run dev

cd ..
firebase emulators:start

Check console log in developer tools same is also hosted on firebase: https://eigenspace-3ebc0.web.app/

Expected behavior UI doesn't render properly. Can't interact with UI. e.g. can't select from dropdown.

Screenshots

Additional context Originally, I was using v-menu component. and it didn't render properly. Also, in another attempt I tried adding table (sortable, expandable) but can't interact with the rendered UI (can't sort, expand a row)

[anandkumar89]

I found that issue is with Treeshaking. Treeshaking is flagged true by default in production mode. To test, I commented treeShake line in node_modules/@nuxtjs/vuetify/dist/options.js as below and the error vanished.

import merge from 'deepmerge';
export const defaults = {
    customVariables: [],
    defaultAssets: {
        font: {
            family: 'Roboto'
        },
        icons: 'mdi'
    },
    optionsPath: undefined,
    // treeShake: process.env.NODE_ENV === 'production'      //<=====HERE
};
export default function initOptions(moduleOptions) {
    const options = merge.all([
        defaults,
        this.options.vuetify || {},
        moduleOptions || {}
    ]);
    return options;
}
//# sourceMappingURL=options.js.map

But without treeshake, file sizes are large.

[cooltaiwanesesam]

I'm also getting the same error in production on the latest versions.

// package.json
"nuxt": "^2.14.9",
"@nuxtjs/vuetify": "^1.11.2",

I noticed the plugin.js file generated in the build folder was pointing to 'vuetify/lib/framework' which does not exist. By removing the treeShake option, it now generated to the correct path. However, Vuetify bundle size is quite big.

// functions/.nuxt/vuetify/plugin.js

import Vue from 'vue'
- import Vuetify from 'vuetify/lib/framework'        // with treeshaking, but the /framework/ folder generated does not exist.
+ import Vuetify from 'vuetify'                      // without treeshaing, all works as normal but the Vuetify bundle size is big

import options from './options'

Vue.use(Vuetify, {
})

export default (ctx) => {
  const vuetifyOptions = typeof options === 'function' ? options(ctx) : options

  vuetifyOptions.icons = vuetifyOptions.icons || {}
  vuetifyOptions.icons.iconfont = 'mdi'

  const vuetify = new Vuetify(vuetifyOptions)

  ctx.app.vuetify = vuetify
  ctx.$vuetify = vuetify.framework
}

@anandkumar89 did you managed to find solution for your issue without removing treeShake option?