Nuxt VueJS Warnings

Question

I Have These Warnings When I Build My Nuxtjs ProjectWarnings

I Use Vuetify, SCSS, Vue-monthly-picker for pick month date

In The nuxt.config.js

mode: 'universal', ssr: false,

If I removed Mode and Make SSR: true, it gives me another error ( document not defined )

The Warning of asset size limit is because I use Vuetify, Vue-monthly-picker which increase assets size if i remove it warning gone.

is there any way i can remove warning without delete vuetify and vue-picker

kissu kissu · Accepted Answer · 2021-03-19T11:12:56

Nothing bad/special here, your chunk's size is just big.

Webpack's recommendation is to tell you that you should be aware of not shipping too much JS.

You can check the official documentation page about treeshaking and how to optimize that kind of vendor package size here: https://vuetifyjs.com/en/features/treeshaking/#manually-importing

You could also look for alternatives (like TailwindCSS) or make your own CSS/components. Nothing to really worry about if your website is not required to have drastic loading time.

If you really want to go deeper into the rabbit hole, you can give a look to this checklist done by Smashing Magazine: https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/

EDIT to answer the comment queston

Looking from the official documentation page, you can disable those hints: https://webpack.js.org/configuration/performance/

You can disable the warnings with this configuration in your nuxt.config.js file:

export default {
  build: {
    extend(config) {
      config.performance.hints = false
    },
}

You can also use yarn build --quiet or set it in the configuration if you want 0 feedback on what is happening.

Or you can go and alter directly the chunk-size or toggle other things as showed here: Webpack 4 "size exceeds the recommended limit (244 KiB)"

I still do recommend to keep it as verbose as it is right now because it's always good to know what is happening with your application. And warning are not causing any trouble by themselves.

Nuxt VueJS Warnings

1 Answers

EDIT to answer the comment queston