pimlie🎀 UPDATED! The third (and probably final) release candidate for v2.0 has been released. Click here if you are looking for the old v1 readme
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/lib/vue-meta.min.js
Latest v1.x version: https://unpkg.com/vue-meta@1/lib/vue-meta.min.js
Uncompressed:
<script src="https://unpkg.com/vue-meta/lib/vue-meta.js"></script>
Minified:
<script src="https://unpkg.com/vue-meta/lib/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
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
*.mdfiles and the foldersapi,faq, andguideto that folder - Translate the copied files in your language folder
- Edit
.vuepress/config.ymland add a config section for your locale in bothlocalesasthemeConfig.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 ❤️