N
Nuxt•3d ago
salomon_.

How can I detect specific page in layout?

I have a marketing.vue layout that wrap all pages, this layout contains Navigation.vue component which has float menu, on some pages I need to turn off the float effect, how I can do that?
2 Replies
kapa.ai
kapa.ai•3d ago
Hi @salomon_.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- There are several ways to detect a specific page in your layout and conditionally modify components like your floating menu. Here are the main approaches you can use in Nuxt: 1. Using Page Meta You can define custom metadata for each page using definePageMeta and then access this metadata in your layout: 
<!-- pages/some-page.vue -->
<script setup>
definePageMeta({
  floatingMenu: false // Custom property to control floating menu
})
</script>
<!-- pages/some-page.vue -->
<script setup>
definePageMeta({
  floatingMenu: false // Custom property to control floating menu
})
</script>
Then in your layout: 
<!-- layouts/marketing.vue -->
<script setup>
const route = useRoute()
const showFloatingMenu = computed(() => {
  // Access the custom meta property, default to true if not specified
  return route.meta.floatingMenu !== false
})
</script>

<template>
  <div>
    <Navigation :floating="showFloatingMenu" />
    <slot />
  </div>
</template>
<!-- layouts/marketing.vue -->
<script setup>
const route = useRoute()
const showFloatingMenu = computed(() => {
  // Access the custom meta property, default to true if not specified
  return route.meta.floatingMenu !== false
})
</script>

<template>
  <div>
    <Navigation :floating="showFloatingMenu" />
    <slot />
  </div>
</template>
This approach is clean and recommended as it keeps the control at the page level, where you can decide which pages should have the floating menu disabled Docs > Api > Utils > definePageMeta. 2. Using Route Information Alternatively, you can check the current route path directly in your layout: 
<!-- layouts/marketing.vue -->
<script setup>
const route = useRoute()
const showFloatingMenu = computed(() => {
  // List pages where floating menu should be disabled
  const nonFloatingPages = ['/about', '/contact']
  return !nonFloatingPages.includes(route.path)
})
</script>

<template>
  <div>
    <Navigation :floating="showFloatingMenu" />
    <slot />
  </div>
</template>
<!-- layouts/marketing.vue -->
<script setup>
const route = useRoute()
const showFloatingMenu = computed(() => {
  // List pages where floating menu should be disabled
  const nonFloatingPages = ['/about', '/contact']
  return !nonFloatingPages.includes(route.path)
})
</script>

<template>
  <div>
    <Navigation :floating="showFloatingMenu" />
    <slot />
  </div>
</template>
3. Dynamic Layout Control For more complex scenarios, you can use setPageLayout to dynamically change layouts based on conditions: 
<script setup>
// In a component or middleware
function disableFloatingMenu() {
  // You could set a state that the layout can access
  useState('floatingMenu', () => false)
}
</script>
<script setup>
// In a component or middleware
function disableFloatingMenu() {
  // You could set a state that the layout can access
  useState('floatingMenu', () => false)
}
</script>
Then in your layout: 
<!-- layouts/marketing.vue -->
<script setup>
const floatingMenuState = useState('floatingMenu', () => true)
</script>

<template>
  <div>
    <Navigation :floating="floatingMenuState" />
    <slot />
  </div>
</template>
<!-- layouts/marketing.vue -->
<script setup>
const floatingMenuState = useState('floatingMenu', () => true)
</script>

<template>
  <div>
    <Navigation :floating="floatingMenuState" />
    <slot />
  </div>
</template>
This approach using useState allows you to control the floating menu state from anywhere in your application Docs > Api > Utils > set-page-layout. The first approach using definePageMeta is generally the most straightforward and maintainable solution for your specific use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@1029431292170874910> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?