Nuxt•2mo ago

How to detect when USlideover is closed?

Hey everyone, I need an event that triggers when USlideover is closed - either by clicking the "close" button or by clicking the overlay. I couldn't find anything about this in the documentations: useSlideover Composable USlideover Component Does anyone know if there's a way to detect this? Thanks! --- Nuxt: 3.15 NuxtUI: 3.0.0-alpha.10

Nuxt UI

useSlideover Vue Composable - Nuxt UI v3

A composable to programmatically control a Slideover component.

Nuxt UI

Slideover Vue Component - Nuxt UI v3

A dialog that slides in from any side of the screen.

4 Replies

kapa.ai•2mo ago

Hi @ZapicDev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, I can answer your question about detecting when USlideover is closed in Nuxt UI. The USlideover component in Nuxt UI provides a v-model that you can use to detect when the slideover is closed. When the slideover closes, either by clicking the close button or the overlay, the v-model value will change to false. Here's how you can implement this:

<script setup lang="ts">
const isOpen = ref(false)

watch(isOpen, (newValue) => {
  if (!newValue) {
    console.log('Slideover was closed')
    // Perform any actions you need when the slideover is closed
  }
})
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <USlideover v-model="isOpen">
      <!-- Slideover content -->
    </USlideover>
  </div>
</template>

<script setup lang="ts">
const isOpen = ref(false)

watch(isOpen, (newValue) => {
  if (!newValue) {
    console.log('Slideover was closed')
    // Perform any actions you need when the slideover is closed
  }
})
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <USlideover v-model="isOpen">
      <!-- Slideover content -->
    </USlideover>
  </div>
</template>

In this example, we're using a watch on the isOpen ref to detect when it changes to false, which indicates that the slideover has been closed. Additionally, if you need more control, you can use the prevent-close prop and handle the closing yourself:

<script setup lang="ts">
const isOpen = ref(false)

function handleClosePrevented() {
  console.log('Attempt to close slideover')
  // You can add your custom logic here
  isOpen.value = false // Manually close the slideover
}
</script>

<template>
  <USlideover v-model="isOpen" prevent-close @close-prevented="handleClosePrevented">
    <!-- Slideover content -->
  </USlideover>
</template>

<script setup lang="ts">
const isOpen = ref(false)

function handleClosePrevented() {
  console.log('Attempt to close slideover')
  // You can add your custom logic here
  isOpen.value = false // Manually close the slideover
}
</script>

<template>
  <USlideover v-model="isOpen" prevent-close @close-prevented="handleClosePrevented">
    <!-- Slideover content -->
  </USlideover>
</template>

This approach allows you to detect closing attempts and perform custom actions before actually closing the slideover. Source: Slideover Component Remember that these examples are using Nuxt UI version 3.0.0-alpha.10, which is the version you mentioned. Always check the latest documentation for any updates or changes in newer versions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

ZapicDevOP•2mo ago

Update: I took a look at the component: https://github.com/nuxt/ui/blob/v3/src/runtime/components/Slideover.vue Looks like it already handles those events, but they’re not exposed. Would be awesome if this could be added in a future update.

GitHub

ui/src/runtime/components/Slideover.vue at v3 · nuxt/ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS. - nuxt/ui

manniL•2mo ago

best to write an issue/feature request 👍

Gaming

Programming

How to detect when USlideover is closed?

Did you find this page helpful?