algolia · Haroenv · Nov 5, 2018 · Nov 2, 2018 · Nov 2, 2018 · Nov 2, 2018
diff --git a/docs/src/advanced/vue-router-url-sync.md b/docs/src/advanced/vue-router-url-sync.md
@@ -11,25 +11,49 @@ githubSource: docs/src/advanced/vue-router-url-sync.md
 
 > NOTE: this guide **has** been updated for v2
 
-Currently there's three existing ways how to use InstantSearch routing.
 
-The first option is putting `:routing="true"` on `ais-instant-search`. This will use the default serialising that doesn't lose any information, but might be a bit verbose
 
-The second option is to put an object of configuration. This object can take `stateMapping`, with the functions `stateToRoute` and `routeToState` to serialise differently, but still use the default routing. This allows to rename things to make them easier to read, without touching how the serialising itself happens.
+The `routing` prop on `ais-instant-search` accepts an object. The simplest way to get started without customising URLs at all is the following:
 
-Finally, you can also change the URL to use full URLs, rather than just the query string. You need to change the `router` key inside the `routing` object. You can import the default (history) router from `import {history} from 'instantsearch.js/es/lib/routers'`, and modify, like in InstantSearch JS.
+```vue
+<template>
+  <ais-instant-search
+    :routing="{
+      router: historyRouter(),
+      stateMapping: simpleMapping(),
+    }"
+  >
+    <!-- Your search components go in here -->
+  </ais-instant-search>
+</template>
 
-[![Edit vue-instantsearch-app](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/q8pmz6n7lj?module=%2Fsrc%2FApp.vue)
+<script>
+import { history as historyRouter } from 'instantsearch.js/es/lib/routers';
+import { simple as simpleMapping } from 'instantsearch.js/es/lib/stateMappings';
 
-All docs for InstantSearch routing configuration are [here](https://community.algolia.com/instantsearch.js/v2/guides/routing.html).
+export default {
+  data() {
+    return {
+      historyRouter,
+      simpleMapping,
+    };
+  },
+};
+</script>
+```
+
+They're routing object contains two keys: `history` and `stateMapping`:
 
-Finally an option is to use Vue Router. All previous examples will _work_ using Vue Router, as long as they don't conflict, as long as you don't try to do specific Vue Router things which are controlled by InstantSearch, since InstantSearch provided query strings won't be available to Vue Router, as soon as the routing changes from its initial deserialization.
+- **history**: used for writing and reading to the URL,
+- **stateMapping**: used for mapping the InstantSearch state towards the state that will be read and written to the URL.
 
-## How **do** I use Vue Router?
+If you want to customise which things are written in the URL but don't want to customise how exactly the URL looks you will use state mapping. The way to do this is replacing the call to `stateMapping` with an object with the functions `stateToRoute` and `routeToState`.
 
-If you have a Vue Router configuration that requires a synchronized use of the query parameters, or other parameters, as described in the InstantSearch guide, you need to write a custom "router" key for InstantSearch:
+If you also want to customise how the URL is read and written, for example when you are using Vue Router, you will override the behaviour of `router`. Note however that to use Vue Router, you don't **need** to synchronise InstantSearch routing to Vue Router routing, the only reason to do is if you are doing other router functions on your search page as well, and want to avoid conflicts when both are writing to the URL at the same time. To do this, you pass an object to the `router` key:
 
 ```js
+const router = this.router; /* get this from Vue Router */
+
 const instantSearchRouting = {
   router: {
     read() {
@@ -102,3 +126,5 @@ const router = new Router({
 ```
 
 Note that the `qs` module is already used in InstantSearch, so this will not add to your bundle size, unless you use a different version.
