composables/usehead

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

useHead signature and return type

The useHead composable has the signature: export function useHead(meta: MaybeComputedRef<MetaObject>): ActiveHeadEntry<UseHeadInput>. It accepts a MaybeComputedRef<MetaObject> parameter and returns an ActiveHeadEntry<UseHeadInput> object that provides patch() and dispose() methods.

ActiveHeadEntry return type methods

The ActiveHeadEntry<Input> return type provides two methods: patch(input: Input) which updates the entry with new input and clears previous side effects, and dispose() which removes the entry from the active head and queues side effects for removal.

MetaObject interface structure

The MetaObject interface contains the following properties: title (string), titleTemplate (string or function), base (Base), link (Link array), meta (Meta array), style (Style array), script (Script array), noscript (Noscript array), htmlAttrs (HtmlAttributes), and bodyAttrs (BodyAttributes).

useHead title parameter

The title property in MetaObject is a string that sets the page title.

useHead titleTemplate parameter

The titleTemplate property accepts either a string with %s placeholder or a function with signature (title?: string) => string, and configures a dynamic template to customize the page title.

useHead base, link, meta, style, script, noscript parameters

The base property sets the <base> tag for the document. The link property is an array of link objects mapped to <link> tags. The meta property is an array of meta objects mapped to <meta> tags. The style property is an array of style objects mapped to <style> tags. The script property is an array of script objects mapped to <script> tags. The noscript property is an array of noscript objects mapped to <noscript> tags. Object properties in each array element correspond to HTML attributes.

useHead htmlAttrs and bodyAttrs parameters

The htmlAttrs property is a HtmlAttributes object that sets attributes of the <html> tag, with each object property mapped to the corresponding HTML attribute. The bodyAttrs property is a BodyAttributes object that sets attributes of the <body> tag, with each object property mapped to the corresponding HTML attribute.

useHead reactivity support

The properties of useHead can be dynamic, accepting ref, computed, and reactive properties. The meta parameter can also accept a function returning an object to make the entire object reactive.

useHead security recommendation

If the data comes from a user or other untrusted source, use useHeadSafe instead of useHead.

useHead basic meta tags example

Example showing basic meta tags in app/pages/about.vue: ```vue <script setup lang="ts"> useHead({ title: 'About Us', meta: [ { name: 'description', content: 'Learn more about our company' }, { property: 'og:title', content: 'About Us' }, { property: 'og:description', content: 'Learn more about our company' }, ], }) </script> ```

useHead reactive meta tags example

Example showing reactive meta tags using computed properties in app/pages/profile.vue: ```vue <script setup lang="ts"> const profile = ref({ name: 'John Doe' }) useHead({ title: computed(() => profile.value.name), meta: [ { name: 'description', content: computed(() => `Profile page for ${profile.value.name}`), }, ], }) </script> ```

useHead function for full reactivity example

Example showing using a function for full reactivity in app/pages/dynamic.vue: ```vue <script setup lang="ts"> const count = ref(0) useHead(() => ({ title: `Count: ${count.value}`, meta: [ { name: 'description', content: `Current count is ${count.value}` }, ], })) </script> ```

useHead external scripts and styles example

Example showing adding external scripts and styles in app/pages/external.vue: ```vue <script setup lang="ts"> useHead({ link: [ { rel: 'stylesheet', href: 'https://cdn.example.com/styles.css', }, ], script: [ { src: 'https://cdn.example.com/script.js', async: true, }, ], }) </script> ```

useHead body and HTML attributes example

Example showing setting body and HTML attributes in app/pages/themed.vue: ```vue <script setup lang="ts"> const isDark = ref(true) useHead({ htmlAttrs: { lang: 'en', class: computed(() => isDark.value ? 'dark' : 'light'), }, bodyAttrs: { class: 'themed-page', }, }) </script> ```

useHead basic usage example

Example showing basic useHead usage in app/app.vue: ```vue <script setup lang="ts"> useHead({ title: 'My App', meta: [ { name: 'description', content: 'My amazing site.' }, ], bodyAttrs: { class: 'test', }, script: [{ innerHTML: 'console.log(\'Hello world\')' }], }) </script> ```

Give your agent this brain