feat(url-sync-example): add URL sync example with Vue Router

Closes: #61
algolia · Apr 11, 2017 · ec70e91 · ec70e91
1 parent 188401e
commit ec70e91
Show file tree

Hide file tree

Showing 11 changed files with 4,195 additions and 0 deletions.
diff --git a/packages/examples/vue-router/.babelrc b/packages/examples/vue-router/.babelrc
@@ -0,0 +1,7 @@
+{
+  "presets": [
+    ["latest", {
+      "es2015": { "modules": false }
+    }]
+  ]
+}
diff --git a/packages/examples/vue-router/.gitignore b/packages/examples/vue-router/.gitignore
@@ -0,0 +1,5 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
+yarn-error.log
diff --git a/packages/examples/vue-router/README.md b/packages/examples/vue-router/README.md
@@ -0,0 +1,18 @@
+# example-vue-router
+
+> Algolia search with Vue Router
+
+## 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
+```
+
+For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
diff --git a/packages/examples/vue-router/index.html b/packages/examples/vue-router/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>example-vue-router</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="/dist/build.js"></script>
+  </body>
+</html>
diff --git a/packages/examples/vue-router/package.json b/packages/examples/vue-router/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "example-vue-router",
+  "description": "Algolia search with Vue Router",
+  "version": "1.0.0",
+  "author": "Raymond Rutjes <raymond.rutjes@gmail.com>",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+  },
+  "dependencies": {
+    "vue": "^2.2.1",
+    "vue-router": "^2.4.0",
+    "vue-instantsearch": "*",
+    "instantsearch-store": "*"
+  },
+  "devDependencies": {
+    "babel-core": "^6.0.0",
+    "babel-loader": "^6.0.0",
+    "babel-preset-latest": "^6.0.0",
+    "cross-env": "^3.0.0",
+    "css-loader": "^0.25.0",
+    "file-loader": "^0.9.0",
+    "node-sass": "^4.5.0",
+    "sass-loader": "^5.0.1",
+    "vue-loader": "^11.1.4",
+    "vue-template-compiler": "^2.2.1",
+    "webpack": "^2.2.0",
+    "webpack-dev-server": "^2.2.0"
+  }
+}
diff --git a/packages/examples/vue-router/src/App.vue b/packages/examples/vue-router/src/App.vue
@@ -0,0 +1,13 @@
+<template>
+  <div id="app">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'app'
+};
+</script>
+
+<style lang="scss"></style>
diff --git a/packages/examples/vue-router/src/Search.vue b/packages/examples/vue-router/src/Search.vue
@@ -0,0 +1,39 @@
+<template>
+  <ais-store :search-store="searchStore" :query="query">
+    <ais-input placeholder="Search for a user..."/>
+    <ais-results></ais-results>
+
+  </ais-store>
+</template>
+
+<script>
+import { createFromAlgoliaCredentials } from 'instantsearch-store';
+
+const searchStore = createFromAlgoliaCredentials(
+  'latency',
+  '6be0576ff61c053d5f9a3225e2a90f76'
+);
+searchStore.indexName = 'ikea';
+
+export default {
+  props: {
+    query: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      searchStore
+    };
+  },
+  watch: {
+    'searchStore.query'(value) {
+      this.$router.push({
+        name: 'search',
+        query: { q: value }
+      });
+    }
+  }
+};
+</script>
diff --git a/packages/examples/vue-router/src/assets/logo.png b/packages/examples/vue-router/src/assets/logo.png
diff --git a/packages/examples/vue-router/src/main.js b/packages/examples/vue-router/src/main.js
@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import InstantSearch from 'vue-instantsearch';
+import App from './App.vue';
+import Search from './Search.vue';
+
+Vue.use(InstantSearch);
+Vue.use(VueRouter);
+
+const router = new VueRouter({
+  routes: [
+    {
+      name: 'search',
+      path: '/search',
+      component: Search,
+      props: route => ({ query: route.query.q })
+    },
+    { path: '/', redirect: '/search' }
+  ]
+});
+
+new Vue({
+  el: '#app',
+  render: h => h(App),
+  router
+});
diff --git a/packages/examples/vue-router/webpack.config.js b/packages/examples/vue-router/webpack.config.js
@@ -0,0 +1,75 @@
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+  entry: './src/main.js',
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: '/dist/',
+    filename: 'build.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
+            // the "scss" and "sass" values for the lang attribute to the right configs here.
+            // other preprocessors should work out of the box, no loader config like this necessary.
+            'scss': 'vue-style-loader!css-loader!sass-loader',
+            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
+          }
+          // other vue-loader options go here
+        }
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]?[hash]'
+        }
+      }
+    ]
+  },
+  resolve: {
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js'
+    }
+  },
+  devServer: {
+    historyApiFallback: true,
+    noInfo: true
+  },
+  performance: {
+    hints: false
+  },
+  devtool: '#eval-source-map'
+}
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports.devtool = '#source-map'
+  // http://vue-loader.vuejs.org/en/workflow/production.html
+  module.exports.plugins = (module.exports.plugins || []).concat([
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      sourceMap: true,
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    })
+  ])
+}