mirror of
https://github.com/tenrok/vue-meta.git
synced 2026-06-08 14:42:25 +03:00
docs: add Getting Started menuitem
docs: add section about Framework documentation
This commit is contained in:
pimlie
+11
-16
@@ -27,14 +27,21 @@ module.exports = {
|
||||
link: 'https://github.com/nuxt/vue-meta/releases'
|
||||
}],
|
||||
sidebar: [
|
||||
'/installation.md',
|
||||
'/',
|
||||
{
|
||||
title: 'Getting started',
|
||||
collapsable: false,
|
||||
children: [
|
||||
'/guide/',
|
||||
'/guide/preparing',
|
||||
'/guide/ssr',
|
||||
'/guide/frameworks'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Usage',
|
||||
collapsable: false,
|
||||
children: [
|
||||
'/guide/',
|
||||
'/guide/ssr',
|
||||
'/guide/metainfo',
|
||||
'/guide/special',
|
||||
'/guide/caveats',
|
||||
@@ -50,19 +57,7 @@ module.exports = {
|
||||
'/faq/component-props.md',
|
||||
'/faq/async-action.md',
|
||||
]
|
||||
},
|
||||
/*{
|
||||
title: 'Advanced',
|
||||
collapsable: false,
|
||||
children: [
|
||||
'/guide/advanced/navigation-guards.md',
|
||||
'/guide/advanced/meta.md',
|
||||
'/guide/advanced/transitions.md',
|
||||
'/guide/advanced/data-fetching.md',
|
||||
'/guide/advanced/scroll-behavior.md',
|
||||
'/guide/advanced/lazy-loading.md'
|
||||
]
|
||||
}*/
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
|
||||
+41
-29
@@ -1,36 +1,48 @@
|
||||
# Preparing the plugin
|
||||
:::tip Note
|
||||
This step is optional if you don't need SSR and `Vue` is available as a global variable. `vue-meta` will install itself in this case.
|
||||
# Installation
|
||||
|
||||
:::tip Using a framework?
|
||||
|
||||
Are you using a framework like Nuxt.js, Gridsome or another one which uses vue-meta? Then `vue-meta` should already be installed and you can skip to [Usage](/guide/metainfo.html) or consult the [documentation](/guide/frameworks.html) of your framework for more details.
|
||||
:::
|
||||
|
||||
In order to use this plugin, you first need to pass it to `Vue.use` - if you're not rendering on the server-side, your entry file will suffice. If you are rendering on the server, then place it in a file that runs both on the server and on the client before your root instance is mounted. If you're using [`vue-router`](https://github.com/vuejs/vue-router), then your main `router.js` file is a good place:
|
||||
## Download / CDN
|
||||
|
||||
[https://unpkg.com/vue-meta/lib/vue-meta.js](https://unpkg.com/vue-meta/lib/vue-meta.js)
|
||||
|
||||
For the latest version in the v1.x branch you can use:<br/>
|
||||
[https://unpkg.com/vue-meta@1/lib/vue-meta.js](https://unpkg.com/vue-meta@1/lib/vue-meta.js)
|
||||
|
||||
Or you can replace `1` with the full version number you wish to use.
|
||||
|
||||
If you include vue-meta after Vue it will install automatically
|
||||
|
||||
**Uncompressed:**
|
||||
```html
|
||||
<script src="https://unpkg.com/vue-meta/lib/vue-meta.js"></script>
|
||||
```
|
||||
|
||||
**Minified:**
|
||||
```html
|
||||
<script src="https://unpkg.com/vue-meta/lib/vue-meta.min.js"></script>
|
||||
```
|
||||
|
||||
## Package manager
|
||||
**Yarn**
|
||||
```sh
|
||||
$ yarn add vue-meta
|
||||
```
|
||||
|
||||
**npm**
|
||||
```sh
|
||||
$ npm install vue-meta --save
|
||||
```
|
||||
|
||||
### Install
|
||||
You need to explicitly install vue-meta when using a package manager
|
||||
|
||||
**router.js:**
|
||||
```js
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Meta from 'vue-meta'
|
||||
import VueMeta from 'vue-meta'
|
||||
|
||||
Vue.use(Router)
|
||||
Vue.use(Meta)
|
||||
|
||||
export default new Router({
|
||||
...
|
||||
})
|
||||
Vue.use(VueMeta)
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
`vue-meta` allows a few custom options:
|
||||
|
||||
```js
|
||||
Vue.use(Meta, {
|
||||
keyName: 'metaInfo',
|
||||
attribute: 'data-vue-meta',
|
||||
ssrAttribute: 'data-vue-meta-server-rendered',
|
||||
tagIDKeyName: 'vmid',
|
||||
refreshOnceOnNavigation: true
|
||||
})
|
||||
```
|
||||
|
||||
See the [API](/api/#plugin-options) for a description of the available plugin options
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
## Reactive variables in template functions
|
||||
|
||||
Both [title](/api/#titletemplate) as [meta](/api/#content-templates) support using template function.
|
||||
Due to how Vue determines reactivity it is not possible to use reactive variables directly in template function
|
||||
Due to how Vue determines reactivity it is not possible to use reactive variables directly in template functions
|
||||
|
||||
```js
|
||||
{
|
||||
@@ -20,7 +20,7 @@ Due to how Vue determines reactivity it is not possible to use reactive variable
|
||||
}
|
||||
```
|
||||
|
||||
You need to assign the reactive variable to a local variable for this to work:
|
||||
You need to assign the reactive variable to a local variable first for this to work:
|
||||
|
||||
```js
|
||||
{
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
# Frameworks
|
||||
|
||||
If you are using a framework which uses `vue-meta`, please make sure to consult their documentation first
|
||||
|
||||
## Gridsome
|
||||
|
||||
Proceed to the [Gridsome documentation](https://gridsome.org/docs)
|
||||
|
||||
## Nuxt.js
|
||||
|
||||
Proceed to the [Nuxt.js documentation](https://nuxtjs.org/api)
|
||||
@@ -0,0 +1,36 @@
|
||||
# Preparing the plugin
|
||||
:::tip Note
|
||||
This step is optional if you don't need SSR and `Vue` is available as a global variable. `vue-meta` will install itself in this case.
|
||||
:::
|
||||
|
||||
In order to use this plugin, you first need to pass it to `Vue.use` - if you're not rendering on the server-side, your entry file will suffice. If you are rendering on the server, then place it in a file that runs both on the server and on the client before your root instance is mounted. If you're using [`vue-router`](https://github.com/vuejs/vue-router), then your main `router.js` file is a good place:
|
||||
|
||||
**router.js:**
|
||||
```js
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Meta from 'vue-meta'
|
||||
|
||||
Vue.use(Router)
|
||||
Vue.use(Meta)
|
||||
|
||||
export default new Router({
|
||||
...
|
||||
})
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
`vue-meta` allows a few custom options:
|
||||
|
||||
```js
|
||||
Vue.use(Meta, {
|
||||
keyName: 'metaInfo',
|
||||
attribute: 'data-vue-meta',
|
||||
ssrAttribute: 'data-vue-meta-server-rendered',
|
||||
tagIDKeyName: 'vmid',
|
||||
refreshOnceOnNavigation: true
|
||||
})
|
||||
```
|
||||
|
||||
See the [API](/api/#plugin-options) for a description of the available plugin options
|
||||
@@ -1,43 +0,0 @@
|
||||
# Installation
|
||||
|
||||
## Download / CDN
|
||||
|
||||
[https://unpkg.com/vue-meta/lib/vue-meta.js](https://unpkg.com/vue-meta/lib/vue-meta.js)
|
||||
|
||||
For the latest version in the v1.x branch you can use:<br/>
|
||||
[https://unpkg.com/vue-meta@1/lib/vue-meta.js](https://unpkg.com/vue-meta@1/lib/vue-meta.js)
|
||||
|
||||
Or you can replace `1` with the full version number you wish to use.
|
||||
|
||||
If you include vue-meta after Vue it will install automatically
|
||||
|
||||
**Uncompressed:**
|
||||
```html
|
||||
<script src="https://unpkg.com/vue-meta/lib/vue-meta.js"></script>
|
||||
```
|
||||
|
||||
**Minified:**
|
||||
```html
|
||||
<script src="https://unpkg.com/vue-meta/lib/vue-meta.min.js"></script>
|
||||
```
|
||||
|
||||
## Package manager
|
||||
**Yarn**
|
||||
```sh
|
||||
$ yarn add vue-meta
|
||||
```
|
||||
|
||||
**npm**
|
||||
```sh
|
||||
$ npm install vue-meta --save
|
||||
```
|
||||
|
||||
### Install
|
||||
You need to explicitly install vue-meta when using a package manager
|
||||
|
||||
```js
|
||||
import Vue from 'vue'
|
||||
import VueMeta from 'vue-meta'
|
||||
|
||||
Vue.use(VueMeta)
|
||||
```
|
||||
Reference in New Issue
Block a user