Vue · all subjects

custom directives

13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

defineCustomElement function signature and return type

defineCustomElement accepts the same argument as defineComponent (ComponentOptions & CustomElementsOptions or ComponentOptions['setup']), and optionally a CustomElementsOptions object as a second argument. It returns a custom element constructor with signature { new (props?: object): HTMLElement }.

CustomElementsOptions interface

CustomElementsOptions has the following properties: styles (string[], optional) - an array of inlined CSS strings for injecting CSS into the element's shadow root; configureApp (function, optional, 3.5+) - a function that configures the Vue app instance for the custom element; shadowRoot (boolean, optional, 3.5+, defaults to true) - set to false to render without a shadow root; nonce (string, optional, 3.5+) - if provided, will be set as the nonce attribute on style tags injected to the shadow root.

defineCustomElement with styles option

The styles option accepts an array of inlined CSS strings that are injected into the element's shadow root, providing CSS encapsulation for custom elements.

defineCustomElement configureApp option for Vue 3.5+

The configureApp option in CustomElementsOptions is a function (available in Vue 3.5+) that can be used to configure the Vue app instance for the custom element. This function receives the App instance as a parameter.

defineCustomElement shadowRoot option for Vue 3.5+

The shadowRoot option (available in Vue 3.5+) is a boolean that defaults to true. Set to false to render the custom element without a shadow root, which means <style> tags in custom element SFCs will no longer be encapsulated.

defineCustomElement nonce option for Vue 3.5+

The nonce option (available in Vue 3.5+) accepts a string value. If provided, it will be set as the nonce attribute on style tags injected to the shadow root.

defineCustomElement second argument syntax

Options can be passed via a second argument to defineCustomElement instead of being part of the component itself. For example: defineCustomElement(Element, { configureApp(app) { /* ... */ } })

defineCustomElement returns a custom element constructor

The return value from defineCustomElement is a custom element constructor that can be registered using the native customElements.define() API.

defineCustomElement example usage

Example: import { defineCustomElement } from 'vue'; const MyVueElement = defineCustomElement({ /* component options */ }); customElements.define('my-vue-element', MyVueElement);

useHost Composition API helper

useHost is a Composition API helper (available in Vue 3.5+) that returns the host element of the current Vue custom element.

useShadowRoot Composition API helper

useShadowRoot is a Composition API helper (available in Vue 3.5+) that returns the shadow root of the current Vue custom element.

this.$host Options API property

this.$host is an Options API property (available in Vue 3.5+) that exposes the host element of the current Vue custom element.

Custom directives in script setup

Globally registered custom directives work normally in <script setup>. Local custom directives do not need explicit registration but must follow the naming scheme vNameOfDirective (e.g., vMyDirective). If importing a directive, rename it to fit the required naming scheme.

Give your agent this brain