{"id":19846165,"url":"https://github.com/l422y/nuxt-head-ex","last_synced_at":"2025-06-20T20:35:55.354Z","repository":{"id":63156034,"uuid":"565332623","full_name":"L422Y/nuxt-head-ex","owner":"L422Y","description":"Implements `useHeadEx()` composable to automatically propagate title and description to social media compatible meta tags.","archived":false,"fork":false,"pushed_at":"2023-03-05T21:40:10.000Z","size":205,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-11T04:51:14.083Z","etag":null,"topics":["meta-tags","nuxt","nuxtjs","open-graph","seo","seo-optimization","social-media","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/L422Y.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-11-13T03:38:20.000Z","updated_at":"2024-07-11T06:44:39.000Z","dependencies_parsed_at":"2023-02-14T08:17:25.551Z","dependency_job_id":null,"html_url":"https://github.com/L422Y/nuxt-head-ex","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/L422Y%2Fnuxt-head-ex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/L422Y%2Fnuxt-head-ex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/L422Y%2Fnuxt-head-ex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/L422Y%2Fnuxt-head-ex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/L422Y","download_url":"https://codeload.github.com/L422Y/nuxt-head-ex/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224278438,"owners_count":17285080,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["meta-tags","nuxt","nuxtjs","open-graph","seo","seo-optimization","social-media","vue"],"created_at":"2024-11-12T13:10:40.639Z","updated_at":"2024-11-12T13:10:41.414Z","avatar_url":"https://github.com/L422Y.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nuxt: Head\u003cem\u003eExtra\u003c/em\u003e\n![npm](https://img.shields.io/npm/dt/nuxt-head-ex)\n\nImplements `useHeadEx()` composable to automatically propagate title and description to social media compatible meta\ntags.\n\n```shell\nyarn add nuxt-head-ex\n```\n\n...and add the module to your `nuxt.config.ts`:\n\n```shell\n modules: ['nuxt-head-ex'],\n```\n\nConfiguration example (see `types.ts` for more information / parameters):\n\n```js\nexport default defineNuxtConfig({\n  modules: ['nuxt-head-ex'],\n  headExtra: {\n    extra: 'My Sweet Website', // appended to titles\n    separator: '•', // used to separate title components / extra\n    defaults: {\n      // you can use {{fullPath}} to pass the path to a dynamic image generator\n      socialImageURL: 'https://l422y.com/images/share.png?path={{fullPath}}',\n      description: 'Senior full-stack engineer and creative technologist with over 20 years’ experience and a focus in software, interactive and web development.'\n    }\n  }\n})\n```\n\nYou can override the title rendering function altogether:\n\n```js\n\u003cscript setup\u003e\n  const app = useNuxtApp()\n  app.$headExtra.renderTitle = function ({ title, subtitle, section, separator, extra }) {\n    let renderedTitle = `${section \u0026\u0026 section?.length \u003e 0 ? ` ${separator} ${section}` : ''}${extra \u0026\u0026 extra.length \u003e 0 ? (title ? `  ${separator} ` : '') + extra : ''}`\n    if (title) {\n      renderedTitle = `⚡️ ${title}${renderedTitle}`\n    } else {\n      title = renderedTitle\n    }\n  return renderedTitle\n}\n\u003c/script\u003e\n```\n\nUsage:\n\n```js\n\u003cscript setup\u003e\n  useHeadEx({\n  title: `${project?.title}`,\n  subtitle,\n  section: `PROJECTS`,\n  description: `${excerpt}`\n})\n\u003c/script\u003e\n```\n\nAccessing updated values:\n\n```js\nconst nuxt = useNuxtApp()\nconst sectionTitle = useState('sectionTitle')\n\n// set up a callback\nnuxt.$headExtra.callback = (headObj) =\u003e { /*...*/\n}\n\n// ...or use the `headExtra:update` nuxt hook\nnuxt.hook('headExtra:update', (headObj) =\u003e {\n  sectionTitle = headObj.meta.find(v =\u003e v.name === 'clean:section')\n})\n```\n\nAccessing the currently used input reflectively:\n\n#### **`app.vue`**\n```js\n\u003ctemplate\u003e\n  \u003cdiv v-if=\"hExValues?.section\"\u003e\n    hExValues.section = \"{{ hExValues.section }}\"\n  \u003c/div\u003e\n  \u003cNuxtPage/\u003e\n\u003c/template\u003e\n\u003cscript setup\u003e\n  const hExValues = useState('headExtraValues')\n\u003c/script\u003e\n```\n#### **`pages/test.vue`**\n```js\n\u003ctemplate\u003e\n  \u003csection id=\"testing\"\u003e\n    Now we're cooking with gas!\n  \u003c/section\u003e\n\u003c/template\u003e\n\u003cscript setup\u003e\n  useHeadEx({\n      title: 'Testing!', \n      section: 'Testing Section'\n  })\n\u003c/script\u003e\n```\n\n## Development\n\n- Run `npm run dev:prepare` to generate type stubs.\n- Use `npm run dev` to start [playground](./playground) in development mode.\n\n\n## Credits\n\nMade with 💚 by [Larry Williamson](https://l422y.com) / [@l422y](https://twitter.com/l422y)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fl422y%2Fnuxt-head-ex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fl422y%2Fnuxt-head-ex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fl422y%2Fnuxt-head-ex/lists"}