createContext

The createContext factory function is at the heart of all functionality in Vuetify0. It is a small wrapper around the Vue 3 provide↗ and inject↗ APIs, allowing you to create a context that can be shared across components.

Copy Page as Markdown

Advanced100% coverageJan 14, 2026

Usage

import { shallowRef } from 'vue'
import { createContext } from '@vuetify/v0'
import type { ShallowRef } from 'vue'

interface MyContext {
  isDisabled: ShallowRef<boolean>
}

const [useContext, provideContext] = createContext<MyContext>('namespace')

provideContext({ isDisabled: shallowRef(false) })

export { useContext }

Architecture

createContext is the foundation for all dependency injection in Vuetify0:

API Reference

The following API details are for the createContext composable.

Functions

useContext

(key: ContextKey<Z>, defaultValue?: Z) => Z

Injects a context provided by an ancestor component.

provideContext

(key: ContextKey<Z>, context: Z, app?: App<any>) => Z

Provides a context to all descendant components.

createContext

(keyOrOptions?: ContextKey<Z> | CreateContextOptions, defaultValue?: Z) => readonly [() => Z, (context: Z, app?: App) => Z] | readonly [(key: string, defaultValue?: Z) => Z, (key: string, context: Z, app?: App) => Z]

Options

suffix

string

Optional suffix to append to the runtime key