Manage HTML metadata in Vue.js components with SSR support

Last update: Aug 16, 2022

✌️ 🥉 Check the next branch for Vue3 support


vue-meta

Manage HTML metadata in Vue.js components with SSR support

npm downloads npm version Coverage Status Build Status dependencies Status Discord

<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

🌐 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/[email protected]/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 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

License

MIT

GitHub

https://github.com/declandewet/vue-meta
Comments
  • 1. Update rollup to the latest version 🚀

    Version 0.48.0 of rollup just got published.

    Dependency rollup
    Current Version 0.47.6
    Type devDependency

    The version 0.48.0 is not covered by your current version range.

    Without accepting this pull request your project will work just like it did before. There might be a bunch of new features, fixes and perf improvements that the maintainers worked on for you though.

    I recommend you look into these changes and try to get onto the latest version of rollup. Given that you have a decent test suite, a passing build is a strong indicator that you can take advantage of these changes by merging the proposed change into your project. Otherwise this branch is a great starting point for you to work on the update.


    Commits

    The new version differs by 8 commits.

    • 941b3a4 -> v0.48.0
    • 6fc2088 Merge pull request #1566 from rollup/gh-1479
    • 0eb4fc1 add various missing options
    • 30cd1ca various minor fixes
    • 313873b separate input options from output options internally, implement options.file and options.format
    • 36e4cb8 handle --amd.id and --amd.define
    • d1c4eb9 fix broken test
    • 31de491 normalise options

    See the full diff

    Not sure how things should work exactly?

    There is a collection of frequently asked questions and of course you may always ask my humans.


    Your Greenkeeper Bot :palm_tree:

    Reviewed by greenkeeper[bot] at 2017-08-20 14:35
  • 2. Help needed: How do I use this for facebook open graph meta.

    Currently I am trying :

    metaInfo() {
      return {
        title: 'Memes are the best',
        meta: [
          {vmid: 'og:description', property: 'og:description', name:'description', content: 'Wow'}
        ]
      }
    }
    

    But whenever I test it with fb open graph debugger it can't scrape the meta information.

    Reviewed by jofftiquez at 2017-08-29 05:38
  • 3. [v3] Cannot use library in a client-only app?

    When I try to use [email protected] in a Vue 3 app without SSR (I’m using Vite), I get the following error:

    node_modules/vue-meta/dist/vue-meta.esm-bundler.js:850:35: error: Could not resolve "@vue/server-renderer"
    

    So I installed @vue/server-renderer thinking it would fix the issue, but then I get another error:

    Uncaught TypeError: vue.ssrUtils is null
    

    Am I doing something wrong or does the current version absolutely requires an SSR app to work properly?

    Reviewed by LeBenLeBen at 2021-04-03 09:22
  • 4. title resolving after router's "afterEach" hook, making analytics.js / gtag.js pageviews incorrect

    I'm trying to track page vues using gtag.js, and as a simple case, I just added the pageview in an afterEach hook of the router, but the title seems to be resolved later (I guess because of the batch update performed).

    This delay messes up pageview titles.

    Is there a way to know when the meta title is resolved?

    Reviewed by darkylmnx at 2018-09-02 01:17
  • 5. Head script is added multiple times on navigation

    I am opening a new issue, since https://github.com/nuxt/vue-meta/issues/381 is closed, but I am still finding that there is a problem.

    Nuxt version

    2.10.2

    Vue-meta version

    2.3.1

    Reproduction link

    https://github.com/simonbrent/nuxt-vue-meta-bug

    Steps to reproduce

    $ [email protected]:simonbrent/nuxt-vue-meta-bug.git
    $ cd nuxt-vue-meta-bug
    $ npm install
    $ npx nuxt
    
    • Open the site in Chrome, with dev tools open to the navigation tab
    • Click on the link to "foo" - see that "head-script.js" is downloaded
    • Click on the link to "index"
    • Click on the link to "foo" - see that "head-script.js" is downloaded again

    What is expected?

    "head-script.js" is downloaded once, the first time you navigate to /foo

    What is actually happening?

    "head-script.js" is downloaded every time you navigate to /foo

    Reviewed by simonbrent at 2019-12-05 09:52
  • 6. Typescript compiler fails when using metaInfo() function

    I would like to access component data from metaInfo() function, but typescript compiler throws me an error:

    export default Vue.extend({
      metaInfo() {
        return {
          title: this.name,
        };
      },
      data() {
        return {
          name: 'Bob',
          country: 'Sweden',
        };
      },
      methods: {
        sayHi() {
          console.log('Hi ' + this.name + ' from ' + this.country);
        },
      },
    });
    

    Property 'name' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'.

    Property 'name' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'.

    Property 'country' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<Record<never, any>>>'.

    Notice that the compiler also outputs errors in the sayHi method. The errors only occurs when using this in the metaInfo() function

    Reviewed by nomadoda at 2019-03-29 19:23
  • 7. Getting "document is not defined" after upgrading to 0.5.6

    We've been using vue-meta with SSR on 0.5.5, but after upgrading to 0.5.6 we started getting the following errors on the server:

    ReferenceError: document is not defined
        at updateClientMetaInfo (/path/to/node_modules/vue-meta/lib/vue-meta.js:824:19)
        at Vue$2.refresh (/path/to/node_modules/vue-meta/lib/vue-meta.js:885:35)
        at /path/to/node_modules/vue-meta/lib/vue-meta.js:1013:74
        at Timeout._onTimeout (/path/to/node_modules/vue-meta/lib/vue-meta.js:924:5)
        at ontimeout (timers.js:365:14)
        at tryOnTimeout (timers.js:237:5)
        at Timer.listOnTimeout (timers.js:207:5)
    
    Reviewed by goldfire at 2017-04-06 20:23
  • 8. [Version `3.0.0-alpha.9`] Typescript Error 6053

    Typescript Error 6053

    node_modules/vue-meta/dist/vue-meta.d.ts:9:22 - error TS6053: File '/Users/shein/kk/gh/reproduction-vueMetaTypescriptError6053/node_modules/vue-meta/dist/ssr.d.ts' not found.
    
    9 /// <reference path="ssr.d.ts" />
                           ~~~~~~~~
    

    Issue

    https://github.com/nuxt/vue-meta/blob/eec4e7c7c00dfff74edd29675421052596bbada1/dist/vue-meta.d.ts#L9

    Minimal Reproduction

    https://github.com/Penguinlay/reproduction-vueMetaTypescriptError6053

    Additional Details

    Dependencies

    "dependencies": {
      "vue": "3.1.1",
      "vue-meta": "3.0.0-alpha.9"
    },
    "devDependencies": {
      "@vitejs/plugin-vue": "1.2.3",
      "@vue/compiler-sfc": "3.1.1",
      "typescript": "4.4.0-dev.20210617",
      "vite": "2.3.7",
      "vue-tsc": "0.1.7"
    }
    

    P.S.

    I have not tested it with Vue Meta versions other than 3.0.0-alpha.9 and dependencies' versions other than those listed above.

    Reviewed by Penguinlay at 2021-06-19 02:58
  • 9. Fix: 500 error using Vue+Meteor SSR after update `vue-meta` version to 2.3.4

    Greetings, @pimlie

    This pull-request fixes the 500 error with document is not defined message when we using Vue Meta and Vue+Meteor SSR.

    Problem is the Vue+Meteor SSR package doesn't have this.$el on hook:beforeMount, so the getTag() function is called in { ssr: true } context.

    Bug was introduced in https://github.com/nuxt/vue-meta/pull/563.

    Best wishes, Sergey.

    Reviewed by mrauhu at 2020-06-05 05:59
  • 10. Adding options `keyName`

    Hi!

    I think it could be great to set the keyName as an option when installing vue-meta:

    import Meta from 'vue-meta'
    
    var options = {
      keyName: 'head'
    }
    Vue.use(Meta, options)
    

    So then, in my components, I can do:

    <script>
      export default {
        head: {
          title: 'My Example App',
          htmlAttrs: { lang: 'en' }
        }
      }
    </script>
    

    I want to implement it in nuxt.js as similar as in next.js, the component name is , so a key head seems the best name to making it similar (even if vue-meta can update more than inside the , which rocks 🚀 )

    I you like the idea, I can try to make a pull request?

    Reviewed by Atinux at 2016-11-08 11:29
  • 11. Understanding Content Templates

    I've been reading the docs and am struggling to understand how Content Templates work.

    My App.vue

    export default {
        metaInfo: {
            title: 'Home',
            titleTemplate: '%s - A Product Name',
            meta: [
                {
                    property: 'og:title',
                    content: 'Home',
                    template: chunk => `${chunk} - A Product Name`,
                    vmid: 'og:title'
                }
            ]
        }
    }
    

    And my About.vue

    export default {
        name: 'About Us',
        metaInfo: {
            title: 'About',
            meta: [
                {
                    property: 'og:title',
                    content: '%s - test'
                }
            ]
        }
    }
    

    If i overwrite the 'vmid' then I can't see to use %s to get the template from the parent

    How can I make it use the template from the App.vue for og:title? I've tried various vmid's such as ogTitle but none seem to work. The documentation seems very limited in explaining how to use content templates in child views, it would be great if there was an example of using Content Templates in child views alongside the setup as it shows currently.

    Thanks in advance for any tips on approaching this

    Reviewed by 1e4 at 2020-12-10 19:41
  • 12. Remove 'data-n-head' and 'data-hid' attributes in meta tags

    My website need to be authenticated to search engines for SEO, but they can't be authenticated, which caused by data-n-head and data-hid attributes in meta tags.

    I have tried these hooks in nuxt.config.ts:

    {
      // ...
      hooks: {
        generate: {
          page(page: { html: string }) {
            const cheerio = require('cheerio')
            const $ = cheerio.load(page.html, { decodeEntities: false })
    
            const attrs = [
              'data-n-head-ssr',
              'data-n-head',
              'data-hid',
              'data-vue-ssr-id',
              'data-server-rendered'
            ]
    
            attrs.forEach(value => {
              $('*[' + value + ']').removeAttr(value)
            })
    
            page.html = $.html()
          }
        }
      }
      // ...
    }
    

    or this:

    {
      // ...
      hooks: {
        'render:route': (_url: URL, result: { html: string }) => {
          result.html = result.html
            .replace(/ data-n-head=".*?"/gi, '')
            .replace(/ data-hid=".*?"/gi, '')
        }
      }
      // ...
    }
    

    But twice meta tags are generated, the first is Okay, but the second is repeat, data-n-head and data-hid attributes still in meta tags. I'm so confused!

    Reviewed by davinma at 2022-08-03 02:12
  • 13. How to use this on vue 2 with vuetify?

    This is my main.js

    import Vue from "vue";
    import VueMeta from "vue-meta";
    import App from "./App.vue";
    import vuetify from "./plugins/vuetify";
    
    Vue.config.productionTip = false;
    
    Vue.use(VueMeta, {
      // optional pluginOptions
      refreshOnceOnNavigation: true,
    });
    
    new Vue({
      vuetify,
      render: (h) => h(App),
    }).$mount("#app");
    

    and this is component where I'm gonna use pannellum.js

    <script>
    export default {
      name: "View360Mode",
      metaInfo: () => ({
        script: [
          {
            src: "https://cdn.jsdelivr.net/npm/[email protected]/build/pannellum.js",
            async: true,
            defer: true,
          },
        ],
      }),
    };
    
    pannellum.viewer("panorama", 
    

    ^ it keep saying pannellum is not defined

    Reviewed by Moanrisy at 2022-07-30 12:35
  • 14. build: Integrated babel into build to make bundle compatible with ES5+

    Changes

    • Integrated @rollup/plugin-babel into the build so that the bundle contains polyfilled code that is compatible with ES5+.
    • These changes prevent breaking syntax errors on older versions of Chrome, Firefox, Safari, etc.

    Gotchas

    • I noticed a small change to dist/vue-meta.d.ts, but I'm not sure why it was introduced. I can dig into this further if needed, it seems like it could impact TypeScript integrations.
      • Interestingly, I ran the build against v3.0.0-alpha.10 and noticed the exact same change, so this does not appear to relate to my change (perhaps it's due to an implicit version bump related to TypeScript).
    • I assumed IE9 as a build target, and this seemed necessary (for some reason) to fully polyfill the code - also happy to experiment with this more if needed/preferred.
    • The size of the bundle naturally increases due to polyfilling (273k -> 357k).

    Issues

    • #773
    • #760 (related)
    Reviewed by slurmulon at 2022-07-27 13:51
  • 15. Build contains ES5 incompatible code

    Problem

    vue-meta is producing bundles that contain syntax features that are incompatible with ES5+.:

    • https://caniuse.com/mdn-javascript_classes_private_class_fields
    • https://caniuse.com/mdn-javascript_operators_optional_chaining
    • etc

    This causes syntax errors to be reported on (at least) the following browsers, rendering any app using vue-meta unusable:

    • Chrome <=78
    • Safari <= 14.4 (related: #760)

    Ideally the build would contain code that is transpiled/polyfilled to support browsers compatible with ES5+.

    Solution

    Use @rollup/[email protected]^5.x in the build script to transpile the code for all module formats.

    Environment

    Reviewed by slurmulon at 2022-07-27 12:30
  • 16. Vue meta when setting meta, you can view the set meta through F12. However, you can't see the added meta by right clicking the web page source code. Excuse me, how can I view meta through right clicking

    Vue meta when setting meta, you can view the set meta through F12. However, you can't see the added meta by right clicking the web page source code. Excuse me, how can I view meta through right clicking. This is the meta from F12. image

    Reviewed by pj153 at 2022-07-12 07:25
Easily set meta-tags with vue.js - a `vue-headful` alternative

vue-simple-headful A simple ts-friendly meta-tag manager for Vue.js This is a direct and fully reworked fork of vue-headful. It is meant to make headf

Jun 26, 2022
Set document title and meta tags with Vue.js

vue-headful vue-headful allows to set the title and several meta tags of your document from any Vue.js view. vue-headful is a tiny wrapper around Head

Jul 10, 2022
🏷Smart input tags for Vue
🏷Smart input tags for Vue

✨ Features ⚡ Autosuggest with support for keyboard selection. ✏️ Edit the tags inline by double clicking them. ??️ Paste strings with delimiters of yo

Aug 12, 2022
Manage HTML metadata in Vue.js components with SSR support
Manage HTML metadata in Vue.js components with SSR support

✌️ ?? Check the next branch for Vue3 support Manage HTML metadata in Vue.js components with SSR support <template> ... </template> <script> expor

Aug 9, 2022
Manage your videos, add any metadata to them and play them.
Manage your videos, add any metadata to them and play them.

Manage your videos, add any metadata to them and play them.

Jul 15, 2022
Simple page-by-page navigation for Vue.js based on your html templates with ssr support
Simple page-by-page navigation for Vue.js based on your html templates with ssr support

Simple page-by-page navigation for Vue.js based on your html templates with ssr support

Jun 3, 2021
"Compile" your VueJS components (sfc/*.vue) to standalone html/js/css ... python only (no need of nodejs). Support python components too !

vbuild "Compile" your VueJS components (*.vue) to standalone html/js/css ... python only, no need of nodejs. And you can use python components with vb

Jul 10, 2022
An Example SSR App for Vue3 with Vite-SSR
An Example SSR App for Vue3 with Vite-SSR

Vue 3 + Vite-SSR Example App SSR To start dev server run npm run dev or yarn/pnpm dev To build app run npm run build or yarn/pnpm build To start produ

Jul 3, 2022
An Example SSR App for Vue3 with Vite-SSR
An Example SSR App for Vue3 with Vite-SSR

An Example SSR App for Vue3 with Vite-SSR

Jul 3, 2022
Nestjs-ssr - A template using NestJS for both SSR and RESTful API based on Vite

A progressive Node.js framework for building efficient and scalable server-side

Aug 8, 2022
Javascript Frontend (Vue + Electron) for Exiv2 - C++ Image Metadata Library

GNSS EXIFR Add (or) Replace GeoTag Information from CSV to JPEG (or) JPG Drone Imageries (embedded into EXIF). Remove GeoTag Information from Drone Im

Jun 25, 2022
Web version of ytmdl. Allows downloading songs with metadata embedded from various sources like itunes, gaana, LastFM etc.
Web version of ytmdl. Allows downloading songs with metadata embedded from various sources like itunes, gaana, LastFM etc.

Ytmdl Web V2 Version 2 of Ytmdl Web with a lot of fixes since the first iteration. This release is way faster than the previous version along with som

Aug 8, 2022
Scalable data management system with an AI powered profiling and metadata enrichment
Scalable data management system with an AI powered profiling and metadata enrichment

DIVA - Data Inventory and Valuation Approach An awesome data catalog application Developed for evaluating the newest data management technologies in c

Jun 7, 2022
WordPress module for Vue.js, PWA ready, with full support for Vuex Store, Vue Router, Vue SSR and Nuxt.js.

WordPress module for Vue.js, PWA ready, with full support for Vuex Store, Vue Router, Vue SSR and Nuxt.js.

Apr 9, 2022
A pure vue responsive masonry layout without direct dom manipulation and ssr support.
A pure vue responsive masonry layout without direct dom manipulation and ssr support.

vue-masonry-wall A pure vue responsive masonry implementation without direct dom manipulation, ssr friendly with lazy appending. I created this becaus

Aug 8, 2022
Vue.js wrapper for SweetAlert2. With support SSR.
Vue.js wrapper for SweetAlert2. With support SSR.

A convenient wrapper for sweetalert2.

Aug 16, 2022
Responsive masonry layout with SSR support and zero dependencies for Vue 3.

Responsive masonry layout with SSR support and zero dependencies for Vue 3.

Aug 13, 2022
A pure vue horizontal list implementation with minimal dependencies, ssr support, mobile friendly, touch friendly and responsive now with auto scroll

A pure vue horizontal list implementation with minimal dependencies, ssr support, mobile friendly, touch friendly and responsive now with auto scroll

May 14, 2022
A simple, customizable and pageable table with SSR support, based on vue2 and element-ui
A simple, customizable and pageable table with SSR support, based on vue2 and element-ui

Documentation Full Doc Online Demo for front-end pagination Online Demo for server-end pagination Dev install dependencies yarn install serve test/pl

Aug 3, 2022
WordPress module for Nuxt.js with full support for SSR and Nuxt.js PWA module.

WordPress module for Nuxt.js with full support for SSR and Nuxt.js PWA module.

May 27, 2022