Update docs to use vuepress 1.x

Author: visualfanatic

docs/.vuepress/style.styl renamed to docs/.vuepress/styles/index.styl

@@ -1,5 +1,3 @@
-@import '~@default-theme/styles/config.styl'
-
 .home .hero img
   max-height 140px
 

docs/README.md

@@ -16,7 +16,7 @@ features:
 
 ## Installation
 
-<Tabs>
+<Tabs :options="{ useUrlFragment: false }">
 <Tab name="yarn">
 
 ``` bash
@@ -35,12 +35,12 @@ npm i -D vue-svg-loader vue-template-compiler
 
 ## Configuration
 
-<Tabs>
+<Tabs :options="{ useUrlFragment: false }">
 <Tab name="webpack">
 
 ::: warning
 Make sure that your current configuration is not already processing the SVG files.
-Check this [FAQ](/faq#how-to-use-both-inline-and-external-svgs) section if you want to use both inline and external SVGs.
+Check this [FAQ](/faq.html#how-to-use-both-inline-and-external-svgs) section if you want to use both inline and external SVGs.
 :::
 
 ``` js
@@ -49,7 +49,7 @@ module.exports = {
     rules: [
       {
         test: /\.svg$/,
-        loader: 'vue-svg-loader',
+        use: ['babel-loader', 'vue-svg-loader'],
       },
     ],
   },
@@ -69,6 +69,9 @@ module.exports = {
     svgRule.uses.clear();
 
     svgRule
+      .use('babel-loader')
+      .loader('babel-loader')
+      .end()
       .use('vue-svg-loader')
       .loader('vue-svg-loader');
   },
@@ -90,7 +93,7 @@ module.exports = {
 
       config.module.rules.push({
         test: /\.svg$/,
-        loader: 'vue-svg-loader',
+        use: ['babel-loader', 'vue-svg-loader'],
       });
     },
   },

docs/faq.md

@@ -6,7 +6,7 @@ sidebar: auto
 
 ## How to use both inline and external SVGs?
 
-<Tabs>
+<Tabs :options="{ useUrlFragment: false }">
 <Tab name="webpack">
 
 ``` js
@@ -137,7 +137,7 @@ export {
 ## How to prefix `id` attributes?
 To avoid the situation where two or more SVGs are using the same `id` attribute, you can use the `prefixIds` option provided by `SVGO`.
 
-<Tabs>
+<Tabs :options="{ useUrlFragment: false }">
 <Tab name="webpack">
 
 ``` js
@@ -230,7 +230,7 @@ module.exports = {
 If you want to customize generated IDs, you can pass a function instead of `true` to the `prefixIds` plugin.
 Here is an example for generating IDs that are prefixed by the file name:
 
-<Tabs>
+<Tabs :options="{ useUrlFragment: false }">
 <Tab name="webpack">
 
 ``` js

package.json

@@ -11,7 +11,7 @@
     "vue"
   ],
   "scripts": {
-    "docs:serve": "vuepress dev docs",
+    "docs:dev": "vuepress dev docs",
     "docs:build": "vuepress build docs"
   },
   "bugs": "https://github.com/visualfanatic/vue-svg-loader/issues",