Nuxt•3w ago

Conditional Popup Pages / Nested Routes

I’m working on a Nuxt 3 (or actually Nuxt 4) project, and I need some help with implementing a feature. Here’s what I’m trying to achieve: • I’d like certain pages to open as popups/overlays when navigating to them via the frontend. • However, if someone accesses those pages directly (e.g., by entering the URL in the browser), they should render as full-page views. I’ve been exploring nested pages and the popup/overlay is no problem, but the normal render view part is not clear to me. Any tips, code snippets, or resources would be greatly appreciated! Thanks in advance! 🚀

3 Replies

kapa.ai•3w ago

Hi @tierra. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To implement the feature you're describing in Nuxt 3/4, you can use a combination of the Modal component and programmatic navigation control. Here's an approach you can take: 1. Use the Modal component from Nuxt UI for the popup/overlay functionality. 2. Implement a logic to determine whether to show the content as a modal or a full page. First, add the UModals component to your app.vue:

<template>
  <div>
    <NuxtPage />
    <UModals />
  </div>
</template>

<template>
  <div>
    <NuxtPage />
    <UModals />
  </div>
</template>

Nuxt UI Modal Documentation (https://ui.nuxt.com/components/modal#control-programmatically) Then, you can create a composable to handle the modal logic:

// composables/usePageModal.ts
export const usePageModal = () => {
  const route = useRoute()
  const isModal = ref(false)

  onMounted(() => {
    // Check if the page was navigated to from within the app
    isModal.value = !!route.meta.fromNavigation
  })

  return {
    isModal
  }
}

// composables/usePageModal.ts
export const usePageModal = () => {
  const route = useRoute()
  const isModal = ref(false)

  onMounted(() => {
    // Check if the page was navigated to from within the app
    isModal.value = !!route.meta.fromNavigation
  })

  return {
    isModal
  }
}

In your page component:

<script setup>
const { isModal } = usePageModal()
const modal = useModal()

// Your page content component
const PageContent = defineComponent({
  // ... your page content
})

// If it's a modal, open it programmatically
if (isModal.value) {
  modal.open(PageContent)
} else {
  // Render the content normally
}
</script>

<template>
  <div v-if="!isModal">
    <PageContent />
  </div>
</template>

<script setup>
const { isModal } = usePageModal()
const modal = useModal()

// Your page content component
const PageContent = defineComponent({
  // ... your page content
})

// If it's a modal, open it programmatically
if (isModal.value) {
  modal.open(PageContent)
} else {
  // Render the content normally
}
</script>

<template>
  <div v-if="!isModal">
    <PageContent />
  </div>
</template>

For navigation within your app, use the navigateTo function with custom meta:

navigateTo('/your-page', {
  meta: {
    fromNavigation: true
  }
})

navigateTo('/your-page', {
  meta: {
    fromNavigation: true
  }
})

This approach allows you to: 1. Open the page as a modal when navigated from within the app. 2. Render the page normally when accessed directly via URL. Remember to style your modal and page content appropriately to ensure a consistent user experience in both views. Note that this solution is a high-level approach and may need adjustments based on your specific Nuxt setup and requirements. The exact implementation might vary depending on your project structure and other factors. Nuxt Navigation Documentation (https://nuxt.com/docs/getting-started/transitions#disable-transitions) If you need more detailed information or have specific questions about implementation, please feel free to ask! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@910553251949195276> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

tierraOP•3w ago

I don't think this makes sense -- does anyone else have an idea?

Gaming

Programming

Conditional Popup Pages / Nested Routes