+
+All docs for InstantSearch routing configuration are [here](https://community.algolia.com/instantsearch.js/v2/guides/routing.html).
diff --git a/docs/src/components/InstantSearch.md b/docs/src/components/InstantSearch.md
@@ -53,7 +53,7 @@ Name | Type | Default | Description | Required
 `index-name` | String  | | The index to target for the search | yes
 `searchFunction` | `(AlgoliaHelper) => void` | | A hook that will be called each time a search needs to be done, with the [helper](https://community.algolia.com/algoliasearch-helper-js/) as a parameter. It’s your responsibility to call `helper.search()`. This option allows you to avoid doing searches at page load for example. | no
 `stalled-search-delay` | Number | `200`  | Time (in ms) before the search is considered unresponsive. Used to display a loading indicator. | no
-`routing` | Boolean or Object | `false` | Enable the default routing feature by passing `true`. More advanced usage is documented [here](https://community.algolia.com/instantsearch.js/v2/guides/routing.html). | no
+`routing` | Object | | documented [here](/advanced/vue-router-url-sync.html). | no
 class-names | Object | `{}` | Override class names | no
 
 ## Slots

diff --git a/docs/src/getting-started/migration.md b/docs/src/getting-started/migration.md
@@ -160,9 +160,7 @@ If you're using this, and have suggestions or questions, [please get in touch](h
 
 3. Routing
 
-Routing is not fully fleshed out yet. It's possible to set the `routing` prop to `true` or an object with the options, but it doesn't integrate with Vue Router yet at this point.
-
-If you're using this, and have suggestions, [please get in touch](https://github.com/algolia/vue-instantsearch/issues/new?template=v2_feedback.md).
+You're now able to use routing in InstantSearch with, or without Vue Router. Read more on how to use that [here](/advanced/vue-router-url-sync.html).
 
 4. changing props on `ais-instant-search`
 

diff --git a/examples/default-theme/package.json b/examples/default-theme/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "instantsearch.js": "^2.10.4",
     "vue": "^2.5.17",
     "vue-instantsearch": "2.0.0-alpha.3"
   },

diff --git a/examples/default-theme/src/App.vue b/examples/default-theme/src/App.vue
@@ -3,7 +3,7 @@
     <ais-instant-search
       :search-client="searchClient"
       index-name="instant_search"
-      :routing="true"
+      :routing="routing"
     >
       <ais-configure :hitsPerPage="16" />
 
@@ -119,6 +119,9 @@
 
 <script>
 import algoliasearch from 'algoliasearch/lite';
+import { history as historyRouter } from 'instantsearch.js/es/lib/routers';
+import { simple as simpleMapping } from 'instantsearch.js/es/lib/stateMappings';
+
 import './App.css';
 
 export default {
@@ -128,6 +131,10 @@ export default {
         'latency',
         '6be0576ff61c053d5f9a3225e2a90f76'
       ),
+      routing: {
+        router: historyRouter(),
+        stateMapping: simpleMapping(),
+      }
     };
   },
 };

diff --git a/examples/default-theme/yarn.lock b/examples/default-theme/yarn.lock
@@ -1123,7 +1123,7 @@ algoliasearch-helper@2.26.0:
     qs "^6.5.1"
     util "^0.10.3"
 
-algoliasearch-helper@^2.26.1:
+algoliasearch-helper@^2.26.0, algoliasearch-helper@^2.26.1:
   version "2.26.1"
   resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-2.26.1.tgz#75bd34f095e852d1bda483b8ebfb83c3c6e2852c"
   integrity sha512-fQBZZXC3rac4wadRj5wA/gxy88Twb+GQF3n8foew8SAsqe9Q59PFq1y3j08pr6eNSRYkZJV7qMpe7ox5D27KOw==
@@ -1154,7 +1154,7 @@ algoliasearch@3.27.0:
     semver "^5.1.0"
     tunnel-agent "^0.6.0"
 
-algoliasearch@^3.30.0:
+algoliasearch@^3.27.0, algoliasearch@^3.30.0:
   version "3.30.0"
   resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.30.0.tgz#355585e49b672e5f71d45b9c2b371ecdff129cd1"
   integrity sha512-FuinyPgNn0MeAHm9pan6rLgY6driY3mcTo4AWNBMY1MUReeA5PQA8apV/3SNXqA5bbsuvMvmA0ZrVzrOmEeQTA==
@@ -1931,6 +1931,11 @@ classnames@2.2.5:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
   integrity sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0=
 
+classnames@^2.2.5:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
+
 clean-css@4.2.x:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
@@ -3862,7 +3867,7 @@ hoek@5.x.x:
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-5.0.4.tgz#0f7fa270a1cafeb364a4b2ddfaa33f864e4157da"
   integrity sha512-Alr4ZQgoMlnere5FZJsIyfIjORBqZll5POhDsF4q64dPuJR6rNxXdDxtHSQq8OXRurhmx+PWYEE8bXRROY8h0w==
 
