Nuxt: HeadExtra

Implements useHeadEx() composable to automatically propagate title and description to social media compatible meta tags.

yarn add nuxt-head-ex

...and add the module to your nuxt.config.ts:

 modules: ['nuxt-head-ex'],

Configuration example (see types.ts for more information / parameters):

export default defineNuxtConfig({
  modules: ['nuxt-head-ex'],
  headExtra: {
    extra: 'My Sweet Website', // appended to titles
    separator: '•', // used to separate title components / extra
    defaults: {
      // you can use {{fullPath}} to pass the path to a dynamic image generator
      socialImageURL: 'https://l422y.com/images/share.png?path={{fullPath}}',
      description: 'Senior full-stack engineer and creative technologist with over 20 years’ experience and a focus in software, interactive and web development.'
    }
  }
})

You can override the title rendering function altogether:

<script setup>
  const app = useNuxtApp()
  app.$headExtra.renderTitle = function ({ title, subtitle, section, separator, extra }) {
    let renderedTitle = `${section && section?.length > 0 ? ` ${separator} ${section}` : ''}${extra && extra.length > 0 ? (title ? `  ${separator} ` : '') + extra : ''}`
    if (title) {
      renderedTitle = `⚡️ ${title}${renderedTitle}`
    } else {
      title = renderedTitle
    }
  return renderedTitle
}
</script>

Usage:

<script setup>
  useHeadEx({
  title: `${project?.title}`,
  subtitle,
  section: `PROJECTS`,
  description: `${excerpt}`
})
</script>

Accessing updated values:

const nuxt = useNuxtApp()
const sectionTitle = useState('sectionTitle')

// set up a callback
nuxt.$headExtra.callback = (headObj) => { /*...*/
}

// ...or use the `headExtra:update` nuxt hook
nuxt.hook('headExtra:update', (headObj) => {
  sectionTitle = headObj.meta.find(v => v.name === 'clean:section')
})

Accessing the currently used input reflectively:

app.vue

<template>
  <div v-if="hExValues?.section">
    hExValues.section = "{{ hExValues.section }}"
  </div>
  <NuxtPage/>
</template>
<script setup>
  const hExValues = useState('headExtraValues')
</script>

pages/test.vue

<template>
  <section id="testing">
    Now we're cooking with gas!
  </section>
</template>
<script setup>
  useHeadEx({
      title: 'Testing!', 
      section: 'Testing Section'
  })
</script>

Development

• Run npm run dev:prepare to generate type stubs.
• Use npm run dev to start playground in development mode.

Credits

Made with 💚 by Larry Williamson / @l422y