Multiple components not rendered with async data as props
[issue link]Hi,
i have problem with index page not rendered correctly when i access it directly (not from some other page). I am fetching data asynchronously and further i am using that data in three different components on the page. If I comment two of them page will be rendered correctly but as soon as I add another component (that was previously commented) the page breaks. This is the errors that i am getting:
nuxt.bundle.f0de229….js:1 [nuxt.js] Cannot load components DOMException: Failed to execute ‘appendChild’ on ‘Node’: This node type does not support this method.
TypeError: Cannot read property ‘$options’ of undefined
This is the code:
part of the template (3 components)
…
<etr-slider-big :items="sliderBig"></etr-slider-big>
<!--// Slider -->
<!-- Featured -->
<etr-featured :herb="lastHerb"></etr-featured>
<!--// Featured -->
<!-- Popular products -->
<etr-popular-products :products="popularProducts"></etr-popular-products>
async data
…
asyncData() { return HTTP.get(homepage).then(response => { return { sliderBig: response.data['products-slider'], lastHerb: response.data['last_herb'], popularProducts: response.data['featured_products'] } }) },
I am using vue-slick for sliders that are rendered in browser:
const Slick = process.BROWSER_BUILD ? require('vue-slick') : null