composition-api-helpers

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

useAttrs() signature

useAttrs() returns a Record<string, unknown> containing the attrs object from the Setup Context, including fallthrough attributes of the current component. It is intended to be used in <script setup> where the setup context object is not available. Type signature: function useAttrs(): Record<string, unknown>

useSlots() signature

useSlots() returns a Record<string, (...args: any[]) => VNode[]> containing the slots object from the Setup Context, which includes parent passed slots as callable functions that return Virtual DOM nodes. It is intended to be used in <script setup> where the setup context object is not available. For TypeScript, defineSlots() should be preferred instead. Type signature: function useSlots(): Record<string, (...args: any[]) => VNode[]>

useModel() signature and options

useModel() is the underlying helper that powers defineModel() and is available only in Vue 3.4+. Type signature: function useModel(props: Record<string, any>, key: string, options?: DefineModelOptions): ModelRef. DefineModelOptions has two optional properties: get?: (v: T) => any and set?: (v: T) => any. ModelRef<T, M extends PropertyKey = string, G = T, S = T> is a Ref<G, S> with model properties.

useModel() example

Example of useModel() in a non-SFC component: ```js export default { props: ['count'], emits: ['update:count'], setup(props) { const msg = useModel(props, 'count') msg.value = 1 } } ```

useModel() usage details

useModel() can be used in non-SFC components when using raw setup() function. It expects the props object as the first argument and the model name as the second argument. The optional third argument can be used to declare custom getter and setter for the resulting model ref. Unlike defineModel(), you are responsible for declaring the props and emits yourself.

useTemplateRef() signature

useTemplateRef() is available in Vue 3.5+ and returns a shallow ref whose value will be synced with the template element or component with a matching ref attribute. Type signature: function useTemplateRef<T>(key: string): Readonly<ShallowRef<T | null>>

useTemplateRef() example

Example of useTemplateRef() usage: ```vue <script setup> import { useTemplateRef, onMounted } from 'vue' const inputRef = useTemplateRef('input') onMounted(() => { inputRef.value.focus() }) </script> <template> <input ref="input" /> </template> ```

useId() signature

useId() is available in Vue 3.5+ and is used to generate unique-per-application IDs for accessibility attributes or form elements. Type signature: function useId(): string

useId() example

Example of useId() usage: ```vue <script setup> import { useId } from 'vue' const id = useId() </script> <template> <form> <label :for="id">Name:</label> <input :id="id" type="text" /> </form> </template> ```

useId() uniqueness and stability

IDs generated by useId() are unique-per-application. Multiple calls in the same component generate different IDs, and multiple instances of the same component calling useId() will also have different IDs. IDs are guaranteed to be stable across server and client renders, making them safe for SSR applications without hydration mismatches.

useId() app.config.idPrefix

If there are multiple Vue application instances on the same page, ID conflicts can be avoided by giving each app an ID prefix via app.config.idPrefix.

useId() pitfall with computed()

useId() should not be called inside a computed() property as it may cause instance conflicts. Instead, declare the ID outside of computed() and reference it within the computed function.

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.

useCssModule API for accessing CSS Modules

The injected classes from CSS Modules can be accessed in setup() and <script setup> via the useCssModule API from vue. useCssModule() returns classes for default <style module> blocks. useCssModule('classes') returns classes for <style module="classes"> with custom injection names, accepting the matching module attribute value as the first argument.

useCssModule example with <script setup>

Example showing useCssModule with <script setup>: ```vue <script setup lang="ts"> import { useCssModule } from 'vue' const classes = useCssModule() </script> <template> <p :class="classes.red">red</p> </template> <style module> .red { color: red; } </style> ``` This example demonstrates importing useCssModule and using it to access CSS Module classes in a component with <script setup>.

useSSRContext API signature and export

useSSRContext is a runtime API. Its type signature is: function useSSRContext<T = Record<string, any>>(): T | undefined. It is used to retrieve the context object passed to renderToString() or other server render APIs.

useSSRContext example usage

Example of useSSRContext: <script setup> import { useSSRContext } from 'vue'; if (import.meta.env.SSR) { const ctx = useSSRContext(); // attach properties to the context } </script>. The retrieved context can be used to attach information needed for rendering the final HTML, such as head metadata.

Give your agent this brain