Vue Meta allows you to manage the meta information for a Vue application.
vue-meta is a Vue 2.0 plugin that allows you to manage your app's meta information, much like react-helmet does 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 meta info directly to deeply nested subcomponents for more maintainable code.
Installation
Yarn
yarn add vue-meta
NPM
npm install vue-meta --save
Please read the usage documentation for more information on how to set up this plugin.
Usage
Simply add the meta info field to any component. The most nested component will override the meta information for the page. Please read the usage documentation for more information including setup steps.
<template>
...
</template>
<script>
export default {
metaInfo: {
title: 'My Example App', // set a title
titleTemplate: '%s - Yay!', // title is now "My Example App - Yay!"
htmlAttrs: {
lang: 'en',
amp: undefined // "amp" has no value
}
}
}
</script>