-hogan.js@3.0.2:
+hogan.js@3.0.2, hogan.js@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/hogan.js/-/hogan.js-3.0.2.tgz#4cd9e1abd4294146e7679e41d7898732b02c7bfd"
   integrity sha1-TNnhq9QpQUbnZ55B14mHMrAse/0=
@@ -4155,6 +4160,24 @@ instantsearch.js@^2.10.2:
     qs "6.5.1"
     to-factory "1.0.0"
 
+instantsearch.js@^2.10.4:
+  version "2.10.4"
+  resolved "https://registry.yarnpkg.com/instantsearch.js/-/instantsearch.js-2.10.4.tgz#446b1ce06eff52c86f195e761087950020cc7fee"
+  integrity sha512-hhGdYQJBejN4Xm1ElirNenD1BUsP6HE9HOoAII13psn1vXnKE89oQ7/3Z/fpVRBKM0P2KopXJZ5WVn2JFp7ZDQ==
+  dependencies:
+    algoliasearch "^3.27.0"
+    algoliasearch-helper "^2.26.0"
+    classnames "^2.2.5"
+    events "^1.1.0"
+    hogan.js "^3.0.2"
+    lodash "^4.17.5"
+    preact "^8.2.7"
+    preact-compat "^3.18.0"
+    preact-rheostat "^2.1.1"
+    prop-types "^15.5.10"
+    qs "^6.5.1"
+    to-factory "^1.0.0"
+
 internal-ip@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-3.0.1.tgz#df5c99876e1d2eb2ea2d74f520e3f669a00ece27"
@@ -6165,7 +6188,7 @@ preact-compat@3.18.0:
     prop-types "^15.5.8"
     standalone-react-addons-pure-render-mixin "^0.1.1"
 
-preact-compat@^3.17.0:
+preact-compat@^3.17.0, preact-compat@^3.18.0:
   version "3.18.4"
   resolved "https://registry.yarnpkg.com/preact-compat/-/preact-compat-3.18.4.tgz#fbe76ddd30356c68e3ccde608107104946f2cf8d"
   integrity sha512-aR5CvCIDerE2Y201ERVkWQdTAQKhKGNYujEk4tbyfQDInFTrnCCa3KCeGtULZrwy0PNRBjdQa2/Za7qv7ALNFg==
@@ -6183,7 +6206,7 @@ preact-render-to-string@^3.6.0, preact-render-to-string@^3.8.2:
   dependencies:
     pretty-format "^3.5.1"
 
-preact-rheostat@2.1.1:
+preact-rheostat@2.1.1, preact-rheostat@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/preact-rheostat/-/preact-rheostat-2.1.1.tgz#45fcb4c2f4f7beb6dbd5e0f18f744655fc16ac7c"
   integrity sha512-d03JgkpbjknALYl+zfNiJQ60sFd4A0YjnLCe/DB+rqKQck7jXpsW9RqSN0R50/lV8fEezhVCjq2WMPDDOKmwaA==
@@ -6203,7 +6226,7 @@ preact@8.2.7:
   resolved "https://registry.yarnpkg.com/preact/-/preact-8.2.7.tgz#316249fb678cd5e93e7cee63cea7bfb62dbd6814"
   integrity sha512-m34Ke8U32HyKRVzUOCAcaiIBLR2ye6syiuRclU5DxyixDPDFqdLbIElhERBrF6gDbPKQR+Vpv5bZ9CCbvN6pdQ==
 
-preact@^8.2.5:
+preact@^8.2.5, preact@^8.2.7:
   version "8.3.1"
   resolved "https://registry.yarnpkg.com/preact/-/preact-8.3.1.tgz#ed34f79d09edc5efd32a378a3416ef5dc531e3ac"
   integrity sha512-s8H1Y8O9e+mOBo3UP1jvWqArPmjCba2lrrGLlq/0kN1XuIINUbYtf97iiXKxCuG3eYwmppPKnyW2DBrNj/TuTg==
@@ -7427,7 +7450,7 @@ to-arraybuffer@^1.0.0:
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
   integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
 
-to-factory@1.0.0:
+to-factory@1.0.0, to-factory@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/to-factory/-/to-factory-1.0.0.tgz#8738af8bd97120ad1d4047972ada5563bf9479b1"
   integrity sha1-hzivi9lxIK0dQEeXKtpVY7+UebE=

