Examples

This section provides practical examples for common use cases.

Try Online

Experience vue-mount-plugin directly in your browser with our interactive playgrounds:

⚡

Vue 3 Playground

Try vue-mount-plugin with Vue 3 + Composition API

🔧

Vue 2 Playground

Try vue-mount-plugin with Vue 2 + Options API

Available Examples

Example	Description
Modal	Basic modal component
Confirm Dialog	Promise-based confirmation
Toast	Singleton toast notifications
Context Inheritance	Proper context passing

Quick Examples

Basic Modal

import { mount } from 'vue-mount-plugin'
import Modal from './Modal.vue'

mount(Modal, {
  props: { title: 'Hello World' }
})

Confirm Dialog

const confirmed = await mount(ConfirmDialog, {
  props: { message: 'Are you sure?' }
})

if (confirmed) {
  // User confirmed
}

Toast Notification

mount(Toast, {
  singleton: true,
  props: { message: 'Success!' }
})

With Context

// Vue 3
import { getCurrentInstance } from 'vue'

const { appContext } = getCurrentInstance()!

mount(MyComponent, {
  app: appContext.app
})

// Vue 2
mount(MyComponent, {
  parent: this
})

Run Examples Locally

Clone the repository and run the example apps:

git clone https://github.com/saqqdy/vue-mount-plugin.git
cd vue-mount-plugin

# Install dependencies
pnpm install

# Run Vue 3 example
cd examples/vue3
pnpm dev

# Run Vue 2 example
cd examples/vue2
pnpm dev