Using Nuxt.js production build, snackbar isn't shown

[goraSi]

I'm using Nuxt.js latest version and Vuetify module for nuxt. Toast service works OK when running in development via npm run dev. But when i build application for production, toast messages aren't shown.

I have this in plugins/vuetify-toast.js

import Vue from 'vue'
import Vuetify, { VSnackbar, VBtn, VIcon } from 'vuetify/lib'
import VuetifyToast from 'vuetify-toast-snackbar'

Vue.use(Vuetify, {
  components: {
    VSnackbar,
    VBtn,
    VIcon
  }
})

Vue.use(VuetifyToast)

and in config/nuxt.js

  plugins: [
    '~/plugins/vuetify-toast.js',
  ],

Can you help me to identify what might be wrong in my code?

[lukasportal]

same happening here

[eolant]

Need a bit more details. Just tested it and toast shows for both both npm run build and npm run generate. Maybe it's you build configuration isn't setup properly? Do you use vuetify loader?

[goraSi]

I'm using Server-Side Rendered Deployment (aka. SSR). By default, Nuxt uses vue-loader, file-loader and url-loader webpack loaders. After some digging i looked in the broswer source code and v-snackbar is placed as last element of the body tag. Maybe this could be the problem.

`

...

</div>
<v-snackbar timeout="3000" color="info" bottom="true" right="true" role="alert" class="v-application vts"><!----> <div class="vts__message"></v-snackbar>`

[eolant]

Have you tried using ssr: false?

{ src: '~/plugins/vuetify-toast.js', ssr: false }

[goraSi]

I have tried with this option but the problem still exists. In html source i can see v-snackbar tag stacking and not removing as in dev build.

[eolant]

How does your nuxt.config.js looks like? And what command are you using to build it?

[goraSi]

I have attached nuxt.config.js. I'm using Adonis.js as server with commands npm run build: "cross-env NODE_ENV=production node ./ace nuxtbuild" and npm run start: "cross-env NODE_ENV=production node server.js". nuxt.zip

[eolant]

Not sure if server should matter much. In my nuxt.config.js I also use VuetifyLoaderPlugin. Can you try using it in your build options?

import VuetifyLoaderPlugin from 'vuetify-loader/lib/plugin'

...
build: {
    transpile: ['vuetify/lib'],

    plugins: [new VuetifyLoaderPlugin()],
}
...

and you'll need to add it to your package.json.

[goraSi]

I already have installed vuetify-loader 1.3.1 but folder lib/plugin does not exists.

[eolant]

Maybe you need to specify extension specifically plugin.js: plugin

[goraSi]

Ok i figured it out that the problem was in vuetify-loader option treeShake: true for production tree-shaking. I have disabled this and snackbar is working. Thanks for your help on this.

[eolant]

Awesome :)

[mean-cj]

Ok i figured it out that the problem was in vuetify-loader option treeShake: true for production tree-shaking. I have disabled this and snackbar is working. Thanks for your help on this.

Hello @goraSi

How do you work?

now i'm not work i will add vuetify-loader and add this

  build: {
    transpile: ['vuetify/lib'],
    plugins: [
      new VuetifyLoaderPlugin({
        treeShake: true
      })
    ],
 }

ERROR in ./pages/merchant/settings/contact.vue 28:7
Module parse failed: Identifier 'installComponents' has already been declared (28:7)   
File was processed with these loaders:
 * ./node_modules/vuetify-loader/lib/loader.js
 * ./node_modules/vuetify-loader/lib/loader.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.

" I have disabled this and snackbar is working." What do you mean?

thank you.

[goraSi]

Ok i figured it out that the problem was in vuetify-loader option treeShake: true for production tree-shaking. I have disabled this and snackbar is working. Thanks for your help on this.

Hello @goraSi

How do you work?

now i'm not work i will add vuetify-loader and add this

  build: {
    transpile: ['vuetify/lib'],
    plugins: [
      new VuetifyLoaderPlugin({
        treeShake: true
      })
    ],
 }

ERROR in ./pages/merchant/settings/contact.vue 28:7
Module parse failed: Identifier 'installComponents' has already been declared (28:7)   
File was processed with these loaders:
 * ./node_modules/vuetify-loader/lib/loader.js
 * ./node_modules/vuetify-loader/lib/loader.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.

" I have disabled this and snackbar is working." What do you mean?

thank you.

I'm using Nuxt.js which has a bit different config then using pure Vuetify Loader. Bellow is a snippet from @nuxtjs\vuetify module loading:

if (!options.treeShake) {
    this.options.css.push('vuetify/dist/vuetify.css');
}
// Enable tree-shaking with VuetifyLoader (https://github.com/vuetifyjs/vuetify-loader)
if (options.treeShake) {
    const VuetifyLoaderPlugin = this.nuxt.resolver.requireModule('vuetify-loader/lib/plugin');
    this.options.build.transpile.push('vuetify/lib');
    this.extendBuild((config) => {
        config.plugins.push(new VuetifyLoaderPlugin(typeof options.treeShake === 'object' ? options.treeShake.loaderOptions : {}));
    });
}

[mean-cj]

Hi @goraSi

vuetify-dialog-promise work for me.

Thank your share.

[votintsev]

TreeShaking must be enable for SASS variables and since nuxt/vuetify-module 2.0 there is no way to not use treeShaking you can't just set treeShake as false

But you can set manuall imports components in nuxt.config.js:

vuetify: {
    treeShake: {
      components: [
        'VSnackbar',
        'VBtn',
        'VIcon'
      ]
    },
  },

plugins/vuetify-toast-snackbar.js

import Vue from 'vue'
import VuetifyToast from 'vuetify-toast-snackbar'

Vue.use(VuetifyToast, {
  x: 'right',
  y: 'top',
  color: 'info',
  ...
  property: '$toasted',
})

export default ({ app }, inject) => {
  inject('toast', Vue.prototype.$toasted)
}

Note. You not need vuetify plugin. Also, remove related options from build section in nuxt.config.js

transpile: ['vuetify/lib'],
plugins: [new VuetifyLoaderPlugin()],