Hi, Please consider simplifying the ability to leave some critical CSS as internal CSS inside head tag:
<head>
....
<style>....</style>
</head>For now, adding something that prevents nuxt from building the styles of a component, like ?indentedSyntax=true to the layouts/default.vue allows us to have internal css inside head.
However, we could also defer the load of the compiled _nuxt/style.css, if you set it as Google suggests here I also copy/paste the part that I ask you to look at:
<noscript id="deferred-styles">
<link rel="stylesheet" type="text/css" href="small.css"/>
</noscript>
<script>
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>