diff --git a/examples/ecommerce/package.json b/examples/ecommerce/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "algoliasearch": "^3.30.0",
+    "instantsearch.js": "^2.10.4",
     "vue": "^2.5.17",
     "vue-instantsearch": "2.0.0-alpha.3"
   },

diff --git a/examples/ecommerce/src/App.vue b/examples/ecommerce/src/App.vue
@@ -3,7 +3,7 @@
     <ais-instant-search
       :search-client="searchClient"
       index-name="instant_search"
-      :routing="true"
+      :routing="router"
     >
       <ais-configure :hitsPerPage="16" />
 
@@ -163,6 +163,9 @@
 
 <script>
 import algoliasearch from 'algoliasearch/lite';
+import { history as historyRouter } from 'instantsearch.js/es/lib/routers';
+import { simple as simpleMapping } from 'instantsearch.js/es/lib/stateMappings';
+
 import './App.css';
 
 export default {
@@ -172,6 +175,10 @@ export default {
         'latency',
         '6be0576ff61c053d5f9a3225e2a90f76'
       ),
+      routing: {
+        router: historyRouter(),
+        stateMapping: simpleMapping(),
+      }
     };
   },
 };

diff --git a/examples/ecommerce/yarn.lock b/examples/ecommerce/yarn.lock
@@ -1119,7 +1119,7 @@ algoliasearch-helper@2.26.0:
     qs "^6.5.1"
     util "^0.10.3"
 
-algoliasearch-helper@^2.26.1:
+algoliasearch-helper@^2.26.0, algoliasearch-helper@^2.26.1:
   version "2.26.1"
   resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-2.26.1.tgz#75bd34f095e852d1bda483b8ebfb83c3c6e2852c"
   integrity sha512-fQBZZXC3rac4wadRj5wA/gxy88Twb+GQF3n8foew8SAsqe9Q59PFq1y3j08pr6eNSRYkZJV7qMpe7ox5D27KOw==
@@ -1150,7 +1150,7 @@ algoliasearch@3.27.0:
     semver "^5.1.0"
     tunnel-agent "^0.6.0"
 
-algoliasearch@^3.30.0:
+algoliasearch@^3.27.0, algoliasearch@^3.30.0:
   version "3.30.0"
   resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.30.0.tgz#355585e49b672e5f71d45b9c2b371ecdff129cd1"
   integrity sha512-FuinyPgNn0MeAHm9pan6rLgY6driY3mcTo4AWNBMY1MUReeA5PQA8apV/3SNXqA5bbsuvMvmA0ZrVzrOmEeQTA==
@@ -1927,6 +1927,11 @@ classnames@2.2.5:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
   integrity sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0=
 
+classnames@^2.2.5:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
+
 clean-css@4.2.x:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
@@ -3832,7 +3837,7 @@ hoek@5.x.x:
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-5.0.4.tgz#0f7fa270a1cafeb364a4b2ddfaa33f864e4157da"
   integrity sha512-Alr4ZQgoMlnere5FZJsIyfIjORBqZll5POhDsF4q64dPuJR6rNxXdDxtHSQq8OXRurhmx+PWYEE8bXRROY8h0w==
 
-hogan.js@3.0.2:
+hogan.js@3.0.2, hogan.js@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/hogan.js/-/hogan.js-3.0.2.tgz#4cd9e1abd4294146e7679e41d7898732b02c7bfd"
   integrity sha1-TNnhq9QpQUbnZ55B14mHMrAse/0=
@@ -4125,6 +4130,24 @@ instantsearch.js@^2.10.2:
     qs "6.5.1"
     to-factory "1.0.0"
 
+instantsearch.js@^2.10.4:
+  version "2.10.4"
+  resolved "https://registry.yarnpkg.com/instantsearch.js/-/instantsearch.js-2.10.4.tgz#446b1ce06eff52c86f195e761087950020cc7fee"
+  integrity sha512-hhGdYQJBejN4Xm1ElirNenD1BUsP6HE9HOoAII13psn1vXnKE89oQ7/3Z/fpVRBKM0P2KopXJZ5WVn2JFp7ZDQ==
+  dependencies:
+    algoliasearch "^3.27.0"
+    algoliasearch-helper "^2.26.0"
+    classnames "^2.2.5"
+    events "^1.1.0"
+    hogan.js "^3.0.2"
+    lodash "^4.17.5"
+    preact "^8.2.7"
+    preact-compat "^3.18.0"
+    preact-rheostat "^2.1.1"
+    prop-types "^15.5.10"
+    qs "^6.5.1"
+    to-factory "^1.0.0"
+
 internal-ip@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-3.0.1.tgz#df5c99876e1d2eb2ea2d74f520e3f669a00ece27"
