createPlugin
This composable allows you to create a Vue plugin with specific functionality that can be registered and used within your application.
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
}
})
}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:
<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:
Examples
Dashboard Features
This example demonstrates how to create a plugin that manages feature flag state using createPlugin, createContext, and createGroup. The plugin composes a group for selection state instead of reimplementing toggle logic.
File breakdown:
| File | Role |
|---|---|
plugin.ts | Defines the DashboardContext (wrapping a GroupContext), creates the context tuple, and exports the createDashboardPlugin factory |
DashboardProvider.vue | Creates the plugin instance and provides the context, rendering only a slot |
DashboardConsumer.vue | Consumes the context via useDashboard() and uses the group’s toggle(), selectAll(), and unselectAll() methods |
dashboard.vue | Entry point that composes Provider around Consumer |
Key patterns:
Provider components are invisible wrappers that render only a slot
The plugin composes
createGroup— each feature is a ticket with selection state built inIn a real app, the factory would return a plugin for
app.use()— here it returnscontextdirectly for the sandboxConsumers import only from
plugin.ts, never from the Provider
My Dashboard
2 / 5 features enabled
Active features
Functions
createPluginContext
(defaultNamespace: string, factory: (options: Omit<O, "namespace">) => E, config?: PluginContextConfig<Omit<O, "namespace">, E> | undefined) => readonly [<_E extends E = E>(_options?: O) => ContextTrinity<_E>, (_options?: O) => Plugin, <_E extends E = E>(namespace?: string) => _E]Creates the three standard functions for a plugin composable.