Nuxt production mode loading resources late

Question

I am currently running a nuxt app that works fine in development mode. However when I switch to production mode, you can see that some of the css gets deferred to load later. I'm pretty sure this is some of the vuetify css. I say some because some of the classes do exist already.

You can see what I mean by refreshing this page (make sure to disable cache).

It seems like there's some sort of nuxt/webpack config that I'm missing to disable this but I'm not sure what it is.

Edit: The staging site is down sometimes, so here's what's happening in gif form, you can see that certain critical css loads later.

Edit #2: Minimal repro added here https://github.com/amritk/vuetify-nuxt-repro

Edit #3: So @Sabee solved my minimal repro but that didn't solve my original problem. As you can see here, there are a few style blocks that are added on the client but are not there on the server. How do I ensure these styles are loaded on the server?

Server:

Client:

[

Edit#3: Specifically its the v-layout styles loading late. Is there any way to pre-load this css on the server?

Answer 1

Alright @Sabee's answer lead me to figure out the problem. It turns out that it was the styles from the VLayout component that weren't being loaded. I believe it was a vuetify-loader plugin problem as opposed to nuxt. It was being loaded on the server and not the client. All I had to do was change my config to load VLayout in the beginning and it worked!

Vuetify plugin

import Vue from 'vue'
import Vuetify, { VLayout } from 'vuetify/lib'

Vue.use(Vuetify, {
    options: {
        .
        .
        .
    },
    theme: {
        .
        .
        .
    },
    components: {
        VLayout
    }
})

Answer 2

I created a pull request to your repo and uploaded the code to codesandbox. I think you have a vuetify syntax problem , I recommend to you use vuetify default app layout markup, your code must look like this :

default.vue layout

<template lang="pug">
v-app
    v-toolbar(app color="primary")

        v-toolbar-title.white--text SiteLogo
        v-spacer
        v-toolbar-items
            v-btn(flat dark to="/" nuxt) home
            v-btn(flat dark to="/inspire" nuxt) Inspiration
            v-btn(flat dark) about    
    v-content
        nuxt
</template>

and the index.vue

<template lang="pug">
v-container
    v-layout(row wrap)
        v-flex(xs12 sm6 offset-sm3)
            v-card
                v-img(src="https://cdn.vuetifyjs.com/images/cards/desert.jpg" aspect-ratio="2.75")
                v-card-title(primary-title)
                    div
                        h3(class="headline mb-0") Kangaroo Valley Safari
                        div {{ card_text }}
                v-card-actions
                    v-btn(flat color="primary") Share
                    v-btn(flat color="primary") Explore
        v-flex(pt-4)        
            div PLACEHOLDDDDDDDDDDDEEEEEEEEEEEEERRRRRRRRRRRR
            v-btn(to="/inspire" nuxt) inspuration
</template>
<script>
  export default {
    data () {
      return {
        card_text: 'Lorem ipsum dolor sit amet, brute iriure accusata ne mea. Eos suavitate referrentur ad, te duo agam libris qualisque, utroque quaestio accommodare no qui. Et percipit laboramus usu, no invidunt verterem nominati mel. Dolorem ancillae an mei, ut putant invenire splendide mel, ea nec propriae adipisci. Ignota salutandi accusamus in sed, et per malis fuisset, qui id ludus appareat.'
      }
    }
  }
</script>

The second you dont need to write vuetify loader use the default. (if you need configure it) And add ssr:false to the vuetify style globaly lodading innuxt.config.js, the better way is remove the vuetify style loading in nuxt.config.js do it in vuetify plugin.

Vuetify plugin

import Vue from 'vue'
import Vuetify from 'vuetify/lib'


Vue.use(Vuetify, {
    theme: {
        // HC Green
        primary: {
            lighten3: '#009546', // hc-light-green
            base: '#008940'      // hc-green
        },
        // Blue
        accent: {
            lighten1: '#23BFFF', // light-blue
            base: '#0279D7',     // medium-blue
            darken3: '#0D47A1'   // dark-blue, darker-blue
        },
        // Grey
        secondary: {
            lighten5: '#FFFFFF', // white
            lighten4: '#EFEFEF', // lighter-grey, dark-white
            lighten3: '#DFDFDF', // light-medium-grey, light-grey
            base: '#9F9F9F',     // medium-grey
            darken2: '#777777',  // pastel-grey
            darken3: '#3E3E3E',  // darker-grey, charcoal-grey, light-black, dark-medium-grey, dark-grey
            darken5: '#000000'   // black
        },
        // Blue
        info: {
            base: '#0279D7'      // medium-blue
        },
        // Orange/Yellow
        warning: {
            lighten3: '#fad53e', // light-orange aka yellow
            base: '#ff8800',     // from https://www.google.com/search?q=css+warning+color
            darken3: '#e65100'   // dark-orange
        },
        // Red
        error: {
            lighten1: '#ff5252', // light-red
            base: '#B71C1C'      // medium-red
        },
        // Green
        success: {
            lighten3: '#4CAf50', // light-green
            base: '#28a745',     // bootstrap green https://getbootstrap.com/docs/4.3/getting-started/theming/
            darken3: '#00592A'   // dark-green
        }
    }
})

nuxt.config.js

import Sass from 'sass'
import dotenv from 'dotenv'
import vuetifyLoader from './src/plugins/vuetify-loader'
dotenv.config()

const config = {
    mode: 'universal',
    debug: !(process.env.NODE_ENV === 'production'),

    // Loading bar color
    loading: {
        color: '#fff'
    },

    // Global css
    css: [{ src: '~/assets/style/vuetify.styl', lang: 'styl',ssr:false }],

    // Change src directory
    srcDir: 'src/',
    // Plugins
    plugins: [
        { src: '@/plugins/vuetify' }
    ],

    // Nuxt.js modules
    modules: [
        '@nuxtjs/axios',
        '@nuxtjs/dotenv',
        ['cookie-universal-nuxt', { alias: 'nuxtCookies' }]
    ],

    // Babel
    babel: {
        presets: ['@babel/preset-env'],
        plugins: [
            '@babel/plugin-transform-modules-commonjs',
            'dynamic-import-node',
            '@babel/plugin-syntax-dynamic-import',
            [
                'transform-runtime',
                {
                    polyfill: false
                }
            ]
        ]
    },

    // Build Config
    build: {
        filenames: {
            app: ({ isDev }) => isDev ? '[name].js' : '[name]-[hash].js',
            chunk: ({ isDev }) => isDev ? '[name].js' : '[name]-[hash].js'
        },

        // Extend webpack config
        extend: (config, ctx) => {

            config.devtool = ctx.isClient ? 'eval-source-map' : 'inline-source-map'
        },

        loaders: {
            sass: {
                implementation: Sass
            }
        },

        // Vuetify Loader - To auto load your components
        transpile: [/^vuetify/],
        plugins: [ vuetifyLoader]
    }
}

export default config

If you have any questions please contact to me