Page Routes

Master creating and managing page routes in ShipAhead using Nuxt’s file-based routing system for organized navigation.

Tools Used

• Nuxt: Provides file-based routing to automatically generate page routes from the app/pages/ directory.

Setup & Configuration

Nuxt automatically creates routes based on files in the app/pages/ directory. No manual configuration is needed unless customizing routes with definePageMeta.

1. Add a Page:

   • Create a .vue file in app/pages/ (e.g., app/pages/about.vue for the /about route).
   • Example:
     app/pages/about.vue

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

2. Dynamic Routes:

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

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

3. Nested Routes:

   • Create a folder with an index.vue file (e.g., app/pages/dashboard/index.vue for /dashboard).
   • Add child routes in the same folder (e.g., app/pages/dashboard/settings.vue for /dashboard/settings).

Usage

• Basic Routing: Add .vue files to app/pages/ to create routes automatically (e.g., app/pages/contact.vue creates /contact).

• Customizing Pages: Use definePageMeta to set a layout or middleware (e.g., for admin pages requiring authentication):

  app/pages/admin/index.vue

  definePageMeta({
    layout: 'admin', // Uses layouts/admin.vue
    requireAuth: true, // Applies authentication middleware
  });

  • 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 dynamic route parameters (e.g., slug) using useRoute() in your components.

• Verify Routes: Test routes by running npm run dev and navigating to URLs (e.g., http://localhost:3000/about).

• Learn More: For advanced routing, visit Nuxt Pages Documentation.