createPlugin

This composable allows you to create a Vue plugin with specific functionality that can be registered and used within your application.

Copy Page as Markdown

Advanced80% coverageJan 14, 2026

Usage

Use in conjunction with the createContext composable to make Vue plugins↗ that work seemlessly with Vue Provide / Inject↗.

import { createContext, createPlugin } from '@vuetify/v0'

interface MyPluginContext {
  app: string
}

// use is the inject function and provide is the provide function
export const [useMyContext, provideMyContext] = createContext<MyPluginContext>('provide-namespace')

export function createMyPlugin () {
  const context = {
    app: 'my-app'
  }

  return createPlugin({
    namespace: 'provide-namespace',
    provide: (app: App) => {
      provideMyContext(context, app)
    },
    setup: (app: App) => {
      // For everything else not provide related
    }
  })
}

Tip

The setup and provide functions do the same thing, they are separated for semantic purposes.

Then, in your main application file, register the plugin like so:

import { createApp } from 'vue'
import { createMyPlugin } from './path/to/plugin'

const app = createApp(App)

app.use(createMyPlugin())

Now, whenever your application starts, the plugin is registered and the context is provided. Use the useMyContext function to access this context in any component:

vue

<template>
  <div>{{ context.app }}</div>
</template>

<script setup lang="ts">
  import { useMyContext } from './path/to/plugin'

  const context = useMyContext()
</script>

Architecture

createPlugin wraps createContext for Vue plugin registration:

API Reference

The following API details are for the createPlugin composable.

Functions

createPlugin

(options: PluginOptions) => Z

Creates a new Vue plugin.

Options

namespace required

string

provide required

(app: App) => void

setup

(app: App) => void