@modalor/vue

A modal state manager for Vue3.

Install

pnpm add @modalor/vue

Usage

1. Render the Modalor in the root of your app.

<script lang="ts" setup>
import { Modalor } from '@modalor/vue'
</script>

<!-- App.vue -->
<template>
  <!-- ... -->
  <Modalor />
</template>

2. create a modal with your own modal component

// modal.ts
import { create } from '@modalor/vue'
import { h } from 'vue'

interface ModalProps {
  title: string
  // ...
}

// 1. create modal wrapper
export const createModal = create<ModalProps>(({ onCancel, onOk, open, isOkLoading, props: { renderChildren, ...rest } }) => (
  h(YourModalComponent, { onCancel, onOk, open, isOkLoading, ...rest }, renderChildren)
))

3. create a modal with a content component

// modals/userProfile.ts
import { createModal } from './../modal'

// 1.define modal content props
interface ModalContentProps {
  username: string
  // ...
}

// 2. define modal content resolve values
interface ModalContentResolveValues {
  newUsername: string
  // ...
}
// 3. create modal wrapper with modal content props and resolve values
const userProfileModal = createModal<ModalContentProps, ModalContentResolveValues>(props => (
  h(YourModalContentComponent, { ...props })
))

4. use api to show modal

<script setup>
// 1. import your modal
import { userProfileModal } from '@/modals/userProfile'

async function showModal() {
  // 2. show modal
  const [isOk, result] = await userProfileModal.show({
    username: 'John'
  }, {
    title: 'User Profile', // you can override modal props
  })

  // 3. handle result
  if (isOk) {
    console.log(result.newUsername) // will be your resolve values
  }
}
</script>

<template>
  <button @click="showModal">
    Show Modal
  </button>
</template>