Skip to content

Manage HTML metadata in Vue.js components with SSR support

License

Notifications You must be signed in to change notification settings

globalrewardsusa-vahava/vue-meta

 
 

Repository files navigation

✌️🥉 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/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

About

Manage HTML metadata in Vue.js components with SSR support

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 97.7%
  • TypeScript 1.4%
  • Vue 0.9%