Manage the head section of your page with ease. Set title, meta description etc. easily by using this Vue 3 Plugin
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.
Run npm or yarn installation of the vue3-head package:
$ yarn add vue3-head$ npm install vue3-head// 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')<script setup>
import { useHead } from 'vue3-head'
useHead({
title: 'Your website',
//...
})
</script>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).
<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>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>| 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 | |
| Array | An array of Twitter tags | ||
| styles | Array | An array of style tags | |
| scripts | Array | An array of script tags |