Hi, I'm facing a weird issue with a nuxt generated app and a plugin I'm creating.
<template>
<div id="app">
<top-nav/>
<ksvuefp :options="options" :sections="sections">
<ksvuefp-section
v-for="(section,index) in sections"
:section="section"
:key="section"
:sectionIndex="index"
:background-color="section"
>
<h2>{{ section }}</h2>
</ksvuefp-section>
</ksvuefp>
</div>
</template>
<script>
export default {
name: 'home',
data () {
return {
sections: ['red', 'blue', 'green'],
options: { }
}
}
}
</script>
When using nuxt dev no problem, everything is rendered correctly. But once generated, instead of having 3 sections mounted... I only have 2. The first one is missing. The weirdest is that on loading, this section seems to be mounted, but dieappears when the app is totally loaded...
My components code:
ksvuefp-section.vue
<template>
<component :is="options.animationType" :options="options" :appear="false">
<tagger :sectionIndex="sectionIndex" :options="options" class="ksvuefp-section" :style="{ backgroundImage: backgroundImage || '', backgroundColor: backgroundColor || '' }" v-show="sectionIndex === $ksvuefp.currentIndex">
<span class="ksvuefp-section__overlay" :style="{ background: options.overlay || 'rgba(0,0,0,0.2)' }" v-if="options.overlay"></span>
<div class="ksvuefp-section__content">
<slot></slot>
</div>
</tagger>
</component>
</template>
<script>
import { slideY, slideX, fade } from '../ksvuefp-animations'
import imagesLoaded from 'imagesloaded'
export default {
components: {
slideY,
slideX,
fade,
'tagger': {
props: ['options', 'sectionIndex'],
render (h) {
return h(this.options.sectionTag || 'div', this.$slots.default)
},
mounted () {
const vm = this
vm.$nextTick(() => {
imagesLoaded(vm.$el, { background: true }, () => {
vm.$ksvuefp.$emit('ksvuefp-section-loaded', vm.sectionIndex)
})
}
}
},
data () {
return {
options: this.$ksvuefp.options || [ ]
}
},
props: ['section', 'backgroundImage', 'backgroundColor', 'sectionIndex']
}
</script>
Any idea of what could cause the issue? I'm banging my head on the wall since hours ahaha
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This bug report is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1622">#c1622</a>)</em></sub></div>