Reference

Magic variables

There are 40 of them, available in any expression without declaring anything. They exist because window, document and V itself are not allowed inside expressions: this is how an expression reaches the DOM and the services.

<div v-data="{}">
  <button @click="$toast.success('Saved!')">Notify</button>
  <button @click="$clipboard.copy('PROMO10')">Copy the coupon</button>
  <button @click="$refs.search.focus()">Focus</button>
  <input v-ref="search" placeholder="I am the one getting the focus">
  <p>Screen width: { $screen.width }px · Online: { $network.online }</p>
</div>

Context

Magic	What it is
`$el`	The element that created the scope
`$refs`	Elements marked with `v-ref`, merging the ancestor scopes
`$data`	Data of the current scope
`$root`	Data of the root scope
`$parent`	Data of the parent scope
`$self`	Instance of the nearest component, or the scope data

State and services

Magic	What it is
`$store`	Every global store
`$http`	HTTP client
`$toast`	Notifications
`$modal`, `$dialog`, `$alert`, `$confirm`, `$prompt`	Dialogs
`$storage`, `$session`, `$cookie`, `$cache`, `$url`	Storage
`$clipboard`	Copying to and reading from the clipboard
`$theme`	Light and dark theme
`$sound`	Sound effects
`$form`	State of the nearest form
`$history`	Undo and redo controller, when there is a `v-history` above

Not every read is reactive

$store, $theme, $screen, $network, $route and $form read reactive state, and the screen follows along. $storage, $session, $cookie, $cache and $url read at the moment the expression runs: keep the result in a scope variable when the screen has to react to it.

Environment

Magic	What it is
`$screen`	Width, height and breakpoints, reactive
`$network`	State of the connection, reactive
`$device`	Touch, size, motion and theme

Flow

Magic	What it is
`$nextTick`	Waits for the DOM to catch up
`$watch(expression, cb)`	Watches an expression
`$dispatch(name, detail?)`	Fires a `CustomEvent` that travels up the tree
`$log(...)`	Writes to the console with a `[Voodoo]` prefix

In the full build only

Magic	What it is
`$route`	The current route
`$router`	Navigation control
`$t`	Translates
`$locale`	The active language
`$i18n`	The languages module
`$n`, `$c`, `$d`, `$rt`	Number, currency, date and relative time

Local ones

These exist only inside certain expressions:

Variable	Where
`$event`	Event handlers
`$detail`	Event handlers, carrying the `detail` of the `CustomEvent`
`$value`, `$old`	`v-watch` combined with `v-model`
`$data`, `$response`	`v-on-success` and `v-on-error` on forms

Writing your own

V.magic('$user', () => loggedUser);
V.magic('$format', () => (value) => V.formatCurrency(value));
V.magic('$height', (scope) => scope.el.offsetHeight);

The getter receives the active scope, so a magic can depend on where it was used. The dollar sign is added for you when you leave it out, and magics are read-only, except for the ones that expose a set method of their own. V.magics is the Map holding every registered one. The custom directives and plugins page has the full example.