diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000..e69fdf9a8e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,7 @@
+packages/*/dist
+packages/*/yarn-error.log
+packages/vue
+lerna-debug.log
+npm-debug.log
+node_modules
+yarn.lock
diff --git a/COMPONENT.md b/COMPONENT.md
new file mode 100644
index 0000000000..05996aadb6
--- /dev/null
+++ b/COMPONENT.md
@@ -0,0 +1,26 @@
+Component
+---------
+
+In this document, a few rules / guidelines to ensure maximum consistency & re-usability for custom components.
+
+## Styles and Classes
+
+* Prefix your classes with a short (max 4 chars) vendor name. We use `alg`, please use another one.
+* Do not use [`scoped`](https://vue-loader.vuejs.org/en/features/scoped-css.html) styles, it makes it very hard to override them.
+* Use [BEM notation](http://getbem.com/introduction/) with only one depth level.
+* Unless you are trying to ship a very opinionated styled component, just add styles for the elements that helps understanding the behaviour. i.e. for a pagination component, you will want to put in bold the current page.
+
+## Component good practices
+
+* Use the `vue-algolia-component` mixin. This will make sure your component can resolve the `searchStore` if not provided. It ensures the `searchStore` prop is available in your component at any time.
+* If you need mutate the `searchStore` multiple times, please use `searchStore.stop()` and `searchStore.start()`, so that other components don't update their rendering on every intermediary state mutation.
+* Make sure that when the component is mounted, you catch up with the `searchStore`. You can optionally mutate the state of the `searchStore` at this stage. 
+* When a component is `unmounted` or `destroyed`, make sure that you leave the `searchStore` in a state that does not include things you might have added (facets / filters / etc.).
+* Make sure your component gracefully handles any state of the `searchStore`.
+* Suffix all faceting components with `Facet`
+
+## Export UMD + ES2015
+
+* Export your component as UMD and make the `.vue` file the default entry point.
+* If you have more things you'd like to export (i.e. if you decide to break down your component in several mixins and you want to expose those), the please also provide users with an ES2015 build so that they can leverage tree shaking.
+
diff --git a/build/rollup.cjs.config.js b/build/rollup.cjs.config.js
new file mode 100644
index 0000000000..fcb2bf5b13
--- /dev/null
+++ b/build/rollup.cjs.config.js
@@ -0,0 +1,19 @@
+import vue from 'rollup-plugin-vue';
+import buble from 'rollup-plugin-buble';
+import filesize from 'rollup-plugin-filesize';
+import fs from 'fs';
+const pkg = JSON.parse(fs.readFileSync('package.json'));
+const dependencies = Object.keys(pkg.dependencies || []);
+
+export default {
+  entry: 'src/index.js',
+  external: dependencies,
+  plugins: [
+    vue({compileTemplate: true, css: false}),
+    buble(),
+    filesize()
+  ],
+  targets: [
+    { dest: `dist/${pkg.name}.common.js`, format: 'cjs' },
+  ]
+};
diff --git a/build/rollup.es.config.js b/build/rollup.es.config.js
new file mode 100644
index 0000000000..be430685a8
--- /dev/null
+++ b/build/rollup.es.config.js
@@ -0,0 +1,19 @@
+import vue from 'rollup-plugin-vue';
+import buble from 'rollup-plugin-buble';
+import filesize from 'rollup-plugin-filesize';
+import fs from 'fs';
+const pkg = JSON.parse(fs.readFileSync('package.json'));
+const dependencies = Object.keys(pkg.dependencies || []);
+
+export default {
+  entry: 'src/index.js',
+  external: dependencies,
+  plugins: [
+    vue({compileTemplate: true, css: false}),
+    buble(),
+    filesize()
+  ],
+  targets: [
+    { dest: `dist/${pkg.name}.esm.js`, format: 'es' },
+  ]
+};
diff --git a/build/rollup.umd.config.js b/build/rollup.umd.config.js
new file mode 100644
index 0000000000..3dee490f56
--- /dev/null
+++ b/build/rollup.umd.config.js
@@ -0,0 +1,36 @@
+import vue from 'rollup-plugin-vue';
+import buble from 'rollup-plugin-buble';
+import filesize from 'rollup-plugin-filesize';
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import uglify from 'rollup-plugin-uglify';
+import replace from 'rollup-plugin-replace';
+import camelize from 'camelize';
+import fs from 'fs';
+const pkg = JSON.parse(fs.readFileSync('package.json'));
+let moduleName = camelize(pkg.name);
+moduleName = moduleName.charAt(0).toUpperCase() + moduleName.slice(1);
+
+export default {
+  entry: 'src/index.js',
+  moduleName: moduleName,
+  plugins: [
+    vue({compileTemplate: true, css: false}),
+    resolve({
+      browser: true,
+      preferBuiltins: false
+    }),
+    buble(),
+    commonjs(),
+    replace({
+      'process.env': JSON.stringify({
+        'NODE_ENV': 'production'
+      })
+    }),
+    uglify(),
+    filesize()
+  ],
+  targets: [
+    { dest: `dist/${pkg.name}.js`, format: 'umd' },
+  ]
+};
diff --git a/lerna.json b/lerna.json
new file mode 100644
index 0000000000..cfe3928fb4
--- /dev/null
+++ b/lerna.json
@@ -0,0 +1,8 @@
+{
+  "lerna": "2.0.0-beta.38",
+  "packages": [
+    "packages/*"
+  ],
+  "npmClient": "yarn",
+  "version": "0.0.0"
+}
diff --git a/packages/algolia-search-store/package.json b/packages/algolia-search-store/package.json
new file mode 100644
index 0000000000..d9b5c2f829
--- /dev/null
+++ b/packages/algolia-search-store/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "algolia-search-store",
+  "version": "0.0.0",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/algolia-search-store.common.js",
+  "module": "dist/algolia-search-store.esm.js",
+  "jsnext:main": "dist/algolia-search-store.esm.js",
+  "unpkg": "dist/algolia-search-store.js",
+  "scripts": {
+    "build": "yarn build-umd && yarn build-es && yarn build-cjs",
+    "build-umd": "rollup -c ../../build/rollup.umd.config.js",
+    "build-es": "rollup -c ../../build/rollup.es.config.js",
+    "build-cjs": "rollup -c ../../build/rollup.cjs.config.js"
+  },
+  "dependencies": {
+    "algoliasearch": "^3.18.1",
+    "algoliasearch-helper": "^2.14.0"
+  },
+  "peerDependencies": {
+    "vue": "^2.2.2"
+  }
+}
diff --git a/packages/algolia-search-store/src/index.js b/packages/algolia-search-store/src/index.js
new file mode 100644
index 0000000000..1a8e00b247
--- /dev/null
+++ b/packages/algolia-search-store/src/index.js
@@ -0,0 +1,275 @@
+import algolia from 'algoliasearch'
+import algoliaHelper from 'algoliasearch-helper'
+
+export const FACET_CONJUNCTIVE = 'conjunctive'
+export const FACET_DISJUNCTIVE = 'disjunctive'
+export const FACET_HIERARCHICAL = 'hierarchical'
+
+const assertValidFacetType = function (type) {
+  if (type === FACET_CONJUNCTIVE) return
+  if (type === FACET_DISJUNCTIVE) return
+  if (type === FACET_HIERARCHICAL) return
+
+  throw new Error(`Invalid facet type ${type}.`)
+}
+
+export const createFromAlgoliaCredentials = (appID, apiKey) => {
+  const client = algolia(appID, apiKey)
+  const helper = algoliaHelper(client)
+
+  return new Store(helper)
+}
+
+export const createFromAlgoliaClient = (client) => {
+  const helper = algoliaHelper(client)
+
+  return new Store(helper)
+}
+
+const onHelperChange =  function () {
+  if (this._stoppedCounter === 0) {
+    this.refresh()
+  }
+}
+
+export class Store {
+  constructor(algoliaHelper) {
+    // We require one start() call to execute the first search query.
+    // Allows every widget to alter the state at initialization
+    // without trigger multiple queries.
+    this._stoppedCounter = 1
+
+    this.algoliaHelper = algoliaHelper
+  }
+
+  set algoliaHelper(algoliaHelper) {
+
+    if(this._helper) {
+      this._helper.removeListener('change', onHelperChange)
+    }
+
+    this._helper = algoliaHelper
+    this._helper.on('change', onHelperChange.bind(this))
+
+    // Todo: fetch the version somehow.
+    this._helper.getClient().addAlgoliaAgent('Store (x.x.x)')
+  }
+
+  set algoliaClient(algoliaClient) {
+    this._helper.setClient(algoliaClient)
+    // Todo: this does not trigger a "change" event for now.
+    // Todo: maybe refresh after this?
+  }
+
+  get algoliaClient() {
+    return this._helper.getClient()
+  }
+
+  get algoliaApiKey() {
+    return this.algoliaClient.apiKey
+  }
+
+  get algoliaAppId() {
+    return this.algoliaClient.applicationID
+  }
+
+  start() {
+    if (this._stoppedCounter < 1) {
+      this._stoppedCounter = 0
+    } else {
+      this._stoppedCounter--
+    }
+
+    if (this._stoppedCounter === 0) {
+      this.refresh()
+    }
+  }
+
+  stop() {
+    this._stoppedCounter++
+  }
+
+  set index(index) {
+    this._helper.setIndex(index)
+  }
+
+  get index() {
+    return this._helper.getIndex()
+  }
+
+  set hitsPerPage(hitsPerPage) {
+    this._helper.setQueryParameter('hitsPerPage', hitsPerPage)
+  }
+
+  get hitsPerPage() {
+    let hitsPerPage = this._helper.getQueryParameter('hitsPerPage')
+
+    if(hitsPerPage) {
+      return hitsPerPage
+    }
+
+    return this._helper.lastResults ? this._helper.lastResults.hitsPerPage : 0
+  }
+
+  get hits() {
+    if (!this._helper.lastResults) {
+      return []
+    }
+
+    return this._helper.lastResults.hits
+  }
+
+  get page() {
+    return this._helper.getPage()
+  }
+
+  set page(page) {
+    this._helper.setPage(page)
+  }
+
+  get nbPages() {
+    if (!this._helper.lastResults) {
+      return 0
+    }
+
+    return this._helper.lastResults.nbPages
+  }
+
+  get nbHits() {
+    if (!this._helper.lastResults) {
+      return 0
+    }
+
+    return this._helper.lastResults.nbHits
+  }
+
+  get processingTimeMS() {
+    if (!this._helper.lastResults) {
+      return 0
+    }
+
+    return this._helper.lastResults.processingTimeMS
+  }
+
+  firstPage() {
+    this.page = 0
+  }
+
+  previousPage() {
+    this._helper.previousPage()
+  }
+
+  nextPage() {
+    this._helper.nextPage()
+  }
+
+  lastPage() {
+    this.page = this.nbPages - 1
+  }
+
+  addFacet(attribute, type = FACET_CONJUNCTIVE) {
+    assertValidFacetType(type)
+
+    this.stop()
+    this.removeFacet(attribute)
+
+    let state = null
+    if (type === FACET_CONJUNCTIVE) {
+      state = this._helper.state.addFacet(attribute)
+    } else if (type === FACET_DISJUNCTIVE) {
+      state = this._helper.state.addDisjunctiveFacet(attribute)
+    } else if (type === FACET_HIERARCHICAL) {
+      state = this._helper.state.addHierarchicalFacet(attribute)
+    }
+
+    this._helper.setState(state)
+    this.start()
+  }
+
+  removeFacet(attribute) {
+    if (this._helper.state.isConjunctiveFacet(attribute)) {
+      this._helper.state.removeFacet(attribute)
+    } else if (this._helper.state.isDisjunctiveFacet(attribute)) {
+      this._helper.state.removeDisjunctiveFacet(attribute)
+    } else if (this._helper.state.isDisjunctiveFacet(attribute)) {
+      this._helper.state.removeHierarchicalFacet(attribute)
+    }
+  }
+
+  addFacetRefinement(attribute, value) {
+    if (this._helper.state.isConjunctiveFacet(attribute)) {
+      this._helper.addFacetRefinement(attribute, value)
+    } else if (this._helper.state.isDisjunctiveFacet(attribute)) {
+      this._helper.addDisjunctiveFacetRefinement(attribute, value)
+    } else if (this._helper.state.isDisjunctiveFacet(attribute)) {
+      this._helper.addHierarchicalFacetRefinement(attribute, value)
+    }
+  }
+
+  toggleFacetRefinement(facet, value) {
+    this._helper.toggleRefinement(facet, value)
+  }
+
+  clearRefinements(attribute) {
+    this._helper.clearRefinements(attribute)
+  }
+
+  isConjunctiveFacet(attribute) {
+    return this._helper.state.isConjunctiveFacet(attribute)
+  }
+
+  isDisjunctiveFacet(attribute) {
+    return this._helper.state.isDisjunctiveFacet(attribute)
+  }
+
+  isHierarchicalFacet(attribute) {
+    return this._helper.state.isHierarchicalFacet(attribute)
+  }
+
+  getFacetValues(attribute, sortBy, limit = -1) {
+    if (!this._helper.lastResults) {
+      return []
+    }
+
+    // Todo: make sure the attribute is already added.
+    // Todo: Not sure this should be here because will make it very hard to debug I suppose.
+
+    let values = this._helper.lastResults.getFacetValues(attribute, {sortBy})
+    if (limit === -1) {
+      return values
+    }
+
+    return values.slice(0, limit)
+  }
+
+  get activeRefinements() {
+    if (!this._helper.lastResults) {
+      return []
+    }
+
+    return this._helper.lastResults.getRefinements()
+  }
+
+  addNumericRefinement(attribute, operator, value) {
+    this._helper.addNumericRefinement(attribute, operator, value)
+  }
+
+  removeNumericRefinement(attribute, operator, value) {
+    this._helper.removeNumericRefinement(attribute, operator, value)
+  }
+
+  set query(query) {
+    if (this._helper.state.query === query) {
+      return
+    }
+    this._helper.setQuery(query)
+  }
+
+  get query() {
+    return this._helper.state.query
+  }
+
+  refresh() {
+    this._helper.search()
+  }
+}
diff --git a/packages/vue-algolia-clear-search/package.json b/packages/vue-algolia-clear-search/package.json
new file mode 100644
index 0000000000..edc0ff07d7
--- /dev/null
+++ b/packages/vue-algolia-clear-search/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "vue-algolia-clear-search",
+  "version": "0.0.0",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/vue-algolia-clear-search.common.js",
+  "module": "dist/vue-algolia-clear-search.esm.js",
+  "jsnext:main": "dist/vue-algolia-clear-search.esm.js",
+  "unpkg": "dist/vue-algolia-clear-search.js",
+  "scripts": {
+    "build": "yarn build-umd && yarn build-es && yarn build-cjs",
+    "build-umd": "rollup -c ../../build/rollup.umd.config.js",
+    "build-es": "rollup -c ../../build/rollup.es.config.js",
+    "build-cjs": "rollup -c ../../build/rollup.cjs.config.js"
+  },
+  "dependencies": {
+    "vue-algolia-component": "*"
+  },
+  "peerDependencies": {
+    "vue": "^2.2.2"
+  }
+}
diff --git a/packages/vue-algolia-clear-search/src/ClearSearch.vue b/packages/vue-algolia-clear-search/src/ClearSearch.vue
new file mode 100644
index 0000000000..f7443fd9a4
--- /dev/null
+++ b/packages/vue-algolia-clear-search/src/ClearSearch.vue
@@ -0,0 +1,63 @@
+<template>
+  <button type="reset"
+          class="alg-clear-search"
+          :class="{'alg-clear-search--disabled': disabled}"
+          :disabled="disabled"
+          @click.prevent="clear"
+  >
+    <slot>
+      <span class="alg-clear-search__label">{{ label }}</span>
+    </slot>
+  </button>
+</template>
+
+<script>
+  import algoliaComponent from 'vue-algolia-component'
+
+  export default {
+    mixins: [algoliaComponent],
+    props: {
+      clearQuery: {
+        type: Boolean,
+        required: false,
+        default: true
+      },
+      clearFacets: {
+        type: Boolean,
+        required: false,
+        default: true
+      },
+      label: {
+        type: String,
+        default: "Clear"
+      }
+    },
+    computed: {
+      disabled: function () {
+        if (this.clearQuery && this.searchStore.query.length > 0) {
+          return false
+        }
+
+        if (this.clearFacets && this.searchStore.activeRefinements.length > 0) {
+          return false
+        }
+
+        return true
+      }
+    },
+    methods: {
+      clear: function () {
+        this.searchStore.stop()
+        if (this.clearQuery && this.searchStore.query.length > 0) {
+          this.searchStore.query = ''
+        }
+
+        if (this.clearFacets && this.searchStore.activeRefinements.length > 0) {
+          this.searchStore.clearRefinements()
+        }
+        this.searchStore.start()
+      }
+    }
+  }
+</script>
+
diff --git a/packages/vue-algolia-clear-search/src/index.js b/packages/vue-algolia-clear-search/src/index.js
new file mode 100644
index 0000000000..d5bb6ff4fe
--- /dev/null
+++ b/packages/vue-algolia-clear-search/src/index.js
@@ -0,0 +1 @@
+export {default} from './ClearSearch.vue'
diff --git a/packages/vue-algolia-component/package.json b/packages/vue-algolia-component/package.json
new file mode 100644
index 0000000000..1d64092122
--- /dev/null
+++ b/packages/vue-algolia-component/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "vue-algolia-component",
+  "version": "0.0.0",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/vue-algolia-component.common.js",
+  "module": "dist/vue-algolia-component.esm.js",
+  "jsnext:main": "dist/vue-algolia-component.esm.js",
+  "unpkg": "dist/vue-algolia-component.js",
+  "scripts": {
+    "build": "yarn build-umd && yarn build-es && yarn build-cjs",
+    "build-umd": "rollup -c ../../build/rollup.umd.config.js",
+    "build-es": "rollup -c ../../build/rollup.es.config.js",
+    "build-cjs": "rollup -c ../../build/rollup.cjs.config.js"
+  },
+  "peerDependencies": {
+    "vue": "^2.2.2"
+  }
+}
+
diff --git a/packages/vue-algolia-component/src/index.js b/packages/vue-algolia-component/src/index.js
new file mode 100644
index 0000000000..6ad7b156f8
--- /dev/null
+++ b/packages/vue-algolia-component/src/index.js
@@ -0,0 +1,19 @@
+export default {
+  inject: ['_searchStore'],
+  props: {
+    searchStore: {
+      type: Object,
+      default () {
+        return this._searchStore
+      },
+      validator (value) {
+        if (typeof value !== 'object') {
+          throw 'It looks like you forgot to wrap your Algolia search component inside of an <search-store> component. You can also pass the store as a prop to your component.'
+        }
+
+        return true
+      }
+    }
+  }
+}
+
diff --git a/packages/vue-algolia-components/package.json b/packages/vue-algolia-components/package.json
new file mode 100644
index 0000000000..7764f0686c
--- /dev/null
+++ b/packages/vue-algolia-components/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "vue-algolia-components",
+  "version": "0.0.0",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/vue-algolia-components.common.js",
+  "module": "dist/vue-algolia-components.esm.js",
+  "jsnext:main": "dist/vue-algolia-components.esm.js",
+  "unpkg": "dist/vue-algolia-components.js",
+  "scripts": {
+    "build": "yarn build-umd && yarn build-es && yarn build-cjs",
+    "build-umd": "rollup -c ../../build/rollup.umd.config.js",
+    "build-es": "rollup -c ../../build/rollup.es.config.js",
+    "build-cjs": "rollup -c ../../build/rollup.cjs.config.js"
+  },
+  "dependencies": {
+    "vue-algolia-search-store": "*",
+    "vue-algolia-search-input": "*",
+    "vue-algolia-search-results": "*",
+    "vue-algolia-search-stats": "*",
+    "vue-algolia-ranged-pagination": "*",
+    "vue-algolia-results-per-page-selector": "*",
+    "vue-algolia-navigation-tree-facet": "*",
+    "vue-algolia-sort-by-selector": "*",
+    "vue-algolia-clear-search": "*",
+    "vue-algolia-stars-facet": "*",
+    "vue-algolia-empty-results": "*",
+    "vue-algolia-search-facet": "*",
+    "vue-algolia-price-range-facet": "*"
+  },
+  "peerDependencies": {
+    "vue": "^2.2.2"
+  }
+}
diff --git a/packages/vue-algolia-components/src/index.js b/packages/vue-algolia-components/src/index.js
new file mode 100644
index 0000000000..b21310e5d4
--- /dev/null
+++ b/packages/vue-algolia-components/src/index.js
@@ -0,0 +1,67 @@
+import SearchStore from 'vue-algolia-search-store'
+import SearchInput from 'vue-algolia-search-input'
+import SearchResults from 'vue-algolia-search-results'
+import SearchStats from 'vue-algolia-search-stats'
+import RangedPagination from 'vue-algolia-ranged-pagination'
+import ResultsPerPageSelector from 'vue-algolia-results-per-page-selector'
+import NavigationTreeFacet from 'vue-algolia-navigation-tree-facet'
+import SortBySelector from 'vue-algolia-sort-by-selector'
+import ClearSearch from 'vue-algolia-clear-search'
+import StarsFacet from 'vue-algolia-stars-facet'
+import EmptyResults from 'vue-algolia-empty-results'
+import SearchFacet from 'vue-algolia-search-facet'
+import PriceRangeFacet from 'vue-algolia-price-range-facet'
+
+const Algolia = {
+  SearchStore,
+  SearchInput,
+  SearchResults,
+  SearchStats,
+  RangedPagination,
+  ResultsPerPageSelector,
+  NavigationTreeFacet,
+  SortBySelector,
+  ClearSearch,
+  StarsFacet,
+  EmptyResults,
+  SearchFacet,
+  PriceRangeFacet,
+
+  install (Vue) {
+    Vue.component('search-store', SearchStore)
+    Vue.component('search-input', SearchInput)
+    Vue.component('search-results', SearchResults)
+    Vue.component('search-stats', SearchStats)
+    Vue.component('ranged-pagination', RangedPagination)
+    Vue.component('results-per-page-selector', ResultsPerPageSelector)
+    Vue.component('navigation-tree-facet', NavigationTreeFacet)
+    Vue.component('sort-by-selector', SortBySelector)
+    Vue.component('clear-search', ClearSearch)
+    Vue.component('stars-facet', StarsFacet)
+    Vue.component('empty-results', EmptyResults)
+    Vue.component('search-facet', SearchFacet)
+    Vue.component('price-range-facet', PriceRangeFacet)
+  }
+
+}
+
+// Automatically register Algolia Search components if Vue is available globally
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.use(Algolia);
+}
+
+export default Algolia
+
+export {SearchStore}
+export {SearchInput}
+export {SearchResults}
+export {SearchStats}
+export {RangedPagination}
+export {ResultsPerPageSelector}
+export {NavigationTreeFacet}
+export {SortBySelector}
+export {ClearSearch}
+export {StarsFacet}
+export {EmptyResults}
+export {SearchFacet}
+export {PriceRangeFacet}
diff --git a/packages/vue-algolia-empty-results/package.json b/packages/vue-algolia-empty-results/package.json
new file mode 100644
index 0000000000..68aa99cc3c
--- /dev/null
+++ b/packages/vue-algolia-empty-results/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "vue-algolia-empty-results",
+  "version": "0.0.0",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/vue-algolia-empty-results.common.js",
+  "module": "dist/vue-algolia-empty-results.esm.js",
+  "jsnext:main": "dist/vue-algolia-empty-results.esm.js",
+  "unpkg": "dist/vue-algolia-empty-results.js",
+  "scripts": {
+    "build": "yarn build-umd && yarn build-es && yarn build-cjs",
+    "build-umd": "rollup -c ../../build/rollup.umd.config.js",
+    "build-es": "rollup -c ../../build/rollup.es.config.js",
+    "build-cjs": "rollup -c ../../build/rollup.cjs.config.js"
+  },
+  "dependencies": {
+    "vue-algolia-component": "*"
+  },
+  "peerDependencies": {
+    "vue": "^2.2.2"
+  }
+}
diff --git a/packages/vue-algolia-empty-results/src/EmptyResults.vue b/packages/vue-algolia-empty-results/src/EmptyResults.vue
new file mode 100644
index 0000000000..93e89aa4cb
--- /dev/null
+++ b/packages/vue-algolia-empty-results/src/EmptyResults.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="empty-search-results" v-if="nbHits <= 0">
+    <slot>
+      No results matched your query <strong class="alg-empty-results__query">{{query}}</strong>
+    </slot>
+  </div>
+</template>
+
+<script>
+  import algoliaComponent from 'vue-algolia-component'
+
+  export default {
+    mixins: [algoliaComponent],
+    computed: {
+      nbHits: function () {
+        return this.searchStore.nbHits
+      },
+      query: function () {
+        return this.searchStore.query
+      }
+    }
+  }
+</script>
diff --git a/packages/vue-algolia-empty-results/src/index.js b/packages/vue-algolia-empty-results/src/index.js
new file mode 100644
index 0000000000..537da391fa
--- /dev/null
+++ b/packages/vue-algolia-empty-results/src/index.js
@@ -0,0 +1 @@
+export {default} from './EmptyResults.vue'
diff --git a/packages/vue-algolia-navigation-tree-facet/package.json b/packages/vue-algolia-navigation-tree-facet/package.json
new file mode 100644
index 0000000000..c5997a2150
--- /dev/null
+++ b/packages/vue-algolia-navigation-tree-facet/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "vue-algolia-navigation-tree-facet",
+  "version": "0.0.0",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/vue-algolia-navigation-tree-facet.common.js",
+  "module": "dist/vue-algolia-navigation-tree-facet.esm.js",
+  "jsnext:main": "dist/vue-algolia-navigation-tree-facet.esm.js",
+  "unpkg": "dist/vue-algolia-navigation-tree-facet.js",
+  "scripts": {
+    "build": "yarn build-umd && yarn build-es && yarn build-cjs",
+    "build-umd": "rollup -c ../../build/rollup.umd.config.js",
+    "build-es": "rollup -c ../../build/rollup.es.config.js",
+    "build-cjs": "rollup -c ../../build/rollup.cjs.config.js"
+  },
+  "dependencies": {
+    "vue-algolia-component": "*"
+  },
+  "peerDependencies": {
+    "vue": "^2.2.2"
+  }
+}
+
diff --git a/packages/vue-algolia-navigation-tree-facet/src/NavigationTreeFacet.vue b/packages/vue-algolia-navigation-tree-facet/src/NavigationTreeFacet.vue
new file mode 100644
index 0000000000..c7d38369df
--- /dev/null
+++ b/packages/vue-algolia-navigation-tree-facet/src/NavigationTreeFacet.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="alg-navigation-tree-facet" v-if="facetValues.length > 0">
+    <slot name="header"></slot>
+
+    <ul v-if="facetValues.length > 0">
+      <li v-for="facet in facetValues"
+          class="alg-navigation-tree-facet__item"
+          :class="{'alg-navigation-tree-facet__item--active': facet.isRefined}"
+      >
+        <label>
+          <input type="checkbox"
+                 v-model="facet.isRefined"
+                 @change="toggleRefinement(facet)"
+                 :value="facet.name"
+                 :name="name + '[]'"
+          >
+          <span class="alg-navigation-tree-facet__value">{{facet.name}}</span>
+          <span class="alg-navigation-tree-facet__count">({{facet.count}})</span>
+        </label>
+
+        <template v-if="facet.isRefined && facet.data.length > 0">
+          <ul>
+            <li v-for="subfacet in facet.data"
+                class="alg-navigation-tree-facet__item"
+                :class="{'alg-navigation-tree-facet__item--active': subfacet.isRefined}"
+            >
+              <label>
+                <input type="checkbox"
+                       v-model="subfacet.isRefined"
+                       @change="toggleRefinement(subfacet)"
+                       :value="subfacet.name"
+                       :name="name + '[]'"
+                >
+                <span class="alg-navigation-tree-facet__value">{{subfacet.name}}</span>
+                <span class="alg-navigation-tree-facet__count">({{subfacet.count}})</span>
+              </label>
+            </li>
+          </ul>
+        </template>
+
+      </li>
+    </ul>
+
+    <slot name="footer"></slot>
+  </div>
+</template>
+
+<script>
+  import algoliaComponent from 'vue-algolia-component'
+
+  export default {
+    mixins: [algoliaComponent],
+    props: {
+      name: {
+        type: String,
+        default () {
+          return this.attribute
+        }
+      },
+      attribute: {
+        type: String,
+        required: false,
+        default: 'hierarchical_list'
+      },
+      attributes: {
+        type: Array,
+        required: true
+      },
+      separator: {
+        type: String,
+        required: false,
+        default: ' > '
+      },
+      limit: {
+        type: Number,
+        default: 10
+      },
+      sortBy: {
+        default () {
+          return ['name:asc']
+        }
+      }
+    },
+    mounted () {
+      this.searchStore.addFacet({
+        name: this.attribute,
+        attributes: this.attributes,
+        separator: this.separator
+      }, 'hierarchical')
+    },
+    destroyed () {
+      this.searchStore.removeFacet(this.attribute)
+    },
+    computed: {
+      facetValues () {
+        let values = this.searchStore.getFacetValues(this.attribute, this.sortBy)
+
+        return values.data || []
+      }
+    },
+    methods: {
+      toggleRefinement (value) {
+        return this.searchStore.toggleFacetRefinement(this.attribute, value.path)
+      }
+    }
+  }
+</script>
diff --git a/packages/vue-algolia-navigation-tree-facet/src/index.js b/packages/vue-algolia-navigation-tree-facet/src/index.js
new file mode 100644
index 0000000000..d531a610cc
--- /dev/null
+++ b/packages/vue-algolia-navigation-tree-facet/src/index.js
@@ -0,0 +1 @@
+export {default} from './NavigationTreeFacet.vue'
diff --git a/packages/vue-algolia-playground/.babelrc b/packages/vue-algolia-playground/.babelrc
new file mode 100644
index 0000000000..13f0e47164
--- /dev/null
+++ b/packages/vue-algolia-playground/.babelrc
@@ -0,0 +1,14 @@
+{
+  "presets": [
+    ["env", { "modules": false }],
+    "stage-2"
+  ],
+  "plugins": ["transform-runtime"],
+  "comments": false,
+  "env": {
+    "test": {
+      "presets": ["env", "stage-2"],
+      "plugins": [ "istanbul" ]
+    }
+  }
+}
diff --git a/packages/vue-algolia-playground/.editorconfig b/packages/vue-algolia-playground/.editorconfig
new file mode 100644
index 0000000000..9d08a1a828
--- /dev/null
+++ b/packages/vue-algolia-playground/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/packages/vue-algolia-playground/.gitignore b/packages/vue-algolia-playground/.gitignore
new file mode 100644
index 0000000000..c369a4d900
--- /dev/null
+++ b/packages/vue-algolia-playground/.gitignore
@@ -0,0 +1,5 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
+yarn-error.log
diff --git a/packages/vue-algolia-playground/.postcssrc.js b/packages/vue-algolia-playground/.postcssrc.js
new file mode 100644
index 0000000000..ea9a5ab875
--- /dev/null
+++ b/packages/vue-algolia-playground/.postcssrc.js
@@ -0,0 +1,8 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    // to edit target browsers: use "browserlist" field in package.json
+    "autoprefixer": {}
+  }
+}
diff --git a/packages/vue-algolia-playground/README.md b/packages/vue-algolia-playground/README.md
new file mode 100644
index 0000000000..3bfa9b7bc8
--- /dev/null
+++ b/packages/vue-algolia-playground/README.md
@@ -0,0 +1,21 @@
+# vue-algolia-playground
+
+> Algolia + Vue.js playground
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+```
+
+For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
diff --git a/packages/vue-algolia-playground/build/build.js b/packages/vue-algolia-playground/build/build.js
new file mode 100644
index 0000000000..6b8add100c
--- /dev/null
+++ b/packages/vue-algolia-playground/build/build.js
@@ -0,0 +1,35 @@
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+var ora = require('ora')
+var rm = require('rimraf')
+var path = require('path')
+var chalk = require('chalk')
+var webpack = require('webpack')
+var config = require('../config')
+var webpackConfig = require('./webpack.prod.conf')
+
+var spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, function (err, stats) {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})
diff --git a/packages/vue-algolia-playground/build/check-versions.js b/packages/vue-algolia-playground/build/check-versions.js
new file mode 100644
index 0000000000..6548ba18e1
--- /dev/null
+++ b/packages/vue-algolia-playground/build/check-versions.js
@@ -0,0 +1,45 @@
+var chalk = require('chalk')
+var semver = require('semver')
+var packageConfig = require('../package.json')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+var versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  },
+  {
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  }
+]
+
+module.exports = function () {
+  var warnings = []
+  for (var i = 0; i < versionRequirements.length; i++) {
+    var mod = versionRequirements[i]
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+    for (var i = 0; i < warnings.length; i++) {
+      var warning = warnings[i]
+      console.log('  ' + warning)
+    }
+    console.log()
+    process.exit(1)
+  }
+}
diff --git a/packages/vue-algolia-playground/build/dev-client.js b/packages/vue-algolia-playground/build/dev-client.js
new file mode 100644
index 0000000000..18aa1e2195
--- /dev/null
+++ b/packages/vue-algolia-playground/build/dev-client.js
@@ -0,0 +1,9 @@
+/* eslint-disable */
+require('eventsource-polyfill')
+var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+
+hotClient.subscribe(function (event) {
+  if (event.action === 'reload') {
+    window.location.reload()
+  }
+})
diff --git a/packages/vue-algolia-playground/build/dev-server.js b/packages/vue-algolia-playground/build/dev-server.js
new file mode 100644
index 0000000000..cc96300bd6
--- /dev/null
+++ b/packages/vue-algolia-playground/build/dev-server.js
@@ -0,0 +1,81 @@
+require('./check-versions')()
+
+var config = require('../config')
+if (!process.env.NODE_ENV) {
+  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
+}
+
+var opn = require('opn')
+var path = require('path')
+var express = require('express')
+var webpack = require('webpack')
+var proxyMiddleware = require('http-proxy-middleware')
+var webpackConfig = require('./webpack.dev.conf')
+
+// default port where dev server listens for incoming traffic
+var port = process.env.PORT || config.dev.port
+// automatically open browser, if not set will be false
+var autoOpenBrowser = !!config.dev.autoOpenBrowser
+// Define HTTP proxies to your custom API backend
+// https://github.com/chimurai/http-proxy-middleware
+var proxyTable = config.dev.proxyTable
+
+var app = express()
+var compiler = webpack(webpackConfig)
+
+var devMiddleware = require('webpack-dev-middleware')(compiler, {
+  publicPath: webpackConfig.output.publicPath,
+  quiet: true
+})
+
+var hotMiddleware = require('webpack-hot-middleware')(compiler, {
+  log: () => {}
+})
+// force page reload when html-webpack-plugin template changes
+compiler.plugin('compilation', function (compilation) {
+  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+    hotMiddleware.publish({ action: 'reload' })
+    cb()
+  })
+})
+
+// proxy api requests
+Object.keys(proxyTable).forEach(function (context) {
+  var options = proxyTable[context]
+  if (typeof options === 'string') {
+    options = { target: options }
+  }
+  app.use(proxyMiddleware(options.filter || context, options))
+})
+
+// handle fallback for HTML5 history API
+app.use(require('connect-history-api-fallback')())
+
+// serve webpack bundle output
+app.use(devMiddleware)
+
+// enable hot-reload and state-preserving
+// compilation error display
+app.use(hotMiddleware)
+
+// serve pure static assets
+var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
+app.use(staticPath, express.static('./static'))
+
+var uri = 'http://localhost:' + port
+
+devMiddleware.waitUntilValid(function () {
+  console.log('> Listening at ' + uri + '\n')
+})
+
+module.exports = app.listen(port, function (err) {
+  if (err) {
+    console.log(err)
+    return
+  }
+
+  // when env is testing, don't need open it
+  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
+    opn(uri)
+  }
+})
diff --git a/packages/vue-algolia-playground/build/utils.js b/packages/vue-algolia-playground/build/utils.js
new file mode 100644
index 0000000000..3f2ef2a54b
--- /dev/null
+++ b/packages/vue-algolia-playground/build/utils.js
@@ -0,0 +1,71 @@
+var path = require('path')
+var config = require('../config')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+exports.assetsPath = function (_path) {
+  var assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  var cssLoader = {
+    loader: 'css-loader',
+    options: {
+      minimize: process.env.NODE_ENV === 'production',
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    var loaders = [cssLoader]
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  var output = []
+  var loaders = exports.cssLoaders(options)
+  for (var extension in loaders) {
+    var loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+  return output
+}
diff --git a/packages/vue-algolia-playground/build/vue-loader.conf.js b/packages/vue-algolia-playground/build/vue-loader.conf.js
new file mode 100644
index 0000000000..7aee79bae4
--- /dev/null
+++ b/packages/vue-algolia-playground/build/vue-loader.conf.js
@@ -0,0 +1,12 @@
+var utils = require('./utils')
+var config = require('../config')
+var isProduction = process.env.NODE_ENV === 'production'
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: isProduction
+      ? config.build.productionSourceMap
+      : config.dev.cssSourceMap,
+    extract: isProduction
+  })
+}
diff --git a/packages/vue-algolia-playground/build/webpack.base.conf.js b/packages/vue-algolia-playground/build/webpack.base.conf.js
new file mode 100644
index 0000000000..c3930d9005
--- /dev/null
+++ b/packages/vue-algolia-playground/build/webpack.base.conf.js
@@ -0,0 +1,58 @@
+var path = require('path')
+var utils = require('./utils')
+var config = require('../config')
+var vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+module.exports = {
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  }
+}
diff --git a/packages/vue-algolia-playground/build/webpack.dev.conf.js b/packages/vue-algolia-playground/build/webpack.dev.conf.js
new file mode 100644
index 0000000000..5470402d03
--- /dev/null
+++ b/packages/vue-algolia-playground/build/webpack.dev.conf.js
@@ -0,0 +1,35 @@
+var utils = require('./utils')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+
+// add hot-reload related code to entry chunks
+Object.keys(baseWebpackConfig.entry).forEach(function (name) {
+  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
+})
+
+module.exports = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: '#cheap-module-eval-source-map',
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': config.dev.env
+    }),
+    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    new FriendlyErrorsPlugin()
+  ]
+})
diff --git a/packages/vue-algolia-playground/build/webpack.prod.conf.js b/packages/vue-algolia-playground/build/webpack.prod.conf.js
new file mode 100644
index 0000000000..07796da469
--- /dev/null
+++ b/packages/vue-algolia-playground/build/webpack.prod.conf.js
@@ -0,0 +1,116 @@
+var path = require('path')
+var utils = require('./utils')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var CopyWebpackPlugin = require('copy-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+
+var env = config.build.env
+
+var webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      },
+      sourceMap: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css')
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin(),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: config.build.index,
+      template: 'index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: function (module, count) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      chunks: ['vendor']
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  var CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig
diff --git a/packages/vue-algolia-playground/config/dev.env.js b/packages/vue-algolia-playground/config/dev.env.js
new file mode 100644
index 0000000000..efead7c840
--- /dev/null
+++ b/packages/vue-algolia-playground/config/dev.env.js
@@ -0,0 +1,6 @@
+var merge = require('webpack-merge')
+var prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})
diff --git a/packages/vue-algolia-playground/config/index.js b/packages/vue-algolia-playground/config/index.js
new file mode 100644
index 0000000000..196da1fa7d
--- /dev/null
+++ b/packages/vue-algolia-playground/config/index.js
@@ -0,0 +1,38 @@
+// see http://vuejs-templates.github.io/webpack for documentation.
+var path = require('path')
+
+module.exports = {
+  build: {
+    env: require('./prod.env'),
+    index: path.resolve(__dirname, '../dist/index.html'),
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    productionSourceMap: true,
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  },
+  dev: {
+    env: require('./dev.env'),
+    port: 8080,
+    autoOpenBrowser: true,
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+    // CSS Sourcemaps off by default because relative paths are "buggy"
+    // with this option, according to the CSS-Loader README
+    // (https://github.com/webpack/css-loader#sourcemaps)
+    // In our experience, they generally work as expected,
+    // just be aware of this issue when enabling this option.
+    cssSourceMap: false
+  }
+}
diff --git a/packages/vue-algolia-playground/config/prod.env.js b/packages/vue-algolia-playground/config/prod.env.js
new file mode 100644
index 0000000000..773d263d31
--- /dev/null
+++ b/packages/vue-algolia-playground/config/prod.env.js
@@ -0,0 +1,3 @@
+module.exports = {
+  NODE_ENV: '"production"'
+}
diff --git a/packages/vue-algolia-playground/index.html b/packages/vue-algolia-playground/index.html
new file mode 100644
index 0000000000..f190b36cf3
--- /dev/null
+++ b/packages/vue-algolia-playground/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>vue-algolia-playground</title>
+
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"  crossorigin="anonymous">
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/packages/vue-algolia-playground/package.json b/packages/vue-algolia-playground/package.json
new file mode 100644
index 0000000000..fa135fb45e
--- /dev/null
+++ b/packages/vue-algolia-playground/package.json
@@ -0,0 +1,61 @@
+{
+  "name": "vue-algolia-playground",
+  "version": "1.0.0",
+  "description": "Algolia + Vue.js playground",
+  "author": "Raymond Rutjes <raymond.rutjes@gmail.com>",
+  "private": true,
+  "scripts": {
+    "dev": "node build/dev-server.js",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "vue": "^2.2.2",
+    "vue-algolia-components": "*"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.7.2",
+    "babel-core": "^6.22.1",
+    "babel-loader": "^6.2.10",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-preset-env": "^1.2.1",
+    "babel-preset-stage-2": "^6.22.0",
+    "babel-register": "^6.22.0",
+    "chalk": "^1.1.3",
+    "connect-history-api-fallback": "^1.3.0",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.26.1",
+    "eventsource-polyfill": "^0.9.6",
+    "express": "^4.14.1",
+    "extract-text-webpack-plugin": "^2.0.0",
+    "file-loader": "^0.10.0",
+    "friendly-errors-webpack-plugin": "^1.1.3",
+    "function-bind": "^1.1.0",
+    "html-webpack-plugin": "^2.28.0",
+    "http-proxy-middleware": "^0.17.3",
+    "webpack-bundle-analyzer": "^2.2.1",
+    "semver": "^5.3.0",
+    "opn": "^4.0.2",
+    "optimize-css-assets-webpack-plugin": "^1.3.0",
+    "ora": "^1.1.0",
+    "rimraf": "^2.6.0",
+    "url-loader": "^0.5.7",
+    "vue-loader": "^11.1.4",
+    "vue-style-loader": "^2.0.0",
+    "vue-template-compiler": "^2.2.1",
+    "webpack": "^2.2.1",
+    "webpack-dev-middleware": "^1.10.0",
+    "webpack-hot-middleware": "^2.16.1",
+    "webpack-merge": "^2.6.1",
+    "node-sass": "^4.5.0",
+    "sass-loader": "^6.0.0"
+  },
+  "engines": {
+    "node": ">= 4.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
diff --git a/packages/vue-algolia-playground/src/App.vue b/packages/vue-algolia-playground/src/App.vue
new file mode 100644
index 0000000000..b176459fd7
--- /dev/null
+++ b/packages/vue-algolia-playground/src/App.vue
@@ -0,0 +1,401 @@
+<template>
+  <div id="app" class="container-fluid">
+
+    <search-store appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76">
+      <div class="row">
+        <div class="col-md-2 col-sm-3">
+          <h1 class="head-title">
+            Demo Store
+          </h1>
+        </div>
+        <div class="col-md-10 col-sm-9">
+          <search-input placeholder="Search product by name or reference..."></search-input>
+
+          <clear-search>
+            <i class="fa fa-times-circle" aria-hidden="true"></i>
+          </clear-search>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-md-2 col-sm-3">
+          <navigation-tree-facet :attributes="['category', 'sub_category']">
+            <div slot="header">
+              <h3>Browse by</h3>
+            </div>
+          </navigation-tree-facet>
+
+          <price-range-facet attribute="price">
+            <div slot="header">
+              <h3>Price</h3>
+            </div>
+          </price-range-facet>
+
+          <search-facet attribute="materials">
+            <div slot="header">
+              <h3>Material</h3>
+            </div>
+          </search-facet>
+
+          <search-facet attribute="colors">
+            <div slot="header">
+              <h3>Color</h3>
+            </div>
+          </search-facet>
+
+          <stars-facet attribute="rating">
+            <div slot="header">
+              <h3>Rating</h3>
+            </div>
+          </stars-facet>
+        </div>
+        <div class="col-md-10 col-sm-9">
+          <div class="search-controls">
+
+            <sort-by-selector :indices="[
+                {name: 'ikea', label: 'Relevance'},
+                {name: 'ikea_price_asc', label: 'Lowest price'},
+                {name: 'ikea_price_desc', label: 'Highest price'}
+                ]"
+            />
+
+            <results-per-page-selector :options="[12, 24, 48]"/>
+
+            <search-stats/>
+          </div>
+
+          <search-results>
+            <template scope="{ hit }">
+              <div class="search-result">
+                <img class="hit__image img-responsive" :src="hit.image">
+
+                <div class="hit__info">
+                  <h2 class="hit__name" v-html="hit._highlightResult.name.value"></h2>
+                  <div class="hit__type" v-html="hit._highlightResult.type.value"></div>
+                  <div class="hit__stars">
+                    <template v-for="n in 5">
+                      <span v-if="n <= hit.rating" class="hit__star"></span>
+                      <span v-else class="hit__star--empty"></span>
+                    </template>
+                  </div>
+                  <div class="hit__price">${{hit.price}}</div>
+                </div>
+                <div class="clearfix"></div>
+              </div>
+            </template>
+          </search-results>
+
+          <empty-results/>
+
+          <div class="clearfix"></div>
+
+          <div class="pagination-container">
+            <ranged-pagination class="pagination"></ranged-pagination>
+          </div>
+        </div>
+      </div>
+    </search-store>
+
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: 'app',
+  }
+</script>
+
+
+<style lang="scss" rel="stylesheet/scss">
+  #app {
+    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    /* text-align: center; */
+    color: #2c3e50;
+    width: 1400px;
+    margin: auto;
+  }
+
+  .alg-search-input {
+    width: 100%;
+    outline: none;
+    font-size: 15px;
+    padding: 7px;
+    box-sizing: border-box;
+    border: 2px solid lightgrey;
+    border-radius: 2px;
+    margin: 20px 0;
+    margin-right: 5%;
+  }
+
+  .search-controls {
+    padding-bottom: 20px;
+  }
+
+  .search-result {
+    padding: 10px 20px 20px;
+    width: 24%;
+    margin-bottom: 10px;
+    border: solid 1px #EEE;
+    box-shadow: 0 0 3px #f6f6f6;
+    margin-right: 1%;
+    position: relative;
+    border-radius: 3px;
+    min-width: 220px;
+    background: #FFF;
+
+    display: inline;
+    float: left;
+    transition: all .5s;
+  }
+
+  .hit__info {
+    position: absolute;
+    width: 100%;
+    padding: 0px 20px 20px;
+    bottom: 0;
+    left: 0;
+  }
+
+  .hit__image {
+    margin-bottom: 100px;
+  }
+
+  .hit__name {
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  .hit__name em, .hit__type em {
+    font-style: normal;
+    background: rgba(143, 187, 237, .1);
+    box-shadow: inset 0 -1px 0 0 rgba(69, 142, 225, .8);
+  }
+
+  .hit__type em {
+    background: rgba(143, 187, 237, .1);
+    border-radius: 0;
+    box-shadow: inset 0 -1px 0 0 rgba(69, 142, 225, .8);
+  }
+
+  .hit__price {
+    font-size: 25px;
+    font-weight: bold;
+    position: absolute;
+    right: 20px;
+    bottom: 16px;
+  }
+
+  .hit__type {
+    color: #a2a2a2;
+    font-size: 12px;
+  }
+
+  .hit__stars {
+    margin-top: 10px;
+  }
+
+  .hit__star {
+    width: 1em;
+    height: 1em;
+  }
+
+  .hit__star:before {
+    content: '\2605';
+    color: #FBAE00;
+  }
+
+  .hit__star--empty:before {
+    content: '\2606';
+    color: #FBAE00;
+  }
+
+  /* Sort by selector */
+  .alg-sort-by-selector {
+    float: right;
+  }
+
+  .alg-hpp-selector {
+    float: right;
+    margin-right: 10px;
+  }
+
+  /* Navigation tree */
+  .alg-navigation-tree-facet {
+
+    label {
+      font-weight: normal;
+      cursor: pointer;
+
+      &:hover {
+
+        .alg-navigation-tree-facet__value {
+          text-decoration: underline;
+        }
+
+      }
+    }
+    ul {
+      list-style: none;
+      padding-left: 0;
+
+      ul {
+        padding-left: 20px;
+      }
+
+    }
+    .alg-navigation-tree-facet__item--active > label {
+      font-weight: bold;
+    }
+
+  }
+
+  /* Search Facet */
+  .alg-search-facet {
+
+    label {
+      font-weight: normal;
+      cursor: pointer;
+
+      &:hover {
+
+        .alg-search-facet__value {
+          text-decoration: underline;
+        }
+
+      }
+    }
+    ul {
+      list-style: none;
+      padding-left: 0;
+    }
+
+    .alg-search-facet__item--active label {
+      font-weight: bold;
+    }
+
+  }
+
+  /* Stars Facet */
+  .alg-stars-facet {
+
+    input {
+      display: none;
+    }
+
+    label {
+      font-weight: normal;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+    }
+    ul {
+      list-style: none;
+      padding-left: 0;
+    }
+
+    .alg-stars-facet__item--active label {
+      font-weight: bold;
+
+      &:hover {
+        text-decoration: none;
+        cursor: default;
+      }
+
+    }
+
+    .alg-stars-facet__clear {
+      border: none;
+      background: none;
+      padding-left: 0;
+
+      &:hover {
+        cursor: pointer;
+        text-decoration: underline;
+      }
+
+      &:before {
+        content: '< ';
+      }
+
+    }
+
+  }
+
+  /* Clear Search */
+  .alg-clear-search {
+    background: none;
+    border: none;
+    position: absolute;
+    top: 25px;
+    right: 25px;
+    cursor: pointer;
+
+    .fa-times-circle {
+      color: lightgrey;
+      font-size: 25px;
+      vertical-align: middle;
+    }
+
+    &.alg-clear-search--disabled {
+      display: none;
+    }
+
+  }
+
+  /* Price Range */
+  .alg-price-range {
+
+    .alg-price-range__input {
+      width: 50px;
+    }
+
+  }
+
+  /* Ranged Pagination */
+  .alg-ranged-pagination {
+    list-style: none;
+    padding-left: 0;
+
+    li {
+      display: inline-block;
+
+      label {
+        padding: 10px;
+      }
+
+    }
+
+    input {
+      display: none;
+    }
+
+    label {
+      font-weight: normal;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+    }
+    .alg-ranged-pagination__item--active label {
+      font-weight: bold;
+    }
+
+    .alg-ranged-pagination__item--disabled, .alg-ranged-pagination__item--active {
+
+      label:hover {
+        text-decoration: none;
+        cursor: default;
+      }
+
+    }
+  }
+
+</style>
diff --git a/packages/vue-algolia-playground/src/assets/logo.png b/packages/vue-algolia-playground/src/assets/logo.png
new file mode 100644
index 0000000000..f3d2503fc2
Binary files /dev/null and b/packages/vue-algolia-playground/src/assets/logo.png differ
diff --git a/packages/vue-algolia-playground/src/components/Hello.vue b/packages/vue-algolia-playground/src/components/Hello.vue
new file mode 100644
index 0000000000..2d8053956d
--- /dev/null
+++ b/packages/vue-algolia-playground/src/components/Hello.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <h2>Essential Links</h2>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
+      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
+      <br>
+      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
+    </ul>
+    <h2>Ecosystem</h2>
+    <ul>
+      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
+      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
+      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'hello',
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+
+a {
+  color: #42b983;
+}
+</style>
diff --git a/packages/vue-algolia-playground/src/main.js b/packages/vue-algolia-playground/src/main.js
new file mode 100644
index 0000000000..c9638375cf
--- /dev/null
+++ b/packages/vue-algolia-playground/src/main.js
@@ -0,0 +1,14 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import AlgoliaComponents from 'vue-algolia-components'
+
+Vue.config.productionTip = false
+Vue.use(AlgoliaComponents)
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  template: '<App/>',
+  components: { App }
+})
diff --git a/packages/vue-algolia-playground/static/.gitkeep b/packages/vue-algolia-playground/static/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/vue-algolia-price-range-facet/package.json b/packages/vue-algolia-price-range-facet/package.json
new file mode 100644
index 0000000000..9eff8300e3
--- /dev/null
+++ b/packages/vue-algolia-price-range-facet/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "vue-algolia-price-range-facet",
+  "version": "0.0.0",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/vue-algolia-price-range-facet.common.js",
+  "module": "dist/vue-algolia-price-range-facet.esm.js",
+  "jsnext:main": "dist/vue-algolia-price-range-facet.esm.js",
+  "unpkg": "dist/vue-algolia-price-range-facet.js",
+  "scripts": {
+    "build": "yarn build-umd && yarn build-es && yarn build-cjs",
+    "build-umd": "rollup -c ../../build/rollup.umd.config.js",
+    "build-es": "rollup -c ../../build/rollup.es.config.js",
+    "build-cjs": "rollup -c ../../build/rollup.cjs.config.js"
+  },
+  "dependencies": {
+    "vue-algolia-component": "*"
+  },
+  "peerDependencies": {
+    "vue": "^2.2.2"
+  }
+}
+
+
diff --git a/packages/vue-algolia-price-range-facet/src/PriceRangeFacet.vue b/packages/vue-algolia-price-range-facet/src/PriceRangeFacet.vue
new file mode 100644
index 0000000000..fedcdb3560
--- /dev/null
+++ b/packages/vue-algolia-price-range-facet/src/PriceRangeFacet.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="alg-price-range" v-show="shouldDisplay">
+
+    <slot name="header"></slot>
+
+    <span class="alg-price-range__currency alg-price-range__currency--left" v-if="currencyPlacement === 'left'">{{currency}}</span>
+    <input class="alg-price-range__input alg-price-range__input--from" type="number" v-model="from" @change="updateFrom"
+           placeholder="min" size="5" :name="fromName">
+    <span class="alg-price-range__currency alg-price-range__currency--right" v-if="currencyPlacement === 'right'">{{currency}}</span>
+
+    <slot><span>to&nbsp;</span></slot>
+
+    <span class="alg-price-range__currency alg-price-range__currency--left" v-if="currencyPlacement === 'left'">{{currency}}</span>
+    <input class="alg-price-range__input alg-price-range__input--to" type="number" v-model="to" @change="updateTo"
+           placeholder="max" size="5" :name="toName">
+    <span class="alg-price-range__currency alg-price-range__currency--right" v-if="currencyPlacement === 'right'">{{currency}}</span>
+
+    <slot name="footer"></slot>
+
+  </div>
+</template>
+
+<script>
+  import algoliaComponent from 'vue-algolia-component'
+
+  export default {
+    mixins: [algoliaComponent],
+    props: {
+      fromName: {
+        type: String,
+        default: "price_from"
+      },
+      toName: {
+        type: String,
+        default: "price_to"
+      },
+      attribute: {
+        type: String,
+        required: true
+      },
+      currency: {
+        type: String,
+        required: false,
+        default: '$'
+      },
+      currencyPlacement: {
+        type: String,
+        required: false,
+        default: 'left',
+        validator: function (value) {
+          return value === 'left' || value === 'right'
+        }
+      }
+    },
+    computed: {
+      shouldDisplay () {
+        return this.from || this.to || this.searchStore.nbHits > 0
+      },
+      from () {
+        for (let refinement in this.searchStore.activeRefinements) {
+          if (this.searchStore.activeRefinements[refinement].attributeName === this.attribute
+            && this.searchStore.activeRefinements[refinement].type === 'numeric'
+            && this.searchStore.activeRefinements[refinement].operator === '>') {
+
+            return this.searchStore.activeRefinements[refinement].numericValue
+          }
+        }
+        return
+      },
+      to () {
+        for (let refinement in this.searchStore.activeRefinements) {
+          if (this.searchStore.activeRefinements[refinement].attributeName === this.attribute
+            && this.searchStore.activeRefinements[refinement].type === 'numeric'
+            && this.searchStore.activeRefinements[refinement].operator === '<') {
+            return this.searchStore.activeRefinements[refinement].numericValue
+          }
+        }
+        return
+      }
+    },
+    methods: {
+      updateFrom: function (event) {
+        const value = Number(event.target.value)
+
+        this.searchStore.stop()
+        this.searchStore.removeNumericRefinement(this.attribute, '>')
+        if (value > 0) {
+          this.searchStore.addNumericRefinement(this.attribute, '>', value)
+        }
+
+        // Remove the max value if lower than the min value.
+        if (value > Number(this.to)) {
+          this.searchStore.removeNumericRefinement(this.attribute, '<')
+        }
+
+        this.searchStore.start()
+      },
+      updateTo: function (event) {
+        const value = Number(event.target.value)
+
+        // Only update when `to` has reached the `from` value.
+        if (value < Number(this.from)) {
+          return
+        }
+
+        this.searchStore.stop()
+        this.searchStore.removeNumericRefinement(this.attribute, '<')
+        if (value > 0) {
+          this.searchStore.addNumericRefinement(this.attribute, '<', value)
+        }
+        this.searchStore.start()
+      }
+    }
+  }
+</script>
+
+<style>
+  .alg-price-range__input {
+    width: 50px
+  }
+</style>
diff --git a/packages/vue-algolia-price-range-facet/src/index.js b/packages/vue-algolia-price-range-facet/src/index.js
new file mode 100644
index 0000000000..530aff90a2
--- /dev/null
+++ b/packages/vue-algolia-price-range-facet/src/index.js
@@ -0,0 +1 @@
+export {default} from './PriceRangeFacet.vue'
diff --git a/packages/vue-algolia-ranged-pagination/package.json b/packages/vue-algolia-ranged-pagination/package.json
new file mode 100644
index 0000000000..50c6ca660e
--- /dev/null
+++ b/packages/vue-algolia-ranged-pagination/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "vue-algolia-ranged-pagination",
+  "version": "0.0.0",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/vue-algolia-ranged-pagination.common.js",
+  "module": "dist/vue-algolia-ranged-pagination.esm.js",
+  "jsnext:main": "dist/vue-algolia-ranged-pagination.esm.js",
+  "unpkg": "dist/vue-algolia-ranged-pagination.js",
+  "scripts": {
+    "build": "yarn build-umd && yarn build-es && yarn build-cjs",
+    "build-umd": "rollup -c ../../build/rollup.umd.config.js",
+    "build-es": "rollup -c ../../build/rollup.es.config.js",
+    "build-cjs": "rollup -c ../../build/rollup.cjs.config.js"
+  },
+  "dependencies": {
+    "vue-algolia-component": "*"
+  },
+  "peerDependencies": {
+    "vue": "^2.2.2"
+  }
+}
+
+
diff --git a/packages/vue-algolia-ranged-pagination/src/RangedPagination.vue b/packages/vue-algolia-ranged-pagination/src/RangedPagination.vue
new file mode 100644
index 0000000000..dea4975d9d
--- /dev/null
+++ b/packages/vue-algolia-ranged-pagination/src/RangedPagination.vue
@@ -0,0 +1,131 @@
+<template>
+  <ul class="alg-ranged-pagination">
+    <li
+        v-for="item in items"
+        class="alg-ranged-pagination__item"
+        :class="{
+              'alg-ranged-pagination__item--disabled': item.disabled,
+              'alg-ranged-pagination__item--active': !item.disabled && item.value === page
+            }"
+    >
+      <label>
+        <input type="radio"
+               :name="name"
+               :value="item.value"
+               :disabled="item.disabled"
+               v-model="page"
+               @change="goToPage(item.value)"
+        >
+        {{ item.label }}
+      </label>
+    </li>
+  </ul>
+</template>
+
+<script>
+  import algoliaComponent from 'vue-algolia-component'
+
+  export default {
+    mixins: [algoliaComponent],
+    props: {
+      name: {
+        type: String,
+        default: 'page'
+      },
+      padding: {
+        type: Number,
+        default: 3,
+        validator (value) {
+          return value > 0
+        }
+      }
+    },
+    computed: {
+      page () {
+        return this.searchStore.page
+      },
+      nbPages () {
+        return this.searchStore.nbPages
+      },
+      items () {
+        const items = []
+        const pages = this.pages
+
+        // First page.
+        items.push({
+          disabled: this.page === 0,
+          value: 0,
+          label: '<<',
+        })
+
+        // Previous page.
+        items.push({
+          disabled: this.page === 0,
+          value: Math.max(0, this.page - 1),
+          label: '<',
+        })
+
+        // All pages in range.
+        for (let key in pages) {
+          const page = pages[key]
+          items.push({
+            disabled: false,
+            value: page,
+            label: page + 1,
+          })
+        }
+
+        // Next page.
+        items.push({
+          disabled: this.page >= this.nbPages - 1,
+          value: this.page + 1,
+          label: '>',
+        })
+
+        // Last page.
+        items.push({
+          disabled: this.page >= this.nbPages - 1,
+          value: this.nbPages,
+          label: '>>',
+        })
+
+        return items
+      },
+      pages () {
+        let maxPages = this.padding * 2
+        if (this.nbPages - 1 < maxPages) {
+          maxPages = this.nbPages - 1
+        }
+
+        let pages = [this.page]
+        let even = false
+        let lastPage = this.page
+        let firstPage = this.page
+        while (pages.length <= maxPages) {
+          even = !even
+          if (even) {
+            if (firstPage <= 0) {
+              continue
+            }
+            firstPage--
+            pages.unshift(firstPage)
+          } else {
+            if (lastPage >= this.nbPages - 1) {
+              continue
+            }
+            lastPage++
+            pages.push(lastPage)
+          }
+        }
+
+        return pages
+      }
+    },
+    methods: {
+      goToPage (page) {
+        page = Math.min(this.nbPages - 1, page)
+        this.searchStore.page = page
+      }
+    }
+  }
+</script>
diff --git a/packages/vue-algolia-ranged-pagination/src/index.js b/packages/vue-algolia-ranged-pagination/src/index.js
new file mode 100644
index 0000000000..fae908cc01
--- /dev/null
+++ b/packages/vue-algolia-ranged-pagination/src/index.js
@@ -0,0 +1 @@
+export {default} from './RangedPagination.vue'
diff --git a/packages/vue-algolia-results-per-page-selector/package.json b/packages/vue-algolia-results-per-page-selector/package.json
new file mode 100644
index 0000000000..befd7fa1b9
--- /dev/null
+++ b/packages/vue-algolia-results-per-page-selector/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "vue-algolia-results-per-page-selector",
+  "version": "0.0.0",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/vue-algolia-results-per-page-selector.common.js",
+  "module": "dist/vue-algolia-results-per-page-selector.esm.js",
+  "jsnext:main": "dist/vue-algolia-results-per-page-selector.esm.js",
+  "unpkg": "dist/vue-algolia-results-per-page-selector.js",
+  "scripts": {
+    "build": "yarn build-umd && yarn build-es && yarn build-cjs",
+    "build-umd": "rollup -c ../../build/rollup.umd.config.js",
+    "build-es": "rollup -c ../../build/rollup.es.config.js",
+    "build-cjs": "rollup -c ../../build/rollup.cjs.config.js"
+  },
+  "dependencies": {
+    "vue-algolia-component": "*"
+  },
+  "peerDependencies": {
+    "vue": "^2.2.2"
+  }
+}
diff --git a/packages/vue-algolia-results-per-page-selector/src/ResultsPerPageSelector.vue b/packages/vue-algolia-results-per-page-selector/src/ResultsPerPageSelector.vue
new file mode 100644
index 0000000000..2fab34ffb0
--- /dev/null
+++ b/packages/vue-algolia-results-per-page-selector/src/ResultsPerPageSelector.vue
@@ -0,0 +1,46 @@
+<template>
+  <select class="alg-hpp-selector"
+          @change="onChange"
+          v-model="hitsPerPage"
+          :name="name"
+  >
+    <slot v-for="option in options" :option="option">
+      <option>{{ option }}</option>
+    </slot>
+  </select>
+</template>
+
+<script>
+  import algoliaComponent from 'vue-algolia-component'
+
+  export default {
+    mixins: [algoliaComponent],
+    props: {
+      name: {
+        type: String,
+        default: 'hits_per_page'
+      },
+      options: {
+        type: Array,
+        default: function () {
+          return [6, 12, 24]
+        }
+      },
+    },
+    computed: {
+      hitsPerPage: function () {
+        return this.searchStore.hitsPerPage
+      }
+    },
+    mounted: function () {
+      if (this.options.indexOf(this.searchStore.hitsPerPage) === -1) {
+        this.searchStore.hitsPerPage = this.options[0]
+      }
+    },
+    methods: {
+      onChange: function (event) {
+        this.searchStore.hitsPerPage = Number(event.target.value)
+      }
+    }
+  }
+</script>
diff --git a/packages/vue-algolia-results-per-page-selector/src/index.js b/packages/vue-algolia-results-per-page-selector/src/index.js
new file mode 100644
index 0000000000..5ea7b9d201
--- /dev/null
+++ b/packages/vue-algolia-results-per-page-selector/src/index.js
@@ -0,0 +1 @@
+export {default} from './ResultsPerPageSelector.vue'
diff --git a/packages/vue-algolia-search-facet/package.json b/packages/vue-algolia-search-facet/package.json
new file mode 100644
index 0000000000..128a678b0c
--- /dev/null
+++ b/packages/vue-algolia-search-facet/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "vue-algolia-search-facet",
+  "version": "0.0.0",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/vue-algolia-search-facet.common.js",
+  "module": "dist/vue-algolia-search-facet.esm.js",
+  "jsnext:main": "dist/vue-algolia-search-facet.esm.js",
+  "unpkg": "dist/vue-algolia-search-facet.js",
+  "scripts": {
+    "build": "yarn build-umd && yarn build-es && yarn build-cjs",
+    "build-umd": "rollup -c ../../build/rollup.umd.config.js",
+    "build-es": "rollup -c ../../build/rollup.es.config.js",
+    "build-cjs": "rollup -c ../../build/rollup.cjs.config.js"
+  },
+  "dependencies": {
+    "vue-algolia-component": "*"
+  },
+  "peerDependencies": {
+    "vue": "^2.2.2"
+  }
+}
+
+
+
diff --git a/packages/vue-algolia-search-facet/src/SearchFacet.vue b/packages/vue-algolia-search-facet/src/SearchFacet.vue
new file mode 100644
index 0000000000..353c04b75d
--- /dev/null
+++ b/packages/vue-algolia-search-facet/src/SearchFacet.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="alg-search-facet" v-if="facetValues.length > 0">
+    <slot name="header"></slot>
+
+    <ul>
+      <li v-for="facet in facetValues"
+          class="alg-search-facet__item"
+          :class="{'alg-search-facet__item--active': facet.isRefined}"
+      >
+        <label>
+          <input type="checkbox"
+                 :name="name"
+                 v-model="facet.isRefined"
+                 @change="toggleRefinement(facet)"
+                 :value="facet.name"
+          >
+          <span class="alg-search-facet__value">{{facet.name}}</span>
+          <span class="alg-search-facet__count">({{facet.count}})</span>
+        </label>
+      </li>
+    </ul>
+
+    <slot name="footer"></slot>
+  </div>
+</template>
+
+<script>
+  import algoliaComponent from 'vue-algolia-component'
+
+  export default {
+    mixins: [algoliaComponent],
+    props: {
+      attribute: {
+        type: String,
+        required: true
+      },
+      name: {
+        type: String,
+        default () {
+          return this.attribute
+        }
+      },
+      useAnd: {
+        type: Boolean,
+        default: false
+      },
+      limit: {
+        type: Number,
+        default: 10
+      },
+      sortBy: {
+        default: function () {
+          return ['isRefined:desc', 'count:desc', 'name:asc']
+        }
+      },
+      multi: {
+        type: Boolean,
+        default: true
+      }
+    },
+    mounted: function () {
+      const facetType = this.useAnd ? 'conjunctive' : 'disjunctive'
+      this.searchStore.addFacet(this.attribute, facetType)
+    },
+    destroyed: function () {
+      this.searchStore.removeFacet(this.attribute)
+    },
+    computed: {
+      facetValues: function () {
+        return this.searchStore.getFacetValues(this.attribute, this.sortBy, this.limit)
+      }
+    },
+    methods: {
+      toggleRefinement: function (value) {
+        if (value.isRefined || this.multi) {
+          return this.searchStore.toggleFacetRefinement(this.attribute, value.name)
+        }
+
+        this.searchStore.stop()
+        this.searchStore.clearRefinements(this.attribute)
+        this.searchStore.toggleFacetRefinement(this.attribute, value.name)
+        this.searchStore.start()
+      }
+    },
+    watch: {
+      operator: function (value) {
+        const facetType = this.useAnd ? 'conjunctive' : 'disjunctive'
+        this.searchStore.addFacet(this.attribute, facetType)
+      }
+    }
+  }
+</script>
+
diff --git a/packages/vue-algolia-search-facet/src/index.js b/packages/vue-algolia-search-facet/src/index.js
new file mode 100644
index 0000000000..b258f33b7f
--- /dev/null
+++ b/packages/vue-algolia-search-facet/src/index.js
@@ -0,0 +1 @@
+export {default} from './SearchFacet.vue'
diff --git a/packages/vue-algolia-search-input/package.json b/packages/vue-algolia-search-input/package.json
new file mode 100644
index 0000000000..9893918537
--- /dev/null
+++ b/packages/vue-algolia-search-input/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "vue-algolia-search-input",
+  "version": "0.0.0",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/vue-algolia-search-input.common.js",
+  "module": "dist/vue-algolia-search-input.esm.js",
+  "jsnext:main": "dist/vue-algolia-search-input.esm.js",
+  "unpkg": "dist/vue-algolia-search-input.js",
+  "scripts": {
+    "build": "yarn build-umd && yarn build-es && yarn build-cjs",
+    "build-umd": "rollup -c ../../build/rollup.umd.config.js",
+    "build-es": "rollup -c ../../build/rollup.es.config.js",
+    "build-cjs": "rollup -c ../../build/rollup.cjs.config.js"
+  },
+  "dependencies": {
+    "vue-algolia-component": "*"
+  },
+  "peerDependencies": {
+    "vue": "^2.2.2"
+  }
+}
+
+
+
diff --git a/packages/vue-algolia-search-input/src/SearchInput.vue b/packages/vue-algolia-search-input/src/SearchInput.vue
new file mode 100644
index 0000000000..8b380bbf37
--- /dev/null
+++ b/packages/vue-algolia-search-input/src/SearchInput.vue
@@ -0,0 +1,48 @@
+<template>
+  <input type="search"
+         autocorrect="off"
+         autocapitalize="off"
+         autocomplete="off"
+         spellcheck="false"
+         class="alg-search-input"
+
+         @input="onInput"
+         @change="onInput"
+
+         :value="query"
+         :name="name"
+  >
+</template>
+
+<script>
+  import algoliaComponent from 'vue-algolia-component'
+
+  export default {
+    mixins: [algoliaComponent],
+    props: {
+      name: {
+        type: String,
+        default: "query"
+      }
+    },
+    computed: {
+      query () {
+        return this.searchStore.query
+      }
+    },
+    methods: {
+      onInput (e) {
+        this.searchStore.stop()
+        this.searchStore.query = e.target.value
+        this.$emit('query', e.target.value)
+
+        // We here ensure we give the time to listeners to alter the store's state
+        // without triggering in between ghost queries.
+        this.$nextTick(function () {
+          this.searchStore.start()
+        })
+
+      }
+    }
+  }
+</script>
diff --git a/packages/vue-algolia-search-input/src/index.js b/packages/vue-algolia-search-input/src/index.js
new file mode 100644
index 0000000000..4b3abab187
--- /dev/null
+++ b/packages/vue-algolia-search-input/src/index.js
@@ -0,0 +1 @@
+export {default} from './SearchInput.vue'
diff --git a/packages/vue-algolia-search-results/package.json b/packages/vue-algolia-search-results/package.json
new file mode 100644
index 0000000000..78d62099a4
--- /dev/null
+++ b/packages/vue-algolia-search-results/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "vue-algolia-search-results",
+  "version": "0.0.0",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/vue-algolia-search-results.common.js",
+  "module": "dist/vue-algolia-search-results.esm.js",
+  "jsnext:main": "dist/vue-algolia-search-results.esm.js",
+  "unpkg": "dist/vue-algolia-search-results.js",
+  "scripts": {
+    "build": "yarn build-umd && yarn build-es && yarn build-cjs",
+    "build-umd": "rollup -c ../../build/rollup.umd.config.js",
+    "build-es": "rollup -c ../../build/rollup.es.config.js",
+    "build-cjs": "rollup -c ../../build/rollup.cjs.config.js"
+  },
+  "dependencies": {
+    "vue-algolia-component": "*"
+  },
+  "peerDependencies": {
+    "vue": "^2.2.2"
+  }
+}
+
+
+
+
diff --git a/packages/vue-algolia-search-results/src/SearchResults.vue b/packages/vue-algolia-search-results/src/SearchResults.vue
new file mode 100644
index 0000000000..1aa79b5d57
--- /dev/null
+++ b/packages/vue-algolia-search-results/src/SearchResults.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="alg-search-results">
+    <slot v-for="hit in hits" :hit="hit">
+      Result 'objectID': {{ hit.objectID }}
+    </slot>
+  </div>
+</template>
+
+<script>
+  import algoliaComponent from 'vue-algolia-component'
+
+  export default {
+    mixins: [algoliaComponent],
+    props: {
+      stack: {
+        type: Boolean,
+        default: false
+      },
+      hitsPerPage: {
+        type: Number
+      }
+    },
+    mounted () {
+      this.pushHitsPerPage()
+    },
+    watch: {
+      hitsPerPage () {
+        this.pushHitsPerPage()
+      }
+    },
+    methods: {
+      pushHitsPerPage () {
+        if (typeof this.hitsPerPage === 'number' && this.hitsPerPage > 0) {
+          this.searchStore.hitsPerPage = this.hitsPerPage
+        }
+      }
+    },
+    computed: {
+      hits () {
+        if (this.stack === false) {
+          return this.searchStore.hits
+        }
+
+        if (typeof this.stackedHits === 'undefined') {
+          this.stackedHits = []
+        }
+
+        if (this.searchStore.page === 0) {
+          this.stackedHits = []
+        }
+
+        if (this.stackedHits.length === 0 || this.searchStore.hits.length === 0) {
+          this.stackedHits.push(...this.searchStore.hits)
+        } else {
+          const lastStacked = this.stackedHits[this.stackedHits.length - 1]
+          const lastHit = this.searchStore.hits[this.searchStore.hits.length - 1]
+
+          if (lastStacked['objectID'] !== lastHit['objectID']) {
+            this.stackedHits.push(...this.searchStore.hits)
+          }
+        }
+
+        return this.stackedHits
+      }
+    }
+  }
+</script>
diff --git a/packages/vue-algolia-search-results/src/index.js b/packages/vue-algolia-search-results/src/index.js
new file mode 100644
index 0000000000..33db4da5e3
--- /dev/null
+++ b/packages/vue-algolia-search-results/src/index.js
@@ -0,0 +1,3 @@
+import SearchResults from './SearchResults.vue'
+
+export default SearchResults
diff --git a/packages/vue-algolia-search-stats/package.json b/packages/vue-algolia-search-stats/package.json
new file mode 100644
index 0000000000..9fe74fa549
--- /dev/null
+++ b/packages/vue-algolia-search-stats/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "vue-algolia-search-stats",
+  "version": "0.0.0",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/vue-algolia-search-stats.common.js",
+  "module": "dist/vue-algolia-search-stats.esm.js",
+  "jsnext:main": "dist/vue-algolia-search-stats.esm.js",
+  "unpkg": "dist/vue-algolia-search-stats.js",
+  "scripts": {
+    "build": "yarn build-umd && yarn build-es && yarn build-cjs",
+    "build-umd": "rollup -c ../../build/rollup.umd.config.js",
+    "build-es": "rollup -c ../../build/rollup.es.config.js",
+    "build-cjs": "rollup -c ../../build/rollup.cjs.config.js"
+  },
+  "dependencies": {
+    "vue-algolia-component": "*"
+  },
+  "peerDependencies": {
+    "vue": "^2.2.2"
+  }
+}
+
+
+
+
diff --git a/packages/vue-algolia-search-stats/src/SearchStats.vue b/packages/vue-algolia-search-stats/src/SearchStats.vue
new file mode 100644
index 0000000000..a1a1e9bfa5
--- /dev/null
+++ b/packages/vue-algolia-search-stats/src/SearchStats.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="alg-search-stats" v-if="nbHits > 0">
+    <slot>{{nbHits}} results found in {{processingTimeMS}}ms</slot>
+  </div>
+</template>
+
+<script>
+  import algoliaComponent from 'vue-algolia-component'
+
+  export default {
+    mixins: [algoliaComponent],
+    computed: {
+      nbHits () {
+        return this.searchStore.nbHits
+      },
+      processingTimeMS () {
+        return this.searchStore.processingTimeMS
+      }
+    }
+  }
+</script>
diff --git a/packages/vue-algolia-search-stats/src/index.js b/packages/vue-algolia-search-stats/src/index.js
new file mode 100644
index 0000000000..dc067e8605
--- /dev/null
+++ b/packages/vue-algolia-search-stats/src/index.js
@@ -0,0 +1 @@
+export {default} from './SearchStats.vue'
diff --git a/packages/vue-algolia-search-store/package.json b/packages/vue-algolia-search-store/package.json
new file mode 100644
index 0000000000..7a021d3f94
--- /dev/null
+++ b/packages/vue-algolia-search-store/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "vue-algolia-search-store",
+  "version": "0.0.0",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/vue-algolia-search-store.common.js",
+  "module": "dist/vue-algolia-search-store.esm.js",
+  "jsnext:main": "dist/vue-algolia-search-store.esm.js",
+  "unpkg": "dist/vue-algolia-search-store.js",
+  "scripts": {
+    "build": "yarn build-umd && yarn build-es && yarn build-cjs",
+    "build-umd": "rollup -c ../../build/rollup.umd.config.js",
+    "build-es": "rollup -c ../../build/rollup.es.config.js",
+    "build-cjs": "rollup -c ../../build/rollup.cjs.config.js"
+  },
+  "dependencies": {
+    "algolia-search-store": "*"
+  },
+  "peerDependencies": {
+    "vue": "^2.2.2"
+  }
+}
+
+
+
+
+
diff --git a/packages/vue-algolia-search-store/src/SearchStore.vue b/packages/vue-algolia-search-store/src/SearchStore.vue
new file mode 100644
index 0000000000..abd32fe7de
--- /dev/null
+++ b/packages/vue-algolia-search-store/src/SearchStore.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="alg-search-store">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  import {createFromAlgoliaCredentials} from 'algolia-search-store'
+
+  export default {
+    inject: ['_searchStore'],
+    props: {
+      apiKey: {
+        type: String,
+        default () {
+          // Todo: add validator callback in case no search store is injected
+          if (this._searchStore) {
+            return this._searchStore.algoliaApiKey
+          }
+
+          return
+        }
+      },
+      appId: {
+        type: String,
+        default () {
+          // Todo: add validator callback in case no search store is injected
+          if (this._searchStore) {
+            return this._searchStore.algoliaAppId
+          }
+
+          return
+        }
+      },
+      index: {
+        type: String,
+        default () {
+          // Todo: add validator callback in case no search store is injected
+          if (this._searchStore) {
+            return this._searchStore.index
+          }
+
+          return
+        }
+      }
+    },
+    provide () {
+      this._localSearchStore = createFromAlgoliaCredentials(this.appId, this.apiKey)
+      if (this.index) {
+        this._localSearchStore.index = this.index
+      }
+      // Todo: add user agent
+
+      return {
+        _searchStore: this._localSearchStore
+      }
+    },
+    mounted () {
+      this._localSearchStore.start()
+    },
+    watch: {
+      index () {
+        this._localSearchStore.index = this.index
+      }
+    }
+  }
+</script>
diff --git a/packages/vue-algolia-search-store/src/index.js b/packages/vue-algolia-search-store/src/index.js
new file mode 100644
index 0000000000..8e86f8bf55
--- /dev/null
+++ b/packages/vue-algolia-search-store/src/index.js
@@ -0,0 +1 @@
+export {default} from './SearchStore.vue'
diff --git a/packages/vue-algolia-sort-by-selector/package.json b/packages/vue-algolia-sort-by-selector/package.json
new file mode 100644
index 0000000000..ae14feb4a9
--- /dev/null
+++ b/packages/vue-algolia-sort-by-selector/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "vue-algolia-sort-by-selector",
+  "version": "0.0.0",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/vue-algolia-sort-by-selector.common.js",
+  "module": "dist/vue-algolia-sort-by-selector.esm.js",
+  "jsnext:main": "dist/vue-algolia-sort-by-selector.esm.js",
+  "unpkg": "dist/vue-algolia-sort-by-selector.js",
+  "scripts": {
+    "build": "yarn build-umd && yarn build-es && yarn build-cjs",
+    "build-umd": "rollup -c ../../build/rollup.umd.config.js",
+    "build-es": "rollup -c ../../build/rollup.es.config.js",
+    "build-cjs": "rollup -c ../../build/rollup.cjs.config.js"
+  },
+  "dependencies": {
+    "vue-algolia-component": "*"
+  },
+  "peerDependencies": {
+    "vue": "^2.2.2"
+  }
+}
+
+
+
+
+
diff --git a/packages/vue-algolia-sort-by-selector/src/SortBySelector.vue b/packages/vue-algolia-sort-by-selector/src/SortBySelector.vue
new file mode 100644
index 0000000000..4e5e2347a5
--- /dev/null
+++ b/packages/vue-algolia-sort-by-selector/src/SortBySelector.vue
@@ -0,0 +1,54 @@
+<template>
+  <select class="alg-sort-by-selector"
+          @change="changeIndex"
+          v-model="indexName"
+          :name="name"
+  >
+    <slot v-for="index in indices" :index="index">
+      <option :value="index.name">
+        {{ index.label }}
+      </option>
+    </slot>
+  </select>
+</template>
+
+<script>
+  import algoliaComponent from 'vue-algolia-component'
+
+  export default {
+    mixins: [algoliaComponent],
+    props: {
+      name: {
+        type: String,
+        default: "index"
+      },
+      indices: {
+        type: Array,
+        required: true
+      }
+    },
+    computed: {
+      indexName: function () {
+        return this.searchStore.index
+      }
+    },
+    mounted: function () {
+      let match = false
+      for (let index in this.indices) {
+        if (this.indices[index].name === this.indexName) {
+          match = true
+        }
+      }
+
+      if (!match) {
+        this.searchStore.index = this.indices[0].name
+      }
+    },
+    methods: {
+      changeIndex: function (event) {
+        this.searchStore.index = event.target.value
+      }
+    }
+  }
+</script>
+
diff --git a/packages/vue-algolia-sort-by-selector/src/index.js b/packages/vue-algolia-sort-by-selector/src/index.js
new file mode 100644
index 0000000000..27a879bb74
--- /dev/null
+++ b/packages/vue-algolia-sort-by-selector/src/index.js
@@ -0,0 +1 @@
+export {default} from './SortBySelector.vue'
diff --git a/packages/vue-algolia-stars-facet/package.json b/packages/vue-algolia-stars-facet/package.json
new file mode 100644
index 0000000000..378d5cacf3
--- /dev/null
+++ b/packages/vue-algolia-stars-facet/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "vue-algolia-stars-facet",
+  "version": "0.0.0",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/vue-algolia-stars-facet.common.js",
+  "module": "dist/vue-algolia-stars-facet.esm.js",
+  "jsnext:main": "dist/vue-algolia-stars-facet.esm.js",
+  "unpkg": "dist/vue-algolia-stars-facet.js",
+  "scripts": {
+    "build": "yarn build-umd && yarn build-es && yarn build-cjs",
+    "build-umd": "rollup -c ../../build/rollup.umd.config.js",
+    "build-es": "rollup -c ../../build/rollup.es.config.js",
+    "build-cjs": "rollup -c ../../build/rollup.cjs.config.js"
+  },
+  "dependencies": {
+    "vue-algolia-component": "*"
+  },
+  "peerDependencies": {
+    "vue": "^2.2.2"
+  }
+}
+
+
+
+
diff --git a/packages/vue-algolia-stars-facet/src/StarsFacet.vue b/packages/vue-algolia-stars-facet/src/StarsFacet.vue
new file mode 100644
index 0000000000..9302e58854
--- /dev/null
+++ b/packages/vue-algolia-stars-facet/src/StarsFacet.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="alg-stars-facet" v-if="isVisible">
+    <slot name="header"></slot>
+
+    <button class="alg-stars-facet__clear"
+            type="button"
+            @click="clear"
+            v-if="currentValue"
+    >
+      <slot name="clear">Clear</slot>
+    </button>
+
+    <ul>
+      <li v-for="facet in facetValues"
+          class="alg-stars-facet__item"
+          :class="{'alg-stars-facet__item--active': facet.isRefined}"
+      >
+        <label>
+          <input type="radio"
+                 :value="facet.value"
+                 v-model="currentValue"
+                 @change="toggleRefinement(facet)"
+                 :name="name"
+          >
+          <template v-for="n in max">
+            <span v-if="n <= facet.name" class="alg-stars-facet__star">&#9733</span>
+            <span v-else class="alg-stars-facet__star alg-stars-facet__star--empty">&#9734</span>
+          </template>
+          &nbsp;&amp; up <span class="alg-stars-facet__count">({{facet.count}})</span>
+        </label>
+      </li>
+    </ul>
+
+    <slot name="footer"></slot>
+  </div>
+</template>
+
+<script>
+  import algoliaComponent from 'vue-algolia-component'
+
+  export default {
+    mixins: [algoliaComponent],
+    props: {
+      name: {
+        type: String,
+        default: "rating"
+      },
+      attribute: {
+        type: String,
+        required: true
+      },
+      min: {
+        type: Number,
+        default: 1
+      },
+      max: {
+        type: Number,
+        default: 5
+      }
+    },
+    mounted: function () {
+      this.searchStore.addFacet(this.attribute, 'disjunctive')
+    },
+    destroyed: function () {
+      this.searchStore.removeFacet(this.attribute)
+    },
+    computed: {
+      isVisible: function () {
+        for (let value in this.facetValues) {
+          if (this.facetValues[value].count > 0) {
+            return true
+          }
+        }
+        return false
+      },
+      facetValues: function () {
+        const values = this.searchStore.getFacetValues(this.attribute, ['name:asc'], this.max + 1)
+
+        let stars = []
+        let isRefined = false
+
+        for (let i = 0; i <= this.max; i++) {
+          let name = i.toString()
+          let star = {
+            count: 0,
+            isRefined: false,
+            name: name,
+            value: i
+          }
+
+          for (let value in values) {
+            if (values[value].name === name) {
+              if (!isRefined && values[value].isRefined) {
+                isRefined = true
+                star.isRefined = true
+              }
+            }
+          }
+
+          stars.push(star)
+        }
+
+        stars = stars.reverse()
+
+        let count = 0
+        for (let index in stars) {
+          stars[index].count = count
+          for (let value in values) {
+            if (values[value].name === stars[index].name) {
+              count += values[value].count
+              stars[index].count = count
+            }
+          }
+        }
+
+        return stars.slice(this.min, this.max)
+      },
+      currentValue () {
+        for (let value in this.facetValues) {
+          if (this.facetValues[value].isRefined) {
+            return this.facetValues[value].value
+          }
+        }
+
+        return
+      }
+    },
+    methods: {
+      toggleRefinement (facet) {
+        if (facet.isRefined) {
+          return this.searchStore.clearRefinements(this.attribute)
+        }
+
+        if (facet.count === 0) {
+          return
+        }
+
+        this.searchStore.stop()
+        this.searchStore.clearRefinements(this.attribute)
+        for (let val = Number(facet.name); val <= this.max; ++val) {
+          this.searchStore.addFacetRefinement(this.attribute, val);
+        }
+        this.searchStore.start()
+      },
+      clear () {
+        this.searchStore.clearRefinements(this.attribute)
+      }
+    }
+  }
+</script>
+
+
+
+
diff --git a/packages/vue-algolia-stars-facet/src/index.js b/packages/vue-algolia-stars-facet/src/index.js
new file mode 100644
index 0000000000..824fc34d68
--- /dev/null
+++ b/packages/vue-algolia-stars-facet/src/index.js
@@ -0,0 +1 @@
+export {default} from './StarsFacet.vue'
diff --git a/packages/vue-instantsearch/README.md b/packages/vue-instantsearch/README.md
new file mode 100644
index 0000000000..b8bd13d100
--- /dev/null
+++ b/packages/vue-instantsearch/README.md
@@ -0,0 +1,31 @@
+Algolia components for Vue.js
+-----------------------------
+
+This project uses [Lerna](https://github.com/lerna/lerna) to orchestrate the all the packages.
+
+To get started you should:
+
+```
+# Install Lerna globally
+yarn global add lerna
+
+# Install dependencies common to the packages
+yarn install
+
+# Download all dependencies
+lerna bootstrap
+
+# Build all the packages
+lerna run build
+```
+
+## Lerna caveats (probably because of Yarn)
+
+Sometimes your builds will fail because of incorrect dependencies resolution. If that happens, the easiest fix is
+to delete all `node_modules` folders and to bootstrap again.
+
+```
+rm -rf ./packages/*/node_modules
+lerna bootstrap
+```
+