PROJΞCTSΞXPΞRIΞNCΞRΞFΞRΞNCΞSSKILLSBLOGABOUT
CONTACTRESUME
  • CodePen
  • Stack Overflow
  • LinkedIn
  • GitHub
  • Soundcloud
  • Mixcloud
  • Spotify

Head Extra Personal Project

Nuxt Module / 2022 / 5
ROLES
  • Ideation
  • Planning
  • Design
  • Development

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>
TECHNOLOGY
  • Frameworksframeworks
    • node
    • nuxt
    • vue
    • npm
  • Codeprogramming
    • typescript
    • json
    • webstorm
VIEW ON NPMVIEW ON GITHUB