Currently not working!

[anthonygore]

Not sure what the problem is yet, but it seems that critical CSS is being extracted before the Vue app renders, so you don't get anything from the components. Will investigate.

[partikule]

Hello ! Do you have some news about this plugin ? Is it still not working ? Thanks !

[anthonygore]

Still not working, sorry. When I have some time I'll try and fix it.

[matheusgrieger]

Hello! It worked for me, with some other issues, as in:

• Setting extract: true didn't really extract from the generated CSS file, everything would be download twice.
• Using inline: true didn't inline it in the page, instead it added another CSS file to preload, but lastly in the list of all files to be downloaded, so not really that useful.

But the generated CSS was, as a matter of fact, correct and precisely the dimensions I specified.

[partikule]

Hello ! Means at this state, there is no other solution to put critical css inline than do it manually after extract.

@matheusgrieger : Did you use Webpack 4 for your tests ?

[matheusgrieger]

@partikule yes, Webpack 4.16.5, to be precise. The project was created using vue create, and there were no changes to the default settings except for .browserlistrc.

What I meant with the previous comment was that, for me, on the opposite of what the issue says, the Vue app is rendered correctly for CSS extraction, just had those two other problems.

[Helo3615]

@matheusgrieger How did you setup your vue.config.js ?

We tried on our side and unfortunately, the Vue component rendering wasn't considered.

vue.config.js :

module.exports = {

    pluginOptions: {
        critical: {
            base: __dirname +  '/dist/',
            src: 'index.html',
            dest: 'index.html',
            inline: true,
            width: 1024,
            height: 565,
        }
    },

Our main.js code (extract):

new Vue({
	el: '#app',
	router,
	store,
	components: { App },
	render: h => h(App)
})

webpack version : 4.17.12 vuecli-3: 3.0.1

Any idea ?

[matheusgrieger]

@TuxxyDOS I have used the dimensions property, for multiple resolution extraction, and did not specify any base, src or dest options, if I remember correctly. We have removed it since it would be bad to download twice all that CSS (check my first comment).