Socket
Socket
Sign inDemoInstall

nuxt-head-ex

Package Overview
Dependencies
165
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

nuxt-head-ex

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


Version published
Maintainers
1
0

Weekly downloads

Readme

Source

Nuxt: HeadExtra

npm

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

Keywords

FAQs

Last updated on 05 Mar 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc