# Programmatically-callable vue dialog
## Installation
### Install the plugin
```bash
npm i @auswuchs/vue-dialog
```
### Add it to you vue app as a plugin
```ts
// Vue 3
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import VueDialog from '@auswuchs/vue-dialog'
const app = createApp(App)
app.use(VueDialog)
app.mount('#app')
```
```ts
// Nuxt 3
// plugins/vue-dialog.ts
import { defineNuxtPlugin } from 'nuxt/app'
import VueDialog from '@auswuchs/vue-dialog'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueDialog)
})
```
### Add `DialogContainer` to `App.vue` template:
```html
```
## Usage
Dialog component must contain emits `confirm` and `cancel` to work properly.
```html
```
```html
```
or
```html
```
## Passing data from/to dialog
You can pass props to dialog component as the second argument of the `useDialog` composable. Data must be an object with component props.
For example, if a component has a prop with the name `detail` we can pass it like this `{ detail: { ... } }`.
```javascript
const dialog = useDialog(
Dialog,
{ detail: { ... } },
)
```