vue-meta is a Vue.js plugin that allows you to manage your app's metadata. This includes setting the title, meta tags, and other head elements dynamically based on the current route or component state.
Setting Page Title
This feature allows you to dynamically set the page title for different routes or components.
{"metaInfo":{"title":"My Page Title"}}Setting Meta Tags
This feature allows you to dynamically set meta tags, such as description and Open Graph tags, for different routes or components.
{"metaInfo":{"meta":[{"name":"description","content":"This is a description of my page"},{"property":"og:title","content":"My Page Title"}]}}Setting Link Tags
This feature allows you to dynamically set link tags, such as canonical links, for different routes or components.
{"metaInfo":{"link":[{"rel":"canonical","href":"https://www.example.com/my-page"}]}}react-helmet is a similar package for React applications. It allows you to manage changes to the document head, such as title and meta tags, in a declarative way. Compared to vue-meta, react-helmet is designed specifically for React and offers similar functionalities.
Nuxt.js is a framework for creating Vue.js applications, and it includes built-in support for managing meta information through its `head` property in components. While Nuxt.js offers a broader range of features for server-side rendering and static site generation, its meta management capabilities are comparable to those of vue-meta.
vue-head is another Vue.js plugin for managing the document head. It provides similar functionalities to vue-meta, such as setting the title and meta tags dynamically. However, vue-meta is generally more popular and has a larger community.
:warning: This is the readme for the next branch of vue-meta with Vue3 support
:information_source: Vue3 support for vue-meta is considered in mostly-stable-alpha stage
<template>
<div class="layout"
...
<metainfo>
<template v-slot:title="{ content }">{{ content }} - Yay!</template>
</metainfo>
</div>
</template>
<script>
import { useMeta } from 'vue-meta'
export default {
setup () {
useMeta({
title: 'My Example App',
htmlAttrs: {
lang: 'en',
amp: true
}
})
}
}
</script>
<html lang="en" amp>
<head>
<title>My Example App - Yay!</title>
...
</head>
Vue Meta is a Vue.js plugin that allows you to manage your app's metadata. It is inspired by and works similar as react-helmet for react. However, instead of setting your data as props passed to a proprietary component, you simply export it as part of your component's data using the metaInfo property.
These properties, when set on a deeply nested component, will cleverly overwrite their parent components' metaInfo, thereby enabling custom info for each top-level view as well as coupling metadata directly to deeply nested subcomponents for more maintainable code.
Please find the documention on https://vue-meta.nuxtjs.org
Looking for more examples what vue-meta can do for you? Have a look at the examples
$ yarn add vue-meta@next
$ npm install vue-meta@next --save
import { watch } from 'vue'
import { useMeta, useActiveMeta } from 'vue-meta'
export default {
setup () {
const counter = ref(0)
// Add meta info
// The object passed into useMeta is user configurable
const { meta } = useMeta({
title: 'My Title',
})
watchEffect(() => {
const counterValue = counter.value
meta.description = `Counted ${counterValue} times`
})
// Or use a computed prop
const computedMeta = computed(() => ({
title: 'My Title',
description : `Counted ${counter.value} times`
}))
const { meta, onRemoved } = useMeta(computedMeta)
onRemoved(() => {
// Do something as soon as this metadata is removed,
// eg because the component instance was destroyed
})
// Get the currently used metainfo
const metadata = useActiveMeta()
watch(metadata, (newValue) => {
// metadata was updated, do something
})
}
}
The useApi can also be used outside of a setup function, but then you need to get a reference to the metaManager somehow
const { unmount } = useMeta(
{
og: {
something: 'test'
}
},
metaManager
)
unmount() // Remove metadata when needed
import { createSSRApp } from 'vue'
import { renderToStringWithMeta } from 'vue-meta'
import { App, metaManager } from './App'
export function renderPage() {
const app = createSSRApp(App)
app.use(metaManager)
const [appHtml, ctx] = await renderToStringWithMeta(app)
return `
<html ${ctx.teleports.htmlAttrs || ''}>
<head ${ctx.teleports.headAttrs || ''}>
${ctx.teleports.head || ''}
</head>
<body ${ctx.teleports.bodyAttrs || ''}>
<div id="app">${appHtml}</div>
${ctx.teleports.body || ''}
</body>
</html>`
}
Click here if you are looking for the old v2 readme
Click here if you are looking for the old v1 readme
FAQs
Manage HTML metadata in Vue.js components with ssr support
The npm package vue-meta receives a total of 110,929 weekly downloads. As such, vue-meta popularity was classified as popular.
We found that vue-meta demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
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.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.