Nuxt UI - Responsive Model/Drawer

[QaahirStewart]

Description

Hey guys, can we implement a responsive model with Nuxt UI.

Similar to the: Maybe fix the repeated content of the Dialog and Drawer.
https://www.shadcn-vue.com/docs/components/drawer.html

Additional context

No response

[benjamincanac]

You can already do this similar to the example of shadcn/vue:

<script lang="ts" setup>
import { createReusableTemplate, useMediaQuery } from '@vueuse/core'

const [UseTemplate, GridForm] = createReusableTemplate()
const isDesktop = useMediaQuery('(min-width: 768px)')

const open = ref(false)

const state = reactive({
  email: undefined,
  username: undefined
})

const title = 'Edit profile'
const description = 'Make changes to your profile here. Click save when you\'re done.'
</script>

<template>
  <UseTemplate>
    <UForm :state="state" class="space-y-4">
      <UFormField label="Email" name="email">
        <UInput v-model="state.email" placeholder="[email protected]" />
      </UFormField>
      <UFormField label="Username" name="username">
        <UInput v-model="state.username" placeholder="@shadcn" />
      </UFormField>

      <UButton label="Save changes" type="submit" />
    </UForm>
  </UseTemplate>

  <UModal v-if="isDesktop" v-model:open="open" :title="title" :description="description">
    <UButton label="Edit profile" color="neutral" variant="outline" />

    <template #body>
      <GridForm />
    </template>
  </UModal>

  <UDrawer v-else v-model:open="open" :title="title" :description="description">
    <UButton label="Edit profile" color="neutral" variant="outline" />

    <template #body>
      <GridForm />
    </template>
  </UDrawer>
</template>

[zAlweNy26]

@benjamincanac can it be managed with the useOverlay composable without any further addition?

[benjamincanac]

Yes of course, you can create two overlays and call the one you want. Something like:

<script setup lang="ts">
const isDesktop = useMediaQuery('(min-width: 768px)')

const modal = overlay.create(MyModal)
const drawer = overlay.create(MyDrawer)

function onButtonClick() {
  if (isDesktop) {
    modal.open()
  } else {
    drawer.open()
  }
}
</script>