vue3-head
v1.0.4
Published
Vue 3 plugin to manage head meta tags
Downloads
257
Maintainers
Readme
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
Resources
- 📺 IT Pabst YouTube
- Vue JS Seminars and Coaching
- Vue JS 3 JSON LD Plugin
- Vue JS 3 Head Plugin
- Laravel Seminars and Coaching
- Andreas Pabst