Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including vue-meta with all npm packages installed. Try it out:

var vueMeta = require("vue-meta")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-meta v2.4.0

Manage HTML metadata in Vue.js components with ssr support


Manage HTML metadata in Vue.js components with SSR support

npm downloads npm version Coverage Status Build Status dependencies Status Discord


  export default {
    metaInfo: {
      title: 'My Example App',
      titleTemplate: '%s - Yay!',
      htmlAttrs: {
        lang: 'en',
        amp: true
<html lang="en" amp>
  <title>My Example App - Yay!</title>


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

:globe_with_meridians: Please help us translate the documentation into your language, see here for more information


Looking for more examples what vue-meta can do for you? Have a look at the examples


$ yarn add vue-meta
$ npm install vue-meta --save
Download / CDN

Use the download links below - if you want a previous version, check the instructions at

Latest version:

Latest v1.x version:


<script src=""></script>


<script src=""></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 folders api, faq, and guide to that folder
  • Translate the copied files in your language folder
  • Edit .vuepress/config.yml and add a config section for your locale in both locales as themeConfig.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



RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free