https://github.com/l422y/nuxt-head-ex

Implements `useHeadEx()` composable to automatically propagate title and description to social media compatible meta tags.
https://github.com/l422y/nuxt-head-ex

meta-tags nuxt nuxtjs open-graph seo seo-optimization social-media vue

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/l422y/nuxt-head-ex
• Owner: L422Y
• Created: 2022-11-13T03:38:20.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-05T21:40:10.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T04:51:14.083Z (2 months ago)
• Topics: meta-tags, nuxt, nuxtjs, open-graph, seo, seo-optimization, social-media, vue
• Language: TypeScript
• Homepage:
• Size: 200 KB
• Stars: 16
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Nuxt: HeadExtra

![npm](https://img.shields.io/npm/dt/nuxt-head-ex)

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

tags.

```shell

yarn add nuxt-head-ex

```

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

```shell

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

```

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

```js

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:

```js

  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

}

```

Usage:

```js

  useHeadEx({

  title: `${project?.title}`,

  subtitle,

  section: `PROJECTS`,

  description: `${excerpt}`

})

```

Accessing updated values:

```js

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`**

```js

  


    hExValues.section = "{{ hExValues.section }}"

  

  


  const hExValues = useState('headExtraValues')

```

#### **`pages/test.vue`**

```js

  

    Now we're cooking with gas!

  

  useHeadEx({

      title: 'Testing!', 

      section: 'Testing Section'

  })

```

## Development

- Run `npm run dev:prepare` to generate type stubs.

- Use `npm run dev` to start [playground](./playground) in development mode.

## Credits

Made with 💚 by [Larry Williamson](https://l422y.com) / [@l422y](https://twitter.com/l422y)