vue-meta
Manage HTML metadata in Vue.js components with ssr support
- Static
- Latest Patch
- Latest Minor
- Latest Major
- 2.4.0
- 2.3.4
- 2.3.3
- 2.3.2
- 2.3.1
- 2.3.0
- 2.2.2
- 2.2.1
- 2.2.0
- 2.1.1
- 2.1.0
- 2.0.5
- 2.0.4
- 2.0.3
- 2.0.2
- 2.0.1
- 2.0.0
- 1.6.0
- 1.5.8
- 1.5.7
- 1.5.6
- 1.5.5
- 1.5.4
- 1.5.3
- 1.5.2
- 1.5.0
- 1.4.4
- 1.4.3
- 1.4.2
- 1.4.0
- 1.3.1
- 1.3.0
- 1.2.0
- 1.1.0
- 1.0.5
- 1.0.4
- 1.0.3
- 1.0.2
- 1.0.1
- 1.0.0
- 0.5.6
- 0.5.5
- 0.5.4
- 0.5.3
- 0.5.2
- 0.5.1
- 0.5.0
- 0.4.4
- 0.4.3
- 0.4.2
- 0.4.1
- 0.4.0
- 0.3.0
- 0.2.0
- 0.1.1
- 0.1.0
- 0.0.0
- 3.0.0-alpha.10
- 3.0.0-alpha.9
- 3.0.0-alpha.8
- 3.0.0-alpha.7
- 3.0.0-alpha.6
- 3.0.0-alpha.5
- 3.0.0-alpha.4
- 3.0.0-alpha.3
- 3.0.0-alpha.2
- 3.0.0-alpha.1
- 3.0.0-alpha.0
- 2.3.0-beta.0
- 2.0.0-rc.2
- 2.0.0-rc.1
- 2.0.0-rc.0
Manage HTML metadata in Vue.js components with SSR support
<template>
...
</template>
<script>
export default {
metaInfo: {
title: 'My Example App',
titleTemplate: '%s - Yay!',
htmlAttrs: {
lang: 'en',
amp: true
}
}
}
</script>
<html lang="en" amp>
<head>
<title>My Example App - Yay!</title>
...
</head>
Introduction
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.
Documentation
Please find the documention on https://vue-meta.nuxtjs.org
:globe_with_meridians: Please help us translate the documentation into your language, see here for more information
Examples
Looking for more examples what vue-meta can do for you? Have a look at the examples
Installation
Yarn
$ yarn add vue-meta
npm
$ npm install vue-meta --save
Download / CDN
Use the download links below - if you want a previous version, check the instructions at https://unpkg.com.
Latest version: https://unpkg.com/vue-meta/dist/vue-meta.min.js
Latest v1.x version: https://unpkg.com/vue-meta@1/dist/vue-meta.min.js
Uncompressed:
<script src="https://unpkg.com/vue-meta/dist/vue-meta.js"></script>
Minified:
<script src="https://unpkg.com/vue-meta/dist/vue-meta.min.js"></script>
Quick Usage
See the documentation for more information
import Vue from 'vue'
import VueMeta from 'vue-meta'
Vue.use(VueMeta, {
// optional pluginOptions
refreshOnceOnNavigation: true
})
Frameworks using vue-meta
If you wish to create your app even more quickly, take a look at the following frameworks which use vue-meta
- Nuxt.js - The Vue.js Progressive Framework
- Gridsome - The Vue.js JAMstack Framework
- Ream - Framework for building universal web app and static website in Vue.js
- Vue-Storefront - PWA for eCommerce
- Factor JS - Extension-first VueJS platform for front-end developers.
How to translate documentation
Thanks for your interest in translating the documentation. As our docs are based on VuePress, we recommend to have a look at their docs about internationalization as well
Here are the steps you will need to take:
- Clone this repository
- Create a new branch
- Browse to
/docs/
- Create a folder with the language code you will add a translation for (eg
/zh/
) - Copy all
*.md
files and the foldersapi
,faq
, andguide
to that folder - Translate the copied files in your language folder
- Edit
.vuepress/config.yml
and add a config section for your locale in bothlocales
asthemeConfig.locales
- Test your translation by running the docs dev server with
yarn docs
- Create a pull request with your changes
- Receive eternal gratefulness from your fellow language speakers :heart:
Old versions
Click here if you are looking for the old v1 readme