R
Hi @rstoenescu, after i trying again in another case i got this message. Please try in your project and run on Safari using SSR mode (quasar dev -m ssr)
layouts/Navbar/Test.vue
<template>
<q-toolbar class="bg-purple text-white shadow-2 rounded-borders">
<q-tabs v-model="tab" shrink>
<q-tab :ripple="false" name="mails" icon="mail" label="Mails" />
<q-tab :ripple="false" name="alarms" icon="alarm" label="Alarms" />
<q-tab :ripple="false" name="movies" icon="movie" label="Movies" />
</q-tabs>
</q-toolbar>
</template>
<script>
export default {
name: 'Test',
data () {
return {
tab: ''
}
}
}
</script>
layouts/TestLayout.vue
<template>
<q-layout view="hHh Lpr fFf"> <!-- Be sure to play with the Layout demo on docs -->
<q-header class="bg-white">
<test />
</q-header>
<q-page-container>
<router-view/>
</q-page-container>
</q-layout>
</template>
<script>
export default {
name: 'TestLayout',
components: {
Test: () => import('@/layouts/Navbar/Test.vue')
},
data () {
return {
leftDrawer: true
}
}
}
</script>
pages/TestPage.vue
<template>
<q-page padding>
Test
</q-page>
</template>
<script>
export default {
name: 'TestPage'
}
</script>
quasar.conf.js, i add this
cfg.resolve.alias = {
...cfg.resolve.alias,
'@': path.resolve(__dirname, './src')
}
also using framework: { all: ‘auto’ }
routes.js
{
path: '/test',
component: () => import('layouts/TestLayout.vue'),
children: [
{ path: '/test', component: () => import('pages/TestPage.vue') }
]
}
[Error] [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
[Error] [Vue warn]: Error in nextTick: "TypeError: undefined is not an object (evaluating 'nodeOps.tagName(elm).toLowerCase')"
Please help, whats wrong with my code.
