N
Nuxt•6d ago
ShadowCaster

How do I create routes in Nuxt UI?

I am trying to create a navigation across multiple pages/views in the Nuxt UI. How do I set up the routes globally?
2 Replies
kapa.ai
kapa.ai•6d ago
Hi @ShadowCaster. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create routes and set up navigation across multiple pages/views in a Nuxt UI project, you should use Nuxt's file-based routing system. Here’s how you can do it: 1. Create Pages for Each Route Add Vue files to the pages/ directory. Each file automatically becomes a route. For example: 
-| pages/
---| index.vue        // mapped to "/"
---| about.vue        // mapped to "/about"
---| contact.vue      // mapped to "/contact"
-| pages/
---| index.vue        // mapped to "/"
---| about.vue        // mapped to "/about"
---| contact.vue      // mapped to "/contact"
Nuxt will generate routes for each file based on its name and location in the directory structure. Nested folders create nested routes. Dynamic routes can be created using square brackets, e.g., pages/posts/[id].vue for /posts/:id Docs: Routing. 2. Set Up Navigation Use the <NuxtLink> component to navigate between pages. For example, in your layout or header: 
<template>
  <nav>
    <NuxtLink to="/">Home</NuxtLink>
    <NuxtLink to="/about">About</NuxtLink>
    <NuxtLink to="/contact">Contact</NuxtLink>
  </nav>
</template>
<template>
  <nav>
    <NuxtLink to="/">Home</NuxtLink>
    <NuxtLink to="/about">About</NuxtLink>
    <NuxtLink to="/contact">Contact</NuxtLink>
  </nav>
</template>
Docs: Navigation 3. Global Navigation with Nuxt UI Components If you want a more advanced navigation menu, you can use Nuxt UI components like UNavigationMenu in your app.vue or layout. Example: 
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const route = useRoute()
const items = computed<NavigationMenuItem[]>(() => [
  { label: 'Home', to: '/', active: route.path === '/' },
  { label: 'About', to: '/about', active: route.path.startsWith('/about') },
  { label: 'Contact', to: '/contact', active: route.path.startsWith('/contact') }
])
</script>
<template>
  <UHeader>
    <UNavigationMenu :items="items" />
  </UHeader>
  <UMain>
    <NuxtPage />
  </UMain>
</template>
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'
const route = useRoute()
const items = computed<NavigationMenuItem[]>(() => [
  { label: 'Home', to: '/', active: route.path === '/' },
  { label: 'About', to: '/about', active: route.path.startsWith('/about') },
  { label: 'Contact', to: '/contact', active: route.path.startsWith('/contact') }
])
</script>
<template>
  <UHeader>
    <UNavigationMenu :items="items" />
  </UHeader>
  <UMain>
    <NuxtPage />
  </UMain>
</template>
Nuxt UI: Header Example 4. Custom Routing (Advanced) If you need more control, you can customize routes using app/router.options.ts or Nuxt hooks, but for most use cases, the file-based routing is sufficient Docs: Custom Routing. --- Summary:
- Add Vue files to pages/ for each route. - Use <NuxtLink> for navigation. - Use Nuxt UI components like UNavigationMenu for a styled navigation menu. - For advanced needs, customize routing via configuration files. Let me know if you need a specific example or further details! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•6d ago
<@295226139654488065> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?