vue3-head

v1.0.4

Published

3 months ago

Vue 3 plugin to manage head meta tags

Downloads

237

0High
0Medium
0Low

andreaspabst

vuejs vue vue.js head meta description meta data

vue3-head

Manage the head section of your page with ease. Set title, meta description etc. easily by using this Vue 3 Plugin

Why is there a package?

Typically the <head> section of your app is outside of your Vue JS app. This makes it hard to manage the head section of your app with Vue JS. Use this package to embed or change the head section of your app with ease.

Things you can do with this package:

Set the title of your page
Set the meta description of your page
Set the meta keywords of your page
Set the meta author of your page
Set the meta robots of your page
Set the meta viewport of your page
Set the meta charset of your page
Set the meta http-equiv of your page
Set the meta og:[**] of your page
Set the meta twitter:[**] of your page
Set the link canonical of your page
Set the link alternate of your page
Set the link icon of your page
Set the link stylesheet of your page
Set the link dns-prefetch of your page
Set the link preconnect of your page
Set the link prerender of your page

etc.

Installation

Run npm or yarn installation of the vue3-head package:

yarn

$ yarn add vue3-head

npm

$ npm install vue3-head

Set Up your Vue Application

// App.vue

import { createApp } from 'vue'
import App from './App.vue'
import { createVue3Head } from 'vue3-head';

const app = createApp(App)
const head = createVue3Head()
app.use(head)

app.mount('#app')

Usage

Basic Usage

<script setup>
import { useHead } from 'vue3-head'

useHead({
    title: 'Your website',
    //...
})
</script>

Reactivity

It is important how you pass the data to the useHead function. If you pass a reactive object, the head will be updated automatically.

<script setup>
  import { ref } from "vue";
  import { useHead } from "vue3-head";

  const newTitle = ref("Vue 3 Head Plugin");
  const newDescription = ref("Vue 3 Head Plugin is a Vue 3 plugin that allows you to manage your document head tags with ease.");
  useHead({
    title: newTitle, // this will update the title tag
    meta: [
      { name: "description", content: newDescription.value }, // newDescription won't update the meta tag
    //...

In this example, even both newTitle and newDescription are reactive, only newTitle will update the title tag. That's because the title is passed as reference object and the content of the meta tag is passed as a string (as .value delivers the string value of the ref object).

Examples

Mixing reactivity and strings

<script setup>
import { ref } from "vue";
import { useHead } from "vue3-head";

const newTitle = ref("Vue 3 Head Plugin");
const newDescription = ref("Vue 3 Head Plugin is a Vue 3 plugin that allows you to manage your document head tags with ease.");
const theCanonical = ref("https://example.com");
const theUrl = ref("https://example.com");
const favicon = ref("https://example.com/favicon.ico");
const newViewport = ref("width=device-width, initial-scale=2");

useHead({
  title: newTitle, // this will update the title tag
  meta: [
    { name: "description", content: newDescription.value }, // newDescription won't update the meta tag
    { name: "keywords", content: "Vue 3, Head, Plugin" },
    { name: "viewport", content: newViewport.value },
  ],
  link: [
    {rel: "icon", href: favicon.value},
    {rel: "canonical", href: theCanonical.value},
    {rel: "preload", href: "https://www.funnerix.com/js/widget_loader.js?v=2.0", as: "script"},
    {rel: "stylesheet", href: "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css", integrity: "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH", crossorigin: "anonymous"},
  ],
  og: [
    {property: "og:title", content: newTitle.value},
    {property: "og:description", content: newDescription.value},
    {property: "og:url", content: theUrl.value},
  ],
  styles: [
    "body { background-color: #f0f0f0; }",
  ],
  scripts: [
    { src: "https://www.funnerix.com/js/widget_loader.js?v=2.0", defer: true },
    'console.log("Hello from Vue 3 Head Plugin")',
  ],
});
</script>

Setting the Title onClick

In case you want to change the title of your page on a button click, you can use the following code:

<template>
  <button @click="changeTitle">Change Title</button>
</template>
<script setup>
import { setTitle } from "./plugins/Vue3Head";
const changeTitle = () => {
  setTitle("New Title");
};
</script>

Props

| Name | Type | Default | Description | | --- | --- | --- | --- | | title | String | | The title of the page | | meta | Array | | An array of meta tags | | link | Array | | An array of link tags | | og | Array | | An array of Open Graph tags | | twitter | Array | | An array of Twitter tags | | styles | Array | | An array of style tags | | scripts | Array | | An array of script tags |

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

vue3-head

Why is there a package?

Installation

yarn

npm

Set Up your Vue Application

Usage

Basic Usage

Reactivity

Examples

Mixing reactivity and strings

Setting the Title onClick

Props

License

Resources

Software Tips