vue-meta

Manage HTML metadata in Vue.js components with SSR support

Vue
nuxt/vue-metavue-meta.nuxtjs.orgvue-meta

README

:v::3rd_place_medal:  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


  1. ``` html
  2. <template>
  3.   ...
  4. </template>
  5. <script>
  6.   export default {
  7.     metaInfo: {
  8.       title: 'My Example App',
  9.       titleTemplate: '%s - Yay!',
  10.       htmlAttrs: {
  11.         lang: 'en',
  12.         amp: true
  13.       }
  14.     }
  15.   }
  16. </script>
  17. ```
  1. ``` html
  2. <html lang="en" amp>
  3. <head>
  4.   <title>My Example App - Yay!</title>
  5.   ...
  6. </head>
  7. ```

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](https://github.com/nfl/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
  1. ```sh
  2. $ yarn add vue-meta
  3. ```

npm
  1. ```sh
  2. $ npm install vue-meta --save
  3. ```

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:
  1. ``` html
  2. <script src="https://unpkg.com/vue-meta/dist/vue-meta.js"></script>
  3. ```

Minified:
  1. ``` html
  2. <script src="https://unpkg.com/vue-meta/dist/vue-meta.min.js"></script>
  3. ```

Quick Usage


See the documentation for more information
  1. ``` js
  2. import Vue from 'vue'
  3. import VueMeta from 'vue-meta'

  5. Vue.use(VueMeta, {
  6.   // optional pluginOptions
  7.   refreshOnceOnNavigation: true
  8. })
  9. ```

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

License


MIT