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

    2.4.0 • Public • Published

    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/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 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

    Install

    npm i vue-meta

    DownloadsWeekly Downloads

    456,212

    Version

    2.4.0

    License

    MIT

    Unpacked Size

    291 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar