From f71b0d866c3a93e77426d99fa4d5e98b0c082b73 Mon Sep 17 00:00:00 2001 From: pimlie Date: Tue, 2 Apr 2019 12:16:32 +0200 Subject: [PATCH] docs: add Getting Started menuitem docs: add section about Framework documentation --- docs/.vuepress/config.js | 27 +++++++--------- docs/guide/README.md | 70 +++++++++++++++++++++++----------------- docs/guide/caveats.md | 4 +-- docs/guide/frameworks.md | 11 +++++++ docs/guide/preparing.md | 36 +++++++++++++++++++++ docs/installation.md | 43 ------------------------ 6 files changed, 101 insertions(+), 90 deletions(-) create mode 100644 docs/guide/frameworks.md create mode 100644 docs/guide/preparing.md delete mode 100644 docs/installation.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 6791822..d49ecc6 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -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' - ] - }*/ + } ] }, } diff --git a/docs/guide/README.md b/docs/guide/README.md index 784b69f..ac5e070 100644 --- a/docs/guide/README.md +++ b/docs/guide/README.md @@ -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:
+[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 + +``` + +**Minified:** +```html + +``` + +## 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 diff --git a/docs/guide/caveats.md b/docs/guide/caveats.md index 4e18fde..3b6d797 100644 --- a/docs/guide/caveats.md +++ b/docs/guide/caveats.md @@ -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 { diff --git a/docs/guide/frameworks.md b/docs/guide/frameworks.md new file mode 100644 index 0000000..bee36d7 --- /dev/null +++ b/docs/guide/frameworks.md @@ -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) diff --git a/docs/guide/preparing.md b/docs/guide/preparing.md new file mode 100644 index 0000000..784b69f --- /dev/null +++ b/docs/guide/preparing.md @@ -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 diff --git a/docs/installation.md b/docs/installation.md deleted file mode 100644 index ea36d4f..0000000 --- a/docs/installation.md +++ /dev/null @@ -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:
-[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 - -``` - -**Minified:** -```html - -``` - -## 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) -```