docs: add Getting Started menuitem

docs: add section about Framework documentation

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'
-            ]
-          }*/
         ]
       },
     }

docs/guide/README.md

@@ -1,36 +1,48 @@
-# Preparing the plugin
+# Installation
-:::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.
+:::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 VueMeta from 'vue-meta'
-import Meta from 'vue-meta'
 
-Vue.use(Router)
+Vue.use(VueMeta)
-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

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
 {

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)

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

docs/installation.md

@@ -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)
-```