Page Routes

Setup

Nuxt automatically generates routes from files in the app/pages/ directory. You only need to customize routing when using definePageMeta.

1. Add a page
   • Create a .vue file in app/pages/ (example: app/pages/about.vue creates /about).
     app/pages/about.vue

     <template>
       <div>About ShipAhead</div>
     </template>
     

2. Dynamic Routes:
   • Use square brackets for parameters (e.g., app/pages/blogs/[slug].vue creates /blogs/my-post).
   • Example:
     app/pages/blogs/[slug].vue

     <template>
       <div>Blog: {{ useRoute().params.slug }}</div>
     </template>
     

3. Nested Routes:
   • Use folders with index.vue (example: app/pages/dashboard/index.vue creates /dashboard).
   • Add child routes in the same folder (example: app/pages/dashboard/settings.vue → /dashboard/settings).

Usage

• Basic Routing: Add .vue files to app/pages/ to create pages automatically.
• Customizing Pages: Use definePageMeta to set a layout or middleware:
  app/pages/admin/index.vue

  definePageMeta({
    layout: 'admin',
    requireAuth: true,
  });
  

  • layout: 'admin': Applies the admin layout from layouts/admin.vue.
  • requireAuth: true: Restricts access to authenticated users, defined in ShipAhead’s middleware.
• Dynamic Parameters: Access values like slug using useRoute().
• Verify Routes: Run npm run dev and navigating to URL (e.g., http://localhost:3000/about).
• Learn More: See Nuxt routing docs at Nuxt Pages Documentation.