\n \u003C/UFormField>\n\n \u003CUFormField label=\"Last name\" name=\"familyName\" required>\n \u003CUInput v-model=\"state.familyName\" />\n \u003C/UFormField>\n \u003C/template>\n\n \u003Ctemplate #footer>\n \u003CUButton label=\"Save\" type=\"submit\" />\n \u003C/template>\n \u003C/UModal>\n \u003C/UForm>\n\u003C/template>\n```",[3038,3041],{"name":3039,"color":3040},"question","d876e3",{"name":3025,"color":3026},4401,"How to use a UForm within a UModal with footer?","2025-06-26T12:51:18Z","https://github.com/nuxt/ui/issues/4401",0.76993895,{"description":3048,"labels":3049,"number":3055,"owner":3028,"repository":3028,"state":3056,"title":3057,"updated_at":3058,"url":3059,"score":3060},"Hello ! on my site (https://yineo.fr/), my right sidebar is a component called from **layouts/default.vue**\r\n\r\nBecause i don't want to call it in every page component. \r\n\r\nI know asyncData() is only for pages and not layouts but maybe they are some workarounds ?\r\n\r\nSo my sidebar with last articles is not server side rendered and google bot can not see it ( see picture below, the left one is what google bot see and probably index )\r\n\r\nHow can i have server side rendering for my \"Sidebar\" Component called from **layouts/default.vue** ( code below the picture ) ?\r\nthanks !\r\n\r\n\u003Cimg width=\"1101\" alt=\"capture d ecran 2017-08-12 a 04 24 47\" src=\"https://user-images.githubusercontent.com/335495/29237021-c3c1c262-7f15-11e7-9267-b2170831a9cb.png\">\r\n\r\n```html\r\n\u003C!-- main layout -->\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CAppNavigation />\r\n \u003CAppHeader/>\r\n \r\n \u003Cdiv class=\"container\">\r\n \u003Cdiv class=\"columns\">\r\n \r\n \u003Cdiv class=\"column is-two-thirds\">\r\n \u003Cnuxt/>\r\n \u003C/div>\r\n \r\n \u003Cdiv class=\"column\">\r\n \u003Csection class=\"section\">\r\n \u003CTwitterFollowMe/>\r\n \u003Chr/>\r\n \u003Ch2 class=\"title is-2\">Derniers billets\u003C/h2>\r\n \u003CPostsSidebar :posts=\"posts\" />\r\n \u003C/section>\r\n \u003C/div>\r\n \r\n \u003C/div>\r\n \u003C/div>\r\n \u003CAppFooter />\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nimport AppHeader from '~/components/AppHeader'\r\nimport AppNavigation from '~/components/AppNavigation'\r\nimport AppFooter from '~/components/AppFooter'\r\nimport TwitterFollowMe from '~/components/TwitterFollowMe'\r\nimport PostsSidebar from '~/components/PostsSidebar'\r\nimport { getPosts } from '~/services/wpContentApi'\r\n\r\nexport default {\r\n components: { AppHeader, AppNavigation, AppFooter, TwitterFollowMe, PostsSidebar },\r\n data () {\r\n return {\r\n posts: []\r\n }\r\n },\r\n async created () {\r\n this.posts = await getPosts(20)\r\n }\r\n}\r\n\u003C/script>\r\n```\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1197\">#c1197\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3050,3052],{"name":3039,"color":3051},"cc317c",{"name":3053,"color":3054},"2.x","d4c5f9",1351,"closed","Server Side Rendering for components called from layouts","2023-01-18T15:41:42Z","https://github.com/nuxt/nuxt/issues/1351",0.7311484,{"description":3062,"labels":3063,"number":3071,"owner":3028,"repository":3028,"state":3056,"title":3072,"updated_at":3073,"url":3074,"score":3075},"Hi, had a look around at the issues/documentation, but couldn't find anything specific to my question:\r\n\r\nWhat do we need to deploy to our server to run it in Server Rendered Deployment (Universal)?\r\n\r\n\r\n\r\nDoes this whole folder have to be deployed to the server for it to work (seems quite a lot if we have to upload all the source code to the server), or do we need to just deploy the .nuxt folder?\r\n\r\nAny help/how it's meant to be done would be appreciated :)\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2456\">#c2456\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3064,3067,3070],{"name":3065,"color":3066},"documentation","5319e7",{"name":3068,"color":3069},"stale","ffffff",{"name":3053,"color":3054},2835," Server Rendered Deployment (Universal)","2023-01-18T16:09:43Z","https://github.com/nuxt/nuxt/issues/2835",0.749739,{"description":3077,"labels":3078,"number":3080,"owner":3028,"repository":3028,"state":3056,"title":3081,"updated_at":3082,"url":3083,"score":3084},"Hello. I got an error when trying to use with Nuxt\r\n\r\n```\r\nvue.runtime.esm.js:430 [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 \u003Cp>, or missing \u003Ctbody>. Bailing hydration and performing full client-side render.\r\n```\r\n\r\nI have Modal component, that I want to render outside of component, where I am calling modal.\r\n\r\nI have this:\r\n\r\nThis is where I want to render Modal component:\r\n\r\n```\r\n\u003Ctemplate lang=\"pug\">\r\n div\r\n my-header\r\n .flex-sticky\r\n nuxt.content\r\n my-footer\r\n portal-target(name=\"destination\")\r\n\u003C/template>\r\n```\r\n\r\nThis is where I am calling Modal component\r\n\r\n```\r\n\u003Ctemplate lang=\"pug\">\r\ndiv\r\n portal(to=\"destination\")\r\n modal\r\n\u003C/template>\r\n```\r\nSorry for Pug. If needed, I rewrite it with HTML.\r\nPlease assist me to fix this issue with this awesome library.\r\nIs it compatible with Nuxt?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1333\">#c1333\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3079],{"name":3053,"color":3054},1497,"Got an hydration error when use vue-portal","2023-01-18T15:41:51Z","https://github.com/nuxt/nuxt/issues/1497",0.75544065,{"description":3086,"labels":3087,"number":3094,"owner":3028,"repository":3028,"state":3056,"title":3095,"updated_at":3096,"url":3097,"score":3098},"**Summary (generated)**:\n\nHere is a summary of the text:\n\nIs there a way for Nuxt to render every page in Server-Side Rendering (SSR) mode, similar to PHP. The speaker is open to helping implement this feature and thinks it could be implemented as a module. Before proceeding, the speaker has checked the contribution guide and existing discussions and issues on GitHub.\n\n\u003Chr>\n\n### Describe the feature\n\nIs there a way for Nuxt to render every page in SSR mode,like php。\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3088,3091],{"name":3089,"color":3090},"3.x","29bc7f",{"name":3092,"color":3093},"pending triage","E99695",27751," @nuxtbot nuxtbot changed the title Is there a way for Nuxt to render every page in SSR mode, rather than just the first time the page is opened?","2024-06-21T10:00:57Z","https://github.com/nuxt/nuxt/issues/27751",0.7555109,{"description":3100,"labels":3101,"number":3103,"owner":3028,"repository":3028,"state":3056,"title":3104,"updated_at":3105,"url":3106,"score":3107},"I did exactly as you have in your docs for plugins.\r\ni have a file named iview.js and inside of there i have.\r\nIm using nuxt/express template\r\n\r\n ` \r\n\r\n import iView from 'iview'\r\n import Vue from 'vue'\r\n import 'iview/dist/styles/iview.css'\r\n\r\n Vue.use(iView)\r\n`\r\n\r\njust like u recommend. Next i add that plugin in nuxt.config.js\r\n `\r\n\r\n plugins: [\r\n // ssr: false to only include it on client-side\r\n { src: '~plugins/iview.js', ssr: false }\r\n ]\r\n\r\n`\r\n\r\nbut it keeps giving me this error \r\n\r\n> 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 \u003Cp>, or missing \u003Ctbody>. Bailing hydration and performing full client-side render.\r\n\r\nI hope there is a way around it. I tried to import Button from iview manually but i get an error saying\r\n`'Button' is defined but never used no-unused-vars` but its nonsense because i have ` \u003CButton type=\"primary\">Primary\u003C/Button>`\r\n\r\nSo then it made me think to go to my component and do the following inside of the \u003Cscript>\r\n`\r\n\r\n import Button from 'iview/src/components/button'\r\n export default {\r\n data () {\r\n return {\r\n Button\r\n }\r\n }\r\n}`\r\n\r\nAnd it started WORKING, right for a few seconds and then i get an error saying this:\r\n\r\n> /home/linux/Desktop/test/node_modules/iview/src/components/button/index.js:1\r\n(function (exports, require, module, __filename, __dirname) { import Button from './button.vue';SyntaxError: Unexpected token import\r\n\r\n\r\n\r\n\r\n\r\n**EDIT:**\r\n\r\n\r\n\r\n\r\nin my iview.js i have this\r\n\r\n import Vue from 'vue'\r\n import iView from 'iview'\r\n import 'iview/dist/styles/iview.css'\r\n if (process.BROWSER_BUILD) {\r\n require('iview')\r\n }\r\n Vue.use(iView)\r\n\r\nthen in my vendors and plugins\r\n\r\n plugins: [{ src: 'plugins/iview.js', ssr: false }]\r\n vendor: ['axios', 'iview'],\r\n\r\nthen in my index.vue\r\n\r\n \u003Ctemplate>\r\n \u003Cdiv class=\"\">\r\n \u003CButton type=\"primary\" @click=\"modal6 = true\">Open modal\u003C/Button>\r\n \u003CModal\r\n v-model=\"modal6\"\r\n title=\"sync\"\r\n :loading=\"loading\"\r\n @on-ok=\"asyncOK\">\r\n \u003Cp>This is a sync modal\u003C/p>\r\n \u003C/Modal>\r\n \u003C/div>\r\n \u003C/template>\r\n\r\n \u003Cscript>\r\n export default {\r\n layout: 'iview',\r\n data () {\r\n return {\r\n modal6: false,\r\n loading: true\r\n }\r\n },\r\n methods: {\r\n asyncOK () {\r\n setTimeout(() => {\r\n this.modal6 = false\r\n }, 2000)\r\n }\r\n }\r\n\r\n }\r\n \u003C/script>\r\n\r\n\r\n\r\n\r\nand it gives me the following errors\r\n\r\n Mismatching childNodes vs. VNodes: (5) [VNode, VNode, VNode, VNode, VNode]\r\n\r\n [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 \u003Cp>, or missing \u003Ctbody>. Bailing hydration and performing full client-side render.\r\n\r\n\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c909\">#c909\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3102],{"name":3053,"color":3054},1049,"iview tree is not matching server-rendered content","2023-01-18T15:40:43Z","https://github.com/nuxt/nuxt/issues/1049",0.7588226,{"description":3109,"labels":3110,"number":3112,"owner":3028,"repository":3028,"state":3056,"title":3113,"updated_at":3114,"url":3115,"score":3116},"So what I'd like to do if possible is say I have a component that shows a number, say \r\n\r\n`States : 50`\r\n\r\nNow in the browser I'd like to animate this by using something like countup.js to count the number from 0 to 50, but in the rendered static HTML i'd like the value to always be 50. Maybe do something like:\r\n\r\n```pug\r\n.statistic\r\n .copy States\r\n .value(v-if=\"browser\") {{ state }}\r\n .value(v-else) 50\r\n```\r\n\r\nthis has `data ()` return `this.browser = process.BROWSER_BUILD`\r\n\r\nWhen I try and do something like this I always get errors and warnings mostly that particularly are:\r\n\r\n` 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 \u003Cp>, or missing \u003Ctbody>. Bailing hydration and performing full client-side render.`\r\n\r\nIs this possible to do at all? This would be great for SEO purposes.\r\n\r\nHere is some actual code I've tried to do this with:\r\n\r\n```pug\r\ni-count-up.value(v-if=\"browser\",:start=0,:end=\"metros[key]\") 0\r\n.value(v-else) {{ metros[key] }}\r\n```\r\n\r\n\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c872\">#c872\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3111],{"name":3053,"color":3054},1005,"client vs server rendered HTML request","2023-01-18T15:40:38Z","https://github.com/nuxt/nuxt/issues/1005",0.7592661,{"labels":3118,"number":3121,"owner":3028,"repository":3028,"state":3056,"title":3122,"updated_at":3123,"url":3124,"score":3125},[3119,3120],{"name":3065,"color":3066},{"name":3089,"color":3090},14569,"Document `render:response` and `render:html` server hooks","2024-12-13T13:09:33Z","https://github.com/nuxt/nuxt/issues/14569",0.76319885,{"description":3127,"labels":3128,"number":3130,"owner":3028,"repository":3028,"state":3056,"title":3131,"updated_at":3132,"url":3133,"score":3134},"Hello!\r\n\r\nI can't find any solution for Google Optimize implementation on SSR. I want to get rendered page already with all changes made by Google Optimize. Any suggestions?\r\n\r\nBest regards\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7217\">#c7217\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3129],{"name":3053,"color":3054},3425,"Question: how to run Google Optimize on server-side?","2023-01-18T16:24:02Z","https://github.com/nuxt/nuxt/issues/3425",0.7684745,["Reactive",3136],{},["Set"],["ShallowReactive",3139],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$ft7q4DqvnoOgrp-hPe0LJCtcnxVjIT97KDoNmwkFHhxo":-1},"/nuxt/ui/3338"]