@@ -6130,7 +6153,7 @@ preact-compat@3.18.0:
     prop-types "^15.5.8"
     standalone-react-addons-pure-render-mixin "^0.1.1"
 
-preact-compat@^3.17.0:
+preact-compat@^3.17.0, preact-compat@^3.18.0:
   version "3.18.4"
   resolved "https://registry.yarnpkg.com/preact-compat/-/preact-compat-3.18.4.tgz#fbe76ddd30356c68e3ccde608107104946f2cf8d"
   integrity sha512-aR5CvCIDerE2Y201ERVkWQdTAQKhKGNYujEk4tbyfQDInFTrnCCa3KCeGtULZrwy0PNRBjdQa2/Za7qv7ALNFg==
@@ -6148,7 +6171,7 @@ preact-render-to-string@^3.6.0, preact-render-to-string@^3.8.2:
   dependencies:
     pretty-format "^3.5.1"
 
-preact-rheostat@2.1.1:
+preact-rheostat@2.1.1, preact-rheostat@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/preact-rheostat/-/preact-rheostat-2.1.1.tgz#45fcb4c2f4f7beb6dbd5e0f18f744655fc16ac7c"
   integrity sha512-d03JgkpbjknALYl+zfNiJQ60sFd4A0YjnLCe/DB+rqKQck7jXpsW9RqSN0R50/lV8fEezhVCjq2WMPDDOKmwaA==
@@ -6168,7 +6191,7 @@ preact@8.2.7:
   resolved "https://registry.yarnpkg.com/preact/-/preact-8.2.7.tgz#316249fb678cd5e93e7cee63cea7bfb62dbd6814"
   integrity sha512-m34Ke8U32HyKRVzUOCAcaiIBLR2ye6syiuRclU5DxyixDPDFqdLbIElhERBrF6gDbPKQR+Vpv5bZ9CCbvN6pdQ==
 
-preact@^8.2.5:
+preact@^8.2.5, preact@^8.2.7:
   version "8.3.1"
   resolved "https://registry.yarnpkg.com/preact/-/preact-8.3.1.tgz#ed34f79d09edc5efd32a378a3416ef5dc531e3ac"
   integrity sha512-s8H1Y8O9e+mOBo3UP1jvWqArPmjCba2lrrGLlq/0kN1XuIINUbYtf97iiXKxCuG3eYwmppPKnyW2DBrNj/TuTg==
@@ -7398,7 +7421,7 @@ to-arraybuffer@^1.0.0:
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
   integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
 
-to-factory@1.0.0:
+to-factory@1.0.0, to-factory@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/to-factory/-/to-factory-1.0.0.tgz#8738af8bd97120ad1d4047972ada5563bf9479b1"
   integrity sha1-hzivi9lxIK0dQEeXKtpVY7+UebE=

diff --git a/examples/media/package.json b/examples/media/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "algoliasearch": "3.30.0",
+    "instantsearch.js": "^2.10.4",
     "vue": "^2.5.17",
     "vue-instantsearch": "2.0.0-alpha.3"
   },

diff --git a/examples/media/src/App.vue b/examples/media/src/App.vue
@@ -2,7 +2,7 @@
   <ais-instant-search
     :search-client="searchClient"
     index-name="movies"
-    :routing="true"
+    :routing="routing"
   >
     <header class="navbar">
       <img src="https://res.cloudinary.com/hilnmyskv/image/upload/w_100,h_100,dpr_2.0//v1461180087/logo-instantsearchjs-avatar.png" width="40">
@@ -96,6 +96,9 @@
 
 <script>
 import algoliasearch from 'algoliasearch/lite';
+import { history as historyRouter } from 'instantsearch.js/es/lib/routers';
+import { simple as simpleMapping } from 'instantsearch.js/es/lib/stateMappings';
+
 import './App.css';
 
 export default {
@@ -105,6 +108,10 @@ export default {
         'latency',
         '6be0576ff61c053d5f9a3225e2a90f76'
       ),
+      routing: {
+        router: historyRouter(),
+        stateMapping: simpleMapping(),
+      }
     };
   },
 };