Head Extra Personal Project
Nuxt Module / 5HeadExtra 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 callbacknuxt.$headExtra.callback = (headObj) => { /*...*/}// ...or use the `headExtra:update` nuxt hooknuxt.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>