Nuxt•4w ago

Setting up a static multi page app

I can't find many resources on how exactly you should structure/develop an MPA with nuxt. I do not want to use vue-router or anything like that, and I want each endpoint of my site to end up as a static page as well. I'm currently stuck on how to render an endpoint (which I put at pages/index.html) at / on the dev server, but I don't know if I should use the pages folder at all if I'm not using the router.

6 Replies

kapa.ai•4w ago

Hi @HydrogenMacro. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To set up a static multi-page app (MPA) in Nuxt without using vue-router, you can indeed achieve this, but you'll need to make some specific configurations. Here's how you can approach this based on the information from the knowledge sources: 1. First, you can use the app.vue file as your main entry point. This allows you to create a single-page application without using the pages/ directory or vue-router. As mentioned in the Nuxt documentation:

   <template>
     <div>
       <h1>Hello World!</h1>
     </div>
   </template>

   <template>
     <div>
       <h1>Hello World!</h1>
     </div>
   </template>

2. For multiple pages, you can create separate HTML files in the public/ directory (which replaces the static/ directory in Nuxt 3). As explained in this Stack Overflow answer:

   /public
     -html
       -page1
         -index.html
       -page2
         -index.html

   /public
     -html
       -page1
         -index.html
       -page2
         -index.html

You can then access these pages at /html/page1/ and /html/page2/ respectively. 3. To generate static pages for each endpoint, you can use the nuxi generate command. This will create static HTML files for your pages. You can configure which routes to prerender in your nuxt.config.ts file, as shown in the Nuxt documentation:

   export default defineNuxtConfig({
     nitro: {
       prerender: {
         routes: ["/", "/html/page1", "/html/page2"]
       }
     }
   });

   export default defineNuxtConfig({
     nitro: {
       prerender: {
         routes: ["/", "/html/page1", "/html/page2"]
       }
     }
   });

4. If you want to avoid generating unnecessary routes, you can clear all routes except the ones you specify:

   export default defineNuxtConfig({
     hooks: {
       'prerender:routes' ({ routes }) {
         routes.clear() // Clear all auto-generated routes
       }
     },
     nitro: {
       prerender: {
         routes: ["/", "/html/page1", "/html/page2"]
       }
     }
   });

   export default defineNuxtConfig({
     hooks: {
       'prerender:routes' ({ routes }) {
         routes.clear() // Clear all auto-generated routes
       }
     },
     nitro: {
       prerender: {
         routes: ["/", "/html/page1", "/html/page2"]
       }
     }
   });

This approach allows you to create a static multi-page app without using vue-router, and each endpoint will end up as a static page. You're correct in not using the pages/ folder if you're not using the router. For development, you can serve your public/ directory content directly. The index.html in the public/ directory will be served at the root (/) by default. Remember, this approach means you're not leveraging many of Nuxt's built-in features for routing and page management. Make sure this aligns with your project requirements and that you're okay with the trade-offs involved in not using Nuxt's standard routing system. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@822562547814891592> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

hydrogenmacroOP•4w ago

How do I make it so that nuxi generate builds a vue file from /pages/page1/index.vue to /dist/page1/index.html? @kapa.ai How do I make it so that nuxi generate builds a vue file from /pages/page1/index.vue to /dist/page1/index.html?

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To make nuxi generate build a Vue file from /pages/page1/index.vue to /dist/page1/index.html, you can use Nuxt's built-in static site generation capabilities. Here's how you can achieve this: 1. First, make sure you have your Vue component file at /pages/page1/index.vue. Nuxt will automatically create a route for this page. 2. Then, use the nuxi generate command to build your static site. As mentioned in the Nuxt documentation, this command pre-renders every route of your application and stores the result in plain HTML files:

   npx nuxi generate

   npx nuxi generate

3. By default, Nuxt will generate static HTML files for all your routes, including /page1/index.html. However, to ensure specific routes are pre-rendered, you can configure this in your nuxt.config.ts file:

   export default defineNuxtConfig({
     nitro: {
       prerender: {
         routes: ['/page1']
       }
     }
   })

   export default defineNuxtConfig({
     nitro: {
       prerender: {
         routes: ['/page1']
       }
     }
   })

This configuration tells Nuxt to specifically pre-render the /page1 route. 4. After running nuxi generate, you'll find your generated static files in the .output/public directory, not in a dist directory. The /page1/index.html file will be located at .output/public/page1/index.html. It's important to note that Nuxt 3 uses the .output directory instead of dist. If you specifically need the output in a dist directory, you might need to manually copy the files or adjust your deployment process. Remember, this approach uses Nuxt's routing system. If you want to avoid using the routing system entirely, you might need to consider a different approach, such as the one described in the previous answer using the public directory. Nuxt Prerendering Documentation provides more details on how to configure pre-rendering for your Nuxt application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@822562547814891592> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

hydrogenmacroOP•4w ago

nope, nitro.prerender.routes is just not working at all oh well

Gaming

Programming

Setting up a static multi page app

Did you find this page helpful?