Vue Plugin

Installation

Register the plugin with your Vue app:

Vue 3

import { createApp } from 'vue'
import { MountPlugin } from 'vue-mount-plugin'
import App from './App.vue'

const app = createApp(App)

// Install with default name ($show)
app.use(MountPlugin, { zIndex: 2000 })

Vue 2

import Vue from 'vue'
import { MountPlugin } from 'vue-mount-plugin'

Vue.use(MountPlugin, { zIndex: 2000 })

Plugin Options

interface MountPluginOptions {
  // Custom name for the global method (default: '$show')
  name?: string

  // Default z-index for all instances
  zIndex?: number

  // Default container
  container?: string | Element

  // Default transition
  transition?: string | TransitionOptions
}

Usage in Components

Vue 3 Options API

export default {
  methods: {
    showModal() {
      this.$show(Modal, {
        props: { title: 'Hello' }
      })
    }
  }
}

Vue 2

export default {
  methods: {
    showModal() {
      this.$show(Modal, {
        props: { title: 'Hello' },
        parent: this
      })
    }
  }
}

Custom Method Name

// Use custom name
app.use(MountPlugin, { name: '$mount' })

// Now available as
this.$mount(Modal, options)

Global Configuration

The plugin options become global defaults:

app.use(MountPlugin, {
  zIndex: 2000,
  transition: 'fade'
})

// All instances inherit these defaults
this.$show(Modal) // zIndex: 2000, transition: 'fade'

// Override per instance
this.$show(Modal, { zIndex: 3000 }) // zIndex: 3000

TypeScript Support

Add type declaration for the global method:

// env.d.ts
import { MountOptions, MountInstance } from 'vue-mount-plugin'

declare module 'vue' {
  interface ComponentCustomProperties {
    $show: (component: any, options?: MountOptions) => MountInstance
  }
}

Comparison: Plugin vs Direct Import

Feature	Plugin (this.$show)	Direct Import (mount)
Global defaults	✅	✅ (via setGlobalConfig)
Template access	✅	❌
Composition API	❌	✅
Tree-shaking	❌	✅
TypeScript	Needs declaration	Built-in

Recommendation

For Vue 3 with Composition API, prefer direct import:

import { mount } from 'vue-mount-plugin'

For Vue 2 or Options API, the plugin approach is convenient.