mirror of
https://github.com/tenrok/vue-meta.git
synced 2026-06-16 17:50:33 +03:00
docs: add homepage
docs: upgrade to vuepress v1 change pkg description to HTML metadata
This commit is contained in:
+35
-8
@@ -1,14 +1,41 @@
|
||||
<img src="vue-meta.png" alt="vue-meta"/>
|
||||
|
||||
::: tip We need your help
|
||||
---
|
||||
home: true
|
||||
heroImage: /vue-meta.png
|
||||
heroText: vue-meta
|
||||
tagline: HTML Metadata manager for Vue.js
|
||||
actionText: Get Started →
|
||||
actionLink: /guide/
|
||||
features:
|
||||
- title: What
|
||||
details: vue-meta is a plugin for Vue.js which helps you to manage your app's metadata using Vue's built-in reactivity
|
||||
- title: How
|
||||
details: Just export the special property `metaInfo` in any or all your components
|
||||
- title: So?
|
||||
details: Nested components can overwrite each others values, allowing you to easily add or remove metadata where and when you need it
|
||||
footer:
|
||||
MIT License | Created by Declan de Wet, currently developed with ❤ by Nuxt.js core-team & contributors
|
||||
---
|
||||
::: tip We need your help!
|
||||
We are working on defining the RFC for Vue Meta v3.0. It will be a ground-breaking release built from the ground up.
|
||||
|
||||
We would like your help with this! Please visit the [Vue Meta v3.0 rfc](https://github.com/nuxt/rfcs/issues/19) and let us know your thoughts.
|
||||
:::
|
||||
|
||||
# Introduction
|
||||
`vue-meta` is a [Vue.js](https://vuejs.org) plugin that allows you to manage your app's metadata, much like [`react-helmet`](https://github.com/nfl/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.
|
||||
```js
|
||||
// Component.vue
|
||||
{
|
||||
metaInfo: {
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
```html
|
||||
<!-- Rendered HTML tags in your page -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
```
|
||||
|
||||
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 sub components for more maintainable code.
|
||||
|
||||
[Get started](/guide) or play with the [examples](https://github.com/nuxt/vue-meta/tree/master/examples)
|
||||
See the [examples](https://github.com/nuxt/vue-meta/tree/master/examples) for more inspiration!
|
||||
|
||||
Reference in New Issue
Block a user