\r\n\u003C/template>\r\n```\r\n\r\nI want to have the post components within that page NOT async BUT still dynamic (so I can loop over the array) I want each instance of AbstractPage to be generated as one .js file.\r\nAbstractPage.vue:\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv v-for=\"postRoute of posts[page]\">\r\n \u003Ccomponent :is=\"postComponents.find(comp => comp.route === postRoute)\"/>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\nfor (const postRoute of posts[this.page]) {\r\n const filename = routeToComponentFilename(postRoute)\r\n let esComponent = await import(`../PromoCards/${filename}`)\r\n const component = {\r\n route: postRoute,\r\n component: esComponent.default\r\n }\r\n this.postComponents.push(component)\r\n}\r\n```\r\n\r\nMy end goal for network requests (simplified) is: \r\nGET index.html\r\nGET app.js\r\nGET page0.js \u003C-- precompiles the dynamic NON async post components\r\n\r\nhere is my repo for more context: https://github.com/Coletrane/mountain-bike-virginia/tree/posts-json-authors-json\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/c2681\">#c2681\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2044],{"name":2033,"color":2034},3097,"How to use dynamic NON-async components for nuxt generate","2023-01-18T16:09:58Z","https://github.com/nuxt/nuxt/issues/3097",0.6568985,{"description":2051,"labels":2052,"number":2053,"owner":1991,"repository":1991,"state":2036,"title":2054,"updated_at":2055,"url":2056,"score":2057},"### Discussed in https://github.com/nuxt/nuxt/discussions/22444\r\n\r\n\u003Cdiv type='discussions-op-text'>\r\n\r\n\u003Csup>Originally posted by **sync42johnny** August 2, 2023\u003C/sup>\r\nI'm currently exploring dynamic routing in Nuxt 3 and I came across the documentation that explains how to define dynamic routes in the pages directory. According to the documentation here: https://nuxt.com/docs/guide/directory-structure/pages#dynamic-routes, dynamic routes can be easily defined in the pages directory using the file and directory names. For example:\r\n```\r\n-| pages/\r\n---| index.vue\r\n---| users-[group]/\r\n-----| [id].vue\r\n```\r\nI'm particularly intrigued by the users-[group]/ part of the structure, which seems to suggest that dynamic parameters can be used in parent directory names as well. This could greatly simplify the routing logic for some of my use cases.\r\n\r\nMy question is this: Does Nuxt 3 support the same functionality for server routes? Can I dynamically generate server routes based on parameters like in the users-[group]/ example?\r\n\r\nIf so, could you kindly guide me on how to implement this? If not, are there plans to include this feature in future releases, or could you recommend a workaround?\r\n\r\nYour insights would be greatly appreciated!\r\n\r\nThank you.😀\u003C/div>",[],23704,"🔥Dynamic Routes in Server Routes for Nuxt 3🔥","2023-10-16T20:09:34Z","https://github.com/nuxt/nuxt/issues/23704",0.6580808,{"description":2059,"labels":2060,"number":2062,"owner":1991,"repository":1991,"state":2036,"title":2063,"updated_at":2064,"url":2065,"score":2066},"Hi,\r\n\r\nFollowing your example on https://nuxtjs.org/api/configuration-generate#routes I am able to generate static html-files with dynamic routes. I.E. like so \r\n```_id.vue\r\n\u003Ctemplate>\r\n \u003Carticle class=\"content\">\r\n \u003Cvue-markdown>{{blogPost.content}}\u003C/vue-markdown>\r\n \u003C/article>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\n export default {\r\n async asyncData ({ payload }) {\r\n if (payload) {\r\n return { blogPost: payload }\r\n }\r\n }\r\n }\r\n\u003C/script>\r\n```\r\ninto so\r\n````3123.html\r\n\u003C!DOCTYPE html>\r\n\u003Chtml data-n-head=\"lang\" data-n-head-ssr lang=\"en\">\r\n\u003Chead>\r\n...\r\n\u003Cbody data-n-head=\"\">\r\n \u003Csection class=\"hero\" id=\"banner\">\r\n \u003Cdiv class=\"container\">\r\n \u003Carticle class=\"content\">\r\n \u003Cdiv>\u003Cstrong>bold\u003C/strong>\u003C/div>\r\n \u003C/article>\r\n \u003C/div>\r\n \u003C/section>\r\n\u003Cscript type=\"text/javascript\">window.__NUXT__ = {\r\n layout: 'default',\r\n data: [ {\r\n blogPost: {\r\n id: '98219',\r\n updatedAt: '2017-09-14T10:43:39.443Z',\r\n isValid: !0,\r\n content: '**bold**',\r\n tags: 'test,nuxt,dato',\r\n meta: {\r\n image: {\r\n alt: null,\r\n path: '/3263/1505385491-stock-photo-example-stamp-123670585.jpg',\r\n size: 38787,\r\n title: null,\r\n width: 450,\r\n format: 'jpg',\r\n height: 315\r\n }, title: 'Test Blog Post #1', description: 'This blog post sole purpose is to test dato along with nuxt.'\r\n },\r\n slug: 'test-blog-post-1',\r\n title: 'Test Blog Post #1',\r\n itemType: '14525',\r\n lastEditor: '2422'\r\n }\r\n } ],\r\n error: null,\r\n state: {},\r\n serverRendered: !0\r\n}\u003C/script>\r\n...\r\n````\r\nAs you can see I omitted the\r\n````.js\r\nelse return { user: await backend.fetchUser(params.id) }\r\n````\r\npart of the toturial as I don't wish for the data to be fetched again on page load. But the component still tries to re-render, and `cannot read property 'content' of undefined` pops up on page load.\r\n\r\nIs there a way to make the page not re-render on page load, or for the component to use the data on `window.__nuxt__.data`?\r\n\r\nI tried to be as specific as possible, but please ask if anything is unclear!\r\n\r\nOh, and thanks for the help in advance :)\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/c1485\">#c1485\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2061],{"name":2033,"color":2034},1659,"Generate dynamic routes, and only use prepopulated data from generate.routes","2023-01-18T15:42:07Z","https://github.com/nuxt/nuxt/issues/1659",0.65859216,{"labels":2068,"number":2071,"owner":1991,"repository":1991,"state":2036,"title":2072,"updated_at":2073,"url":2074,"score":2075},[2069,2070],{"name":1985,"color":1986},{"name":2033,"color":2034},6969,"create router depending on the hostname","2023-01-22T15:51:03Z","https://github.com/nuxt/nuxt/issues/6969",0.66086745,{"description":2077,"labels":2078,"number":2083,"owner":1991,"repository":1991,"state":2036,"title":2084,"updated_at":2085,"url":2086,"score":2087},"The problem with adding routes dynamically \r\nIn the production version, I plan to use an ajax request that gives the \"page type\" in the plugin and add the appropriate routes. For the demonstration, I created the minimum set of code required to run and test the dynamic addition of routes, please see \r\n\r\nMy nuxt.config.js\r\n```\r\nmodule.exports = {\r\n ssr: true,\r\n mode: 'universal',\r\n srcDir: __dirname,\r\n loading: { color: '#007bff' },\r\n plugins: [\r\n {src: '~/plugins/route'}\r\n ],\r\n modules: [\r\n \"@nuxtjs/axios\",\r\n [\r\n 'nuxt-i18n', {\r\n parsePages: false,\r\n pages: {\r\n contacts: {\r\n en: '/kont_test2',\r\n uk: '/kont_test3',\r\n ru: '/kont_test4',\r\n }},\r\n\r\n strategy:'prefix_except_default',\r\n detectBrowserLanguage: {\r\n useCookie: true,\r\n cookieKey: 'i18n_redirected',\r\n alwaysRedirect: true,\r\n fallbackLocale: 'en'\r\n },\r\n vueI18nLoader: true,\r\n locales: [\r\n {\r\n name: 'English',\r\n code: 'en',\r\n iso: 'en-US',\r\n file: 'en.js'\r\n },\r\n {\r\n name: 'Русский',\r\n code: 'ru',\r\n iso: 'ru-RU',\r\n file: 'ru.js'\r\n },\r\n {\r\n name: 'Українська',\r\n code: 'uk',\r\n iso: 'uk-UA',\r\n file: 'uk.js'\r\n },\r\n ],\r\n\r\n lazy: true,\r\n loadLanguagesAsync: true,\r\n silentTranslationWarn:true,\r\n langDir: 'locales/',\r\n defaultLocale: 'ru',\r\n\r\n\r\n },\r\n ],],\r\n hooks: {\r\n generate: {\r\n done (generator) {\r\n // Copy dist files to public/_nuxt\r\n if (generator.nuxt.options.dev === false && generator.nuxt.options.mode === 'spa') {\r\n const publicDir = join(generator.nuxt.options.rootDir, 'public', '_nuxt')\r\n removeSync(publicDir)\r\n copySync(join(generator.nuxt.options.generate.dir, '_nuxt'), publicDir)\r\n copySync(join(generator.nuxt.options.generate.dir, '200.html'), join(publicDir, 'index.html'))\r\n removeSync(generator.nuxt.options.generate.dir)\r\n }\r\n },\r\n\r\n }\r\n },\r\n build: {\r\n extend (config, { isDev, isClient }) {\r\n config.node = {\r\n fs: \"empty\"\r\n }\r\n }\r\n }\r\n\r\n}\r\n\r\n```\r\n\r\nIn the config I add plugin \"route\", plugins/route.js source code\r\n```\r\nfunction interopDefault(promise) {\r\n return promise.then(m => m.default || m);\r\n}\r\n\r\n\r\nexport default ({app, router, routeres}) => {\r\n\r\n //axios.defaults.baseURL = process.env.apiUrl;\r\n // console.log(app.router);\r\n //afterEach\r\n\r\n app.router.beforeEach((to, from, next) => {\r\n\r\n const matched = app.router.getMatchedComponents(to);\r\n console.log(\"matched: \" + matched.length);\r\n console.log(\"to.path: \" + to.path);\r\n\r\n\r\n let dynamicView = () => interopDefault(import('~pages/post.vue'));\r\n \r\n if (!matched.length) {\r\n console.log('not-exist');\r\n\r\n app.router.addRoutes([\r\n {\r\n path: to.path,\r\n component: dynamicView, \r\n }], { override: true });\r\n\r\n\r\n next(to.path);\r\n\r\n \r\n } else {\r\n console.log('route exist');\r\n next() \r\n }\r\n \r\n })\r\n}\r\n```\r\n\r\npages/post.vue\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv class = \"test\">test post page for this path\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\n export default {\r\n \r\n }\r\n\u003C/script>\r\n```\r\n\r\n\r\nСode is quite simplified, when checking if (! Matched.length) we add a simple march page \"pages / post.vue\" and should display the simple text \"test post page for this path\"\r\nFor example, by contacting any url that does not exist, the route should be added.\r\nexample.com/other_url\r\nFrom time to time I see errors:\r\nCannot read property 'scrollToTop' of undefined (for now)\r\nCannot read property 'layout' of undefined error (periodically)\r\n404 page not found (periodically)\r\n\r\n\r\nLink to \"codesandbox\"\r\nhttps://codesandbox.io/s/nuxt-nuxt-i18n-issue-1044-forked-t33du\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n",[2079,2082],{"name":2080,"color":2081},"pending triage","E99695",{"name":2033,"color":2034},8696,"Nuxt dynamic routes, addRoutes ssr, 404 or Cannot read property 'layout' of undefined error or can't access property \"scrollToTop\", Page.options is undefined","2023-01-22T15:38:40Z","https://github.com/nuxt/nuxt/issues/8696",0.664087,{"description":2089,"labels":2090,"number":2092,"owner":1991,"repository":1991,"state":2036,"title":2093,"updated_at":2094,"url":2095,"score":2096},"Hello. I am trying to use manually created pages/routes along with dynamically generated, but seems like it is not working.\r\n\r\nIs there any option to use Nuxt like this:\r\n\r\n\r\n\r\n`wtf` route doesn't work on `articles/wtf/` endpoint. Only the routes that comes from API in `_section` is working.\r\n\r\nSince I can't find proper way to insert components in dynamic routes (that fetch data and then `v-html` it from API), I want to have an opportunity sometimes create manually rich pages, where I can use components etc, and not being dependent on `v-for` and `v-html` schemes.\r\n\r\nHow to achieve that?\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/c1526\">#c1526\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2091],{"name":2033,"color":2034},1703,"Dynamic routes along with manually created?","2023-01-18T15:54:38Z","https://github.com/nuxt/nuxt/issues/1703",0.6650908,["Reactive",2098],{},["Set"],["ShallowReactive",2101],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"Yhcm7yIpqnVnp9ufDV1HWgnKFj0QwCiVfofV47DrVL8":-1},"/nuxt/nuxt/6838"]