My goal is best solution the First Contentful Paint with Vue.js or Nuxt.js
I think the best solution is to load component with import after when the first elements are loaded.
I don't know if is best solution, I would like to hear your opinions.
What is best way to code?
Trying:
The file is loaded with app.js
, how load only a time when I set to true
?
<template>
<h1>Hello World</h1>
<!-- First content here -->
<foo v-if="documentLoaded" />
</template>
mounted() {
document.onreadystatechange = () => {
if (document.readyState == "complete") {
console.log('Page completed with image and files!')
setTimeout(() => {
this.documentLoaded = true
}, 2000);
}
}
},
components: {
Foo: () => import(/* webpackChunkName: "component-foo" */ '~/components/foo')
}
You can define when a dynamically loaded component is effectively loaded using import like you said, in conjunction with v-if on the component.
<mycomp v-if="readyStateComplete"/>
//readyStateComplete is a boolean from data.
Setting the boolean to true will trigger the loading, then init and display of the component.
mounted() {
document.onreadystatechange = () => {
if (document.readyState == "complete") {
console.log('Page completed with image and files!')
// HOW LOAD COMPONENTS HERE?
this.readyStateComplete = true
}
}
},
If you want your component to be loaded the same time as the image, but just displayed after, use v-show instead of v-if.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With