Manage HTML metadata in Vue.js
<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.
Please find the documention on https://vue-meta.nuxtjs.org
ExamplesPlease help us translate the documentation into your language, see here for more information
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 documentationThanks 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
LicenseMIT
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
