Reference
The V object
V is a function and an object at the same time. Anything marked
full only exists in voodoo.full.min.js.
V('#list .item').addClass('active'); // chainable collection
V.toast.success('Done'); // serviceswindow.Voodoo is the same object.
Core
| Member | Description |
|---|---|
V.version | Published version |
V.createApp(options) | Creates an application, in Vue's format. See the two modes |
V.whenReady(fn) | Runs when the document has a body and stops changing |
V.whenElement(selector, fn) | Runs when the element exists, even if it does not exist yet |
V.ready(fn?) | The same, in callback form and in promise form |
V.config | Global configuration. See configuration |
V.start(root?) | Walks and initializes. Called on its own in the browser builds |
V.walk(node, scope?) | Initializes a piece of DOM |
V.refresh(root?) | Reinitializes a root |
V.destroy(node) | Unmounts, stopping effects and removing listeners |
V.stopObserving() | Turns the MutationObserver off |
V.getScope(node) | Scope attached to the node, if there is one |
V.findScope(node) | Effective scope, walking up the ancestors |
V.addCleanup(node, fn) | Registers cleanup for when the node is removed |
V.parseAttribute(name, value) | Turns an attribute into the description of a directive |
V.onError(fn) | Sets the error handling for the whole application |
Reactivity
| Member | Description |
|---|---|
V.reactive(object) | Deeply reactive object |
V.ref(value) | Reactive reference, in .value |
V.shallowRef(value) | Reference without depth |
V.computed(getter) | Derived value with a cache. Accepts { get, set } |
V.effect(fn, options?) | Reactive effect |
V.watch(source, cb, options?) | Watches, and calls on what changed |
V.watchEffect(fn) | Effect with cleanup between runs |
V.nextTick(fn?) | Waits for the DOM to catch up |
V.flushSync() | Applies everything pending, now |
V.stop(runner) | Ends an effect |
V.effectScope(detached?), V.EffectScope | Effect scope, and the class |
V.toRaw(value) | The original object behind the proxy |
V.markRaw(value) | Marks an object so it never becomes a proxy |
V.unref(value) | value.value when it is a ref |
State
| Member | Description |
|---|---|
V.data(values) | Puts values into the root scope |
V.scope | The root scope |
V.store(name, definition?, options?) | Creates or retrieves a store |
V.stores | Object holding every store |
V.storeNames() | Lists the names |
V.removeStore(name) | Removes it and stops the persistence |
Components and directives
| Member | Description |
|---|---|
V.component(name, definition) | Registers a component |
V.components, V.instances | Map of the definitions and Set of the mounted instances |
V.directive(name, definition) | Registers a directive with a lifecycle |
V.directives | Map with the registered directives |
V.magic(name, getter), V.magics | Registers a magic variable, and the Map of them |
V.use(plugin, options?) | Installs a plugin |
V.PRIORITY, V.Scope | Priority constants and the scope class |
Expressions
| Member | Description |
|---|---|
V.parse(text) | Parses and returns the tree |
V.tokenize(text) | List of tokens |
V.evaluate(node, scope) | Evaluates a tree |
V.evaluateIn(text, scope, context?) | Parses and evaluates, without throwing |
V.stringify(value) | The conversion used in interpolation |
V.clearParseCache() | Clears the expression cache |
V.globals | List of the allowed globals |
V.VoodooSyntaxError, V.VoodooRuntimeError | Error classes |
What the expression accepts
Expressions go through a lexer, a Pratt parser and a tree interpreter of their own. There is no
eval, which is what allows running under a restrictive Content Security Policy, and
what explains the limits.
Works: reading and writing variables, dot and bracket access, method calls, arithmetic,
comparison and logical operators, ternary, optional chaining (?.), coalescing
(??), object and array literals, template strings, single-expression arrow
functions, and sequences separated by semicolons.
Does not work: function, new, blocks with braces,
if and loops, await, assignment to globals.
Identifiers that are in no scope are looked up in a closed list:
Math JSON Date Number String Boolean Array Object Intl RegExp Promise
parseInt parseFloat isNaN isFinite encodeURIComponent decodeURIComponent console
Everything outside it returns undefined, including window,
document, fetch, localStorage and V itself.
That is deliberate: an attribute coming out of the database cannot reach the browser API.
To let through what is yours:
V.config.globals.formatCPF = (v) => V.applyMask(v, 'cpf');
V.config.globals.APP = { version: '2.1', environment: 'production' };Chainable DOM
V(selector) and V.query(selector, context?) return a collection.
| Group | Methods |
|---|---|
| Traversal | find, closest, parent, parents, children, siblings, next, prev, first, last, eq, filter, not, has, is, add, slice, each, get, toArray |
| Content | text, html, val, attr, removeAttr, prop, data |
| Style | css, width, height, offset, position, scrollTop, addClass, removeClass, toggleClass, hasClass |
| Structure | append, prepend, before, after, appendTo, prependTo, replaceWith, wrap, unwrap, remove, empty, clone |
| Events | on, off, once, trigger, emit |
| Visibility and animation | show, hide, toggle, fadeIn, fadeOut, slideUp, slideDown, slideToggle, animate, scrollIntoView |
| Form | serialize, serializeObject, focus, blur, select |
| Runtime | walk, destroy |
Beyond those: V.query(input, context?), V.ready(fn),
V.fromHtml(html) and V.Collection.
HTTP
The full surface is in the HTTP client reference. In short:
V.http.get/post/put/patch/delete/head, V.http.request(config),
V.http.upload, V.http.sse, V.http.stream, the three
interceptors, setBaseURL, setHeader, setToken,
clearCache, flushOfflineQueue, defaults, and the
V.HttpError class.
Forms, validation and masks
| Member | Description |
|---|---|
V.validate(target), V.validateForm(form) | Validates a form or a field |
V.validator(name, fn, message?) | Registers a rule |
V.messages | Default messages |
V.serializeForm(form, options?) | Object or FormData |
V.showFormErrors(form, errors), V.showFieldError, V.clearErrors | Errors coming from the server |
V.mask(value, pattern), V.applyMask, V.unmask | Applies and removes a mask |
V.registerMask(name, patternOrFn), V.masks | Registers a mask, and the Map of them |
Interface
| Member | Description |
|---|---|
V.toast(message, options?) | Notification, with .success, .error, .warning, .info, .loading, .promise, .clear and .configure |
V.modal.open/close/toggle/closeAll/isOpen | Modals, plus opened, count, configure and labels |
V.dialog(options) | Generic dialog with buttons |
V.alert, V.confirm, V.prompt | The three ready-made dialogs |
V.hotkey(combo, handler, options?) | Global keyboard shortcut |
V.palette(options?) | Applies the palette, plus use, reset, scale, contrastText, contrastRatio, luminance and convert |
V.theme | current, resolved, set, toggle, apply, init |
V.injectStyle(id, css), V.ensureTokens() | CSS injected a single time, and the --v-* variables |
V.enter, V.leave, V.fadeIn, V.fadeOut, V.slideDown, V.slideUp, V.viewTransition | Transitions |
Storage, events and environment
| Member | Description |
|---|---|
V.storage, V.session | localStorage and sessionStorage, with automatic JSON |
V.cookie | get, set, remove, has |
V.cache | Memory with expiration: set, get, has, remove, clear, remember, size |
V.url | Query string: get, all, set, remove, merge |
V.on, V.once, V.off, V.emit | Global event bus |
V.screen, V.network | Reactive screen and connection objects |
V.clipboard, V.device, V.isBrowser | Clipboard, device and DOM detection |
V.once is the event bus. The once utility, which runs a function a
single time, is in the direct import:
import { once } from 'voodoojs/utils'.
Modules in the full build
| Area | Members |
|---|---|
| Animation | V.animate, V.spring, V.stagger, V.inView, V.scrollProgress, V.motion, V.easings |
| Charts | V.renderChart, V.chart, V.charts, V.chartColors |
| Router | V.router and its methods, V.navigate, V.route, V.resolveRoute |
| Languages | V.i18n and its methods, V.t, V.setLocale, V.getLocale |
| Devtools | V.xray, V.enableXrayShortcut, V.devtools |
Utilities
uuid, uid, sleep, parseDuration,
debounce, throttle, memoize, clone,
merge, groupBy, unique, chunk,
sortBy, get, set, random,
sample, slugify, truncate, capitalize,
titleCase, escapeHtml, stripTags,
formatCurrency, formatNumber, formatDate,
relativeTime, formatFileSize, formatPercent and
setFormatDefaults, with signature and example in the
utilities reference.