@hz-libs/bpe-ui-imperative

Open a Vue component from outside the page.

Docs

Install

pnpm add @hz-libs/bpe-ui-imperative

The app must already depend on Vue ^3.5.0.

Use

open shows a component and returns a promise of { event, payload }. The promise also has close() and update(props). Confirm, cancel, or close removes the imperative app once nothing is still open. A later open creates a new app.

Pass the page's plugins, such as Pinia or the router, when the opened component needs them. provide from a page component does not cross into this app. Pass data through options.props.

<script setup>
import { ref } from 'vue'
import { createImperative } from '@hz-libs/bpe-ui-imperative'

import Note from './Note.vue'

const { open } = createImperative()
const result = ref('')

const ask = () => {
  open(Note, { props: { label: 'Delete item' } }).then(answer => {
    result.value = answer.payload ? `${answer.event}: ${answer.payload}` : answer.event
  })
}
</script>

<template>
  <button type="button" @click="ask">Open note</button>
  <p>{{ result }}</p>
</template>

to accepts an element or a selector when the component should render somewhere other than the page body. Each open is a modal, so a newer one blocks the component behind it.

Exports

createImperative.