Head Extra Personal Project

Nuxt Module / 2022 / 5

HeadExtra is a TypeScript Nuxt module that 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
    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.'
    }
  }
})

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>