createPlugin

Factory for creating Vue plugins with typed dependency injection and lifecycle hooks.

Usage

For most cases, use createPluginContext — it generates the full plugin tuple from a factory function:

import { createPluginContext } from '@vuetify/v0'

interface AnalyticsOptions {
  trackPageviews?: boolean
}

interface AnalyticsContext {
  track: (event: string) => void
}

export const [createAnalyticsContext, createAnalyticsPlugin, useAnalytics] =
  createPluginContext<AnalyticsOptions, AnalyticsContext>(
    'my:analytics',
    (options) => ({
      track: (event) => {
        if (options.trackPageviews) console.log(event)
      },
    }),
  )

app.use(createAnalyticsPlugin({ trackPageviews: true }))

<script setup lang="ts">
  import { useAnalytics } from './plugins/analytics'

  const analytics = useAnalytics()
  analytics.track('page_view')
</script>

Low-level API

Use createPlugin directly when you need fine-grained control over plugin setup, or when composing with existing createContext instances:

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

interface MyPluginContext {
  app: string
}

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
    }
  })
}

Architecture

createPlugin wraps createContext for Vue plugin registration:

Persistence

Plugins can automatically save and restore state across page reloads using useStorage. Add persist and restore hooks to the plugin config, then consumers opt in with persist: true.

Plugin author

Define what to save and how to restore in the createPluginContext config:

import { createPluginContext } from '@vuetify/v0'

export const [createThemeContext, createThemePlugin, useTheme] =
  createPluginContext('v0:theme', createTheme, {
    setup: (context, app, options) => {
      // adapter setup...
    },
    // Return the value to save — called reactively
    persist: ctx => ctx.selectedId.value,
    // Apply saved value on load — called before setup
    restore: (ctx, saved) => ctx.select(saved),
  })

Consumer

app.use(createThemePlugin({ persist: true }))

When persist: true is passed, the plugin automatically:

1. Reads from useStorage using the plugin namespace as key

2. Calls restore with the saved value before setup runs

3. Watches the persist return value and writes changes to storage

Lifecycle

The critical ordering is restore before setup. This means adapters (like the theme CSS variable injector) see the correct restored state on their first run — no flash of wrong values.

Hook signatures

interface PluginContextConfig<O, E> {
  /** Return the value to persist — called reactively inside a watch source */
  persist?: (context: E) => unknown
  /** Restore previously persisted state — called before setup */
  restore?: (context: E, saved: unknown) => void
}

The persist return value is stored under the plugin namespace key (e.g. v0:theme). restore receives whatever was stored — cast to the expected type inside the hook.

Built-in support

Examples