In accordance with the documentation:
Given that there are no dynamic updates, only beforeCreate and created Vue lifecycle hooks will be triggered during SSR. This implies that any code within other lifecycle hooks like beforeMount or mounted will solely execute on the client side.
I'm finding it difficult to initiate this call. I have some functionalities that cannot run on the server. My assumption was that having "mounted" alone would suffice for it to invoke, but that doesn't seem to be the case.
To provide a bit of context, I am constructing a dropdown menu using foundation which works fine in standard Vue (non-SSR).
The structure of the file looks as follows:
<template>
<ul class="vertical menu accordion-menu" data-accordion-menu data-multi-open="false">
<li v-for="i in htmlData.sidenav" :key="i.title">
<router-link v-bind:to=i.href>{{ i.title }}</router-link>
<ul class="menu vertical nested" v-if="i.sub1">
<li v-for="j in i.sub1" :key="j.name">
<router-link v-bind:to=j.href>{{ j.name }}</router-link>
<ul class="menu vertical nested" v-if="j.sub2">
<li v-for="k in j.sub2" :key="k.name">
<router-link v-bind:to=k.href>{{ k.name }}</router-link>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</template>
<script>
import SideNav from '../store/modules/sidenav'
import $ from 'jquery'
export default {
name: 'sidenav',
computed: {
htmlData () {
this.acc()
return this.$store.state.sn.nav
}
},
// Server-side only
serverPrefetch () {
this.$store.registerModule('sn', SideNav)
return this.getData()
},
// Client-side only
mounted () {
console.log('mt')
const doesExist = !!this.$store.state.sn.nav
this.$store.registerModule('sn', SideNav, { preserveState: true })
if (!doesExist) {
this.getData()
}
},
destroyed () {
this.$store.unregisterModule('sn')
this.menu.destroy()
},
methods: {
async getData () {
return this.$store.dispatch('sn/snav')
},
acc () {
this.$nextTick(function () {
this.menu = new this.$foundation.AccordionMenu($('.accordion-menu'))
})
},
}
}
While the sidenav successfully renders, it remains invisible to the client, resulting in the following error:
UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'AccordionMenu' of undefined
This discrepancy is evident because the menu actually renders, yet there is no record of "mt" in the console, although "pref" does log. This issue leads to various problems with page rendering (it fails without a hard refresh).
The content of the file under "boot/sidenav" is as follows:
// const SideNav = () => import('../layouts/SideNav.vue')
import SideNav from '../layouts/SideNav.vue'
export default async ({ Vue }) => {
Vue.component('side-nav', SideNav)
}
Furthermore, the quasar.conf includes the following:
boot: [
'axios',
'sidenav',
'notemenu',
{
path: 'foundation',
server: false
},
{
path: 'osmd',
server: false
}
],
Neither the "foundation" nor the "osmd" can be viewed by the client. They both require the window object to function and hence cannot execute on the server. The situation becomes even more perplexing since "sidenav" does render and behaves as a reactive component.