✌️🥉 Check the next branch for Vue3 support

vue-meta

Manage HTML metadata in Vue.js components with SSR support

<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

Project Name	Stars	Repos Using This	Packages Using This	Most Recent Commit	Total Releases	Latest Release	Open Issues	License	Language
Vuepress	21,247	304	299	a month ago	151	August 28, 2022	570	mit	JavaScript
📝 Minimalistic Vue-powered static site generator
Prerender Spa Plugin	7,254	426	216	3 months ago	19	September 01, 2018	204	mit	JavaScript
Prerenders static HTML in a single-page application.
React Snap	4,882	129	35	2 days ago	86	December 13, 2018	187	mit	JavaScript
👻 Zero-configuration framework-agnostic static prerendering for SPAs
Vue Meta	3,997	4,611	308	9 days ago	72	February 17, 2022	51	other	JavaScript
Manage HTML metadata in Vue.js components with SSR support
Aimeos	3,090			a month ago	31	May 27, 2022	2	mit	JavaScript
Integrated online shop based on Laravel 9 and the Aimeos e-commerce framework for ultra-fast online shops, scalable marketplaces, complex B2B applications and #gigacommerce
Bookstack	3,064			18 days ago	4	November 03, 2021	109	apache-2.0	Go
BookStack，基于MinDoc，使用Beego开发的在线文档管理系统，功能类似Gitbook和看云。
Vuesion	2,656			13 days ago			13	mit	Vue
Vuesion is a boilerplate that helps product teams build faster than ever with fewer headaches and modern best practices across engineering & design.
Lin Cms Vue	2,590			2 months ago			67	mit	JavaScript
🔆 Vue+ElementPlus构建的CMS开发框架
Rendora	1,950			a month ago	1	January 04, 2019	28	apache-2.0	Go
dynamic server-side rendering using headless Chrome to effortlessly solve the SEO problem for modern javascript websites
Vite Ssg	936		5	a month ago	83	June 30, 2022	73	mit	TypeScript
Static site generation for Vue 3 on Vite