N
Nuxt•4d ago
Sanjay Tomar

Trying to achive theme base routing in Nuxt3

I am using nuxt3, I want to achieve theme pages. my folder structure is like: - pages - (alpha) - about.vue - (default) - about.vue If my theme is alpha, it should load a page (alpha)/index.vue, if there is no theme it should load (default)/index.vue but i will get the theme from cookies. if cookies theme="alpha" then it renders the page (alpha)/index.vue and url should be loalhost:3000/. theme should not be included in url.
2 Replies
kapa.ai
kapa.ai•4d ago
Hi @Sanjay Tomar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To achieve theme-based routing in Nuxt 3 as you've described, you'll need to combine a few Nuxt features: layouts, middleware, and cookies. Here's how you can implement this: 1. First, use useCookie to read the theme from cookies: 
const theme = useCookie('theme', {
  default: () => 'default'
})
const theme = useCookie('theme', {
  default: () => 'default'
})
2. Create a custom layout that will dynamically choose the correct page based on the theme: 
<!-- layouts/theme.vue -->
<template>
  <NuxtLayout :name="theme">
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup>
const theme = useCookie('theme', {
  default: () => 'default'
})
</script>
<!-- layouts/theme.vue -->
<template>
  <NuxtLayout :name="theme">
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup>
const theme = useCookie('theme', {
  default: () => 'default'
})
</script>
3. Create a middleware to set the layout for all pages: 
// middleware/theme.global.ts
export default defineNuxtRouteMiddleware((to) => {
  setPageLayout('theme')
})
// middleware/theme.global.ts
export default defineNuxtRouteMiddleware((to) => {
  setPageLayout('theme')
})
4. Adjust your pages directory structure: 
pages/
  (alpha)/
    index.vue
    about.vue
  (default)/
    index.vue
    about.vue
pages/
  (alpha)/
    index.vue
    about.vue
  (default)/
    index.vue
    about.vue
5. In your app.vue, use the NuxtLayout component: 
<!-- app.vue -->
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
<!-- app.vue -->
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
This setup will allow Nuxt to choose the correct page based on the theme cookie, without including the theme in the URL. The global middleware ensures that all pages use the theme layout, which in turn selects the appropriate theme-specific layout. Remember to set the theme cookie when you want to change themes. You can do this using useCookie as well: 
const theme = useCookie('theme')
theme.value = 'alpha' // or 'default'
const theme = useCookie('theme')
theme.value = 'alpha' // or 'default'
This approach leverages Nuxt 3's built-in features for routing and layouts, as described in the Nuxt 3 documentation on layouts and routing. Note that this solution assumes that all your theme-specific pages are duplicated in each theme directory. If you want to fall back to the default theme for pages that don't exist in the alpha theme, you'll need to implement additional logic in your middleware or use a more complex routing strategy. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4d ago
<@791296639566348309> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?