Help using this module within a PWA app in offline mode

[ShaggyTech]

Module version
1.9.0

Describe the bug
I have a nuxt application that I build using nuxt generate. It uses the @nuxtjs/pwa module and therefore a service worker. My app is working great in development mode. However, in production mode I get the following error:

Error: Vuetify is not properly initialized,...

If i use the following in my nuxtconfig:

...
 vuetify: {
    optionsPath: '~/plugins/vuetify.js',
    treeShake: {
      directives: ['Ripple'],
      components: [
        'VApp',
        'VAppBar',
        'VBtn',
        'VCard',
        'VContainer',
        'VContent',
        'VCol',
        'VIcon',
        'VProgressLinear',
        'VRow',
      ]
    },
    defaultAssets: false
  },
  buildModules: ['@nuxtjs/vuetify'],

I've also tried the following nuxtconfig:

...
 vuetify: {
    optionsPath: '~/plugins/vuetify.js',
    treeShake: false, // and also treeShake: true or even omitting it entirely
    defaultAssets: false // or true, either way throws the error in prod
  },
  buildModules: ['@nuxtjs/vuetify'],

I have been scratching my head over this for a week now and can't seem to understand this section of the readme as I think this is where my issue stems from:

Offline applications

If you're building an application that will need to work offline (more likely a PWA), you will need to bundle your fonts and icons in your app instead of using online resources.
It means you must set defaultAssets option to false.
For fonts, you may leverage CSS @font-face rule with local path of your fonts.
For icons, you can either use the same way than above, or leverage tree-shaken SVG libraries like Material Design Icons SVG or Font Awesome 5
SVG.

QUESTION
How should I implement this portion from the readme, regarding offline apps

...you will need to bundle your fonts and icons in your app instead of using online resources.

Could someone please show me an example nuxt.config.js build:{} section to accomplish the above?

Thank you for any help you can provide.

[kevinmarrec]

...you will need to bundle your fonts and icons in your app instead of using online resources.

👇

For fonts, you may leverage CSS @font-face rule with local path of your fonts.
For icons, you can either use the same way than above, or leverage tree-shaken SVG libraries like Material Design Icons SVG or Font Awesome 5 SVG.

Same way than above means using a font for your icons, you'll probably find further information in Vuetify icons documentation.

[ShaggyTech]

Thank you! I’ve actually abandoned this branch of the project and got it working with a fresh start from create-nuxt-app.

I’m going to close this and chalk it up to user error

BTW Thank you for the wonderful module you have created!

[yurigo]

Hi,

I've been struggling with Error: Vuetify is not properly initialized,... for a week. I've been trying the same.

In dev it works fine but when I build for prod and try it, same message.

In prod only worked for me if treeShake is false.

[enzonotario]

Hi @yurigo I had similar issues (a lot of them, I went crazy). But I'm sure that the problem is in your side. That said, try to isolate the issue and verify WHEN that error occurs. In my case, there were problems with shared components that we distribute via bitsrc, issues in the plugin that exports those components, and so on.
Also, I'm sure that it is not related to PWA (just disable that functionality and you will still have the same error)