N
NuxtVictor Neves

how to generate static HTML pages just for some of the routes

I'm trying to generate 4 static HTML pages from a huge list of routes that the app has But I only see info for pre-render and a nuxi command (nuxi generate) also for pre-render and not for pure static HTML. One note, 99,99% of the routes I fetch from the server, and doing that using the pages:extended hook as it contains async requests and it was the only way I found to avoid the "double request" (server and then on the client) Thanks
VN
Victor Neves16d ago
Is this the right way (at nuxt config)?
nitro: {
prerender: {
routes: ['/update-browser', '/server-error'],
}
}
nitro: {
prerender: {
routes: ['/update-browser', '/server-error'],
}
}
If yes, and not having these routes set as files inside the pages folder, but having the routes fetched from the server and using the pages:extended hook to generate the routes/pages when trying to generate the static HTML pages, the routes will be available?
hooks: {
'pages:extend': async (pages) => {
await getRoutes(pages);
}
}
hooks: {
'pages:extend': async (pages) => {
await getRoutes(pages);
}
}
getRoutes()
export async function getRoutes(pages: NuxtPage[]) {
let routes: Array<IAppRoute> = [];

// The rest of the logic

const list = [...systemRoutes, ...routes];

list.forEach((route) => {
pages.push(cloneDeep(route));
});

return pages;
}
export async function getRoutes(pages: NuxtPage[]) {
let routes: Array<IAppRoute> = [];

// The rest of the logic

const list = [...systemRoutes, ...routes];

list.forEach((route) => {
pages.push(cloneDeep(route));
});

return pages;
}
no one?
M
manniL16d ago
you'd use the field you've set + nuxt build that should prerender the routes as expected
VN
Victor Neves15d ago
@manniL / TheAlexLichter thanks for the feedback. currently, I'm facing some challenges. In my initial implementation, I was using the router.options to manage the routes, so I added all related files inside app folder as described on the docs https://nuxt.com/docs/guide/going-further/custom-routing#router-options But having it this way, since I can't use the useFetch or useAsyncData composables to avoid having the requests on the server and then on the client, I refactor the implementation to call the function inside the pages:extended hook at nuxt config After some tests, I saw that this way when generating static HTML only the markup from the template gets generated, but using my previous implementation, I get the full HTML Long story short, to avoid the double request (server and client) I'm not able to generate the full HTML, but I need both both things 😕
Nuxt
Custom Routing · Nuxt Advanced
In Nuxt 3, your routing is defined by the structure of your files inside the pages directory. However, since it uses vue-router under the hood, Nuxt offers you several ways to add custom routes in your project.
VN
Victor Neves14d ago
@manniL / TheAlexLichter Can I suggest a video for your Nuxt series? "How to manage async server routes" 😅 From what I see I think there are some limitations in this area as we can't even handle them as a plugin to use the useFetch or useAsyncData cause Nuxt doesn't wait for the promise to get resolved 😦
M
manniL14d ago
what limitations exactly?
VN
Victor Neves14d ago
One is creating a plugin to manage the async requests to get the list of routes from the server, the promise doesn't get resolved From what I see, I don't think it's related to my implementation as I already saw someone reporting an issue related to this https://github.com/nuxt/nuxt/issues/23678 The other 2 ways that I did were: - Using the router options (https://nuxt.com/docs/guide/going-further/custom-routing#router-options) I'm not able to use the composables, and with that, I ended up the double request, but able to fully generate plain static HTML pages - Having the code as util, using a regular fetch, and then using the pages:extended hook, I was able to prevent the double request, but not able to fully generate plain static HTML pages
GitHub
Asynchronously adding routes at runtime doesn't work reliably · Iss...
Environment Applies to any environment. Reproduction uses Nuxt 3.7.4. Reproduction https://stackblitz.com/edit/github-wyjpmc?file=app.vue Setup Two pages exist: pages/index.vue with name home and p...
Nuxt
Custom Routing · Nuxt Advanced
In Nuxt 3, your routing is defined by the structure of your files inside the pages directory. However, since it uses vue-router under the hood, Nuxt offers you several ways to add custom routes in your project.
VN
Victor Neves11d ago
My bad 😕 After debugging I found a file that I forgot to refactor It was still using the component key instead of the file key But now I'm wondering what the difference on handling the routes as pages vs the "traditional" routes list, cause I saw that the generated server.mjs file increased from ~150kB to ~2MB
Want results from more Discord servers?
Add your server
More Posts
UDashboardPanel footer (@nuxt/ui-pro)I'm trying to put a footer on the main (`grow` enabled) panel but I can't get the css right. in the useRuntimeConfig() is returning undefined valuesIn my `.env` file I have something like this: ``` NUXT_PUBLIC_LOGIN_DOMAINS="domain1.com,domain2.co@nuxt/eslint autofix?when using `@nuxt/eslint` instead of the old `@nuxtjs/eslint-module` how does one enable autofix? `Check whether any page has fully mounted from the root App.vueSome of my pages have a ```ts definePageMeta({ hideSidebar: true }) ``` which sets the `hideSidebarGetting error "Component is already mounted" when using "useFetch()" and changing route.I am getting the error in my console: ``` [nuxt] [useFetch] Component is already mounted, please uHelp with postinstall: sh: nuxt: not foundHello, I need help with a concern I have regarding the `postinstall` script that runs `nuxt prepare`Types errors in Storybook and tests after upgrade nuxt to 3.11.0Hello there! I upgrade the nuxt version from 3.9.0 to 3.11.0, but now when I run `npm run tsc` I geNuxt eslint module helpI'm joining a new nuxt project that have vue3 eslint plugin, does the Nuxt Eslint Module replace theTailwind CSS errorKeep getting this error in my Nuxt project on saveRouting to another page leads to null parent node errorWhen converting a Vue app to Nuxt and after following directory and layout structures, routing leadsi18n doesn't work with 3.11I already reported a bug for it, just wanted to post for posterity. When using `getRoutseBaseName`,eslint vs typescript 5.45.4.3 is being pulled by nuxt but eslint doesn't like it even if I explictly install the latest `vituseNuxtApp doesn't have my custom pluginsThere are no my custom plugins inside the useNuxtApp hook, they just don't show up.Middleware called 3 times instead of 2 ? (stackblitz reproduction)Can you tell me why my middleware is called 3 times ? https://stackblitz.com/edit/github-3enzca-ixdadd class to default root div __nuxtHi, I'm migrating a VUE 3 SSR project to Nuxt 3 and saw that Nuxt adds a rot div that we don't have Maximum call stack size exceededGetting the below error after updating my nuxt version from ('^3.5.1') to ('^3.11.1). and it will brModule creation questionI'm working on a module and I need to install another module that can import/install other modules oWays to have local middleware inside server/I want to do authentication inside some of protected api routes. normally i have to put the checkingCan you use useFetch twice in one composable, once on server, once in client?I am trying to use `useFetch()` once on the server and a second time in the client, in one composablNuxt Layer: Composable from layer not foundFollowing directory structure: ```text /workspaces /project /app (the main nuxt app) /se