CODEWITHSUNDEEP
vuejs3nuxt.jsnuxt3.jsheadless-ui
Sukanta Paul
Sukanta Paul

Reputation: 792

Modal over modal in Nuxt UI, which is controlled programetically with useModal, closes both

I've 2 components ComponentA and ComponentB both are Nuxt UI Modal components. something like this:

<script setup lang="ts">
const model = defineModel({type: Boolean, default: false})
</script>
<u-modal v-model="model">
    <u-card class="flex flex-col gap-6 py-6">
      ...
      ...
    </div>
  </u-modal>

Programetically I can open modal like this.

const modal = useModal();
modal.open(ComponentA, options);

Now, I cannot instantiate multiple modal instances of same component like the following. It just keeps the 2nd instance replacing the first.

const modalA1 = useModal();
modalA1.open(ComponentA, options);

const modalA2 = useModal();
modalA2.open(ComponentA, options);

Also, using 2 different components not working. Something like this:

const modalA = useModal();
modalA.open(ComponentA, options);

const modalB = useModal();
modalB.open(ComponentB, options);

It only keeps modalB and replaces modalA.

I must use multiple modals. Although, if I nest multiple modals inside <template>...</template> they works perfectly, but not programetically.

How to solve this? Please Help.

Upvotes: 0

Views: 522

Answers (2)

feather black
feather black

Reputation: 1

From the source code, we can see that nuxt-ui only supports one modal. You can only realize one by yourself. I also have this trouble.

source-code-image

Upvotes: 0

jojostev97
jojostev97

Reputation: 104

I dint get to try it out but have you tried using :key ? https://vuejs.org/api/built-in-special-attributes#key . Could be that Vue is reusing the vnodes unless you specify they are different.

const modalA1 = useModal();
modalA1.open(ComponentA, { key: 'modalA1', ...otherOptions });

Upvotes: 0

Related Questions