Nutrient Packed Morsels

    TypeScript icon, indicating that this package has built-in type declarations

    2.4.0 • Public • Published


    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

    🌐 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 ❤️

    Old versions

    Click here if you are looking for the old v1 readme




    npm i vue-meta

    DownloadsWeekly Downloads






    Unpacked Size

    291 kB

    Total Files


    Last publish


    • atinux
    • pi0
    • alexchopin
    • pimlie
    • danielroe