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.