pimlie
Manage page 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
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
})
Higher level 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