docs(examples): add vue instantsearch example (#892)

algolia · Feb 10, 2022 · 4430816 · 4430816
1 parent e418ee2
commit 4430816
Show file tree

Hide file tree

Showing 16 changed files with 2,157 additions and 51 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -6,3 +6,4 @@ dist
 node_modules
 examples/twitter-compose-with-typeahead
 examples/slack-with-emojis-and-commands
+examples/vue-instantsearch
diff --git a/examples/vue-instantsearch/.gitignore b/examples/vue-instantsearch/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/vue-instantsearch/.prettierrc b/examples/vue-instantsearch/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5"
+}
diff --git a/examples/vue-instantsearch/README.md b/examples/vue-instantsearch/README.md
@@ -0,0 +1,34 @@
+# Autocomplete with Vue InstantSearch example
+
+This example shows how to integrate Autocomplete with [Vue InstantSearch](https://github.com/algolia/vue-instantsearch/).
+
+<p align="center"><img src="capture.png?raw=true" alt="A capture of the Autocomplete with Vue InstantSearch demo" /></p>
+
+## Demo
+
+[Access the demo](https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/vue-instantsearch)
+
+## How to run this example locally
+
+### 1. Clone this repository
+
+```sh
+git clone [email protected]:algolia/autocomplete.git
+```
+
+### 2. Install the dependencies and run the server
+
+```sh
+yarn
+yarn workspace @algolia/autocomplete-example-vue-instantsearch dev
+```
+
+Alternatively, you may use npm:
+
+```sh
+cd examples/vue-instantsearch
+npm install
+npm run dev
+```
+
+Open <http://localhost:8080> to see your app.
diff --git a/examples/vue-instantsearch/babel.config.js b/examples/vue-instantsearch/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/examples/vue-instantsearch/capture.png b/examples/vue-instantsearch/capture.png
diff --git a/examples/vue-instantsearch/package.json b/examples/vue-instantsearch/package.json
@@ -0,0 +1,55 @@
+{
+  "name": "@algolia/autocomplete-example-vue-instantsearch",
+  "description": "Autocomplete with Vue InstantSearch",
+  "version": "0.1.0",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@algolia/autocomplete-js": "1.5.2",
+    "@algolia/autocomplete-plugin-query-suggestions": "1.5.2",
+    "@algolia/autocomplete-plugin-recent-searches": "1.5.2",
+    "@algolia/autocomplete-theme-classic": "1.5.2",
+    "algoliasearch": "4.12.1",
+    "core-js": "^3.6.5",
+    "vue": "3.2.30",
+    "vue-instantsearch": "4.3.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "3.2.30",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.0.0-0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "keywords": [
+    "algolia",
+    "autocomplete",
+    "vue"
+  ]
+}
diff --git a/examples/vue-instantsearch/public/favicon.png b/examples/vue-instantsearch/public/favicon.png
diff --git a/examples/vue-instantsearch/public/index.html b/examples/vue-instantsearch/public/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="shortcut icon" href="<%= BASE_URL %>favicon.png" type="image/x-icon" />
+    <title>Vue InstantSearch | Autocomplete</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css"
+    />
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/examples/vue-instantsearch/src/App.vue b/examples/vue-instantsearch/src/App.vue
@@ -0,0 +1,198 @@
+<template>
+  <div>
+    <header class="header">
+      <div class="header-wrapper wrapper">
+        <nav class="header-nav">
+          <a href="/">Home</a>
+        </nav>
+        <div id="autocomplete"></div>
+      </div>
+    </header>
+
+    <ais-instant-search
+      :search-client="searchClient"
+      :index-name="indexName"
+      :routing="routing"
+      :middlewares="middlewares"
+    >
+      <ais-configure
+        :attributes-to-snippet.camel="['name:7', 'description:15']"
+        :snippet-ellipsis-text.camel="'…'"
+      ></ais-configure>
+      <div class="container wrapper">
+        <div>
+          <ais-panel>
+            <template v-slot:header>Categories</template>
+            <ais-hierarchical-menu
+              :attributes="[
+                'hierarchicalCategories.lvl0',
+                'hierarchicalCategories.lvl1',
+              ]"
+            ></ais-hierarchical-menu>
+          </ais-panel>
+        </div>
+        <div>
+          <ais-search-box><template></template></ais-search-box>
+          <ais-hits>
+            <template v-slot:item="{ item }">
+              <article class="hit">
+                <div class="hit-image">
+                  <img :src="item.image" :alt="item.name" />
+                </div>
+                <div>
+                  <h1>
+                    <ais-snippet :hit="item" attribute="name" />
+                  </h1>
+                  <div>
+                    By <strong>{{ item.brand }}</strong> in
+                    <strong>{{ item.categories[0] }}</strong>
+                  </div>
+                </div>
+              </article>
+            </template>
+          </ais-hits>
+          <ais-pagination :show-first="false" :show-last="false" />
+        </div>
+      </div>
+    </ais-instant-search>
+  </div>
+</template>
+
+<script>
+import { history as historyRouter } from 'instantsearch.js/es/lib/routers';
+import { singleIndex as singleIndexMapping } from 'instantsearch.js/es/lib/stateMappings';
+
+import { autocompleteMiddleware } from './autocompleteMiddleware';
+import { INSTANT_SEARCH_INDEX_NAME } from './constants';
+import { searchClient } from './searchClient';
+
+export default {
+  data() {
+    return {
+      searchClient,
+      indexName: INSTANT_SEARCH_INDEX_NAME,
+      routing: {
+        router: historyRouter(),
+        stateMapping: singleIndexMapping(INSTANT_SEARCH_INDEX_NAME),
+      },
+      middlewares: [autocompleteMiddleware],
+    };
+  },
+};
+</script>
+
+<style>
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  background-color: rgb(244, 244, 249);
+  color: rgb(65, 65, 65);
+}
+
+a {
+  color: var(--aa-primary-color);
+  text-decoration: none;
+}
+
+.header {
+  background: rgb(252 252 255 / 92%);
+  box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.05),
+    0 1px 3px 0 rgba(35, 38, 59, 0.15);
+  padding: 0.5rem 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+.header-wrapper {
+  align-items: center;
+  display: grid;
+  grid-template-columns: 100px 1fr;
+}
+
+.header-nav {
+  font-weight: 500;
+}
+
+.wrapper {
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: 0 1.5rem;
+  width: 100%;
+}
+
+.container {
+  margin-top: 3.5rem;
+  padding: 1.5rem;
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 3fr;
+}
+
+/* Autocomplete */
+
+.aa-Panel {
+  position: fixed;
+}
+
+/* InstantSearch */
+
+.ais-Hits-list {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.ais-Hits-item {
+  padding: 1rem !important;
+}
+
+.hit {
+  align-items: center;
+  display: grid;
+  gap: 1rem;
+}
+
+.hit h1 {
+  font-size: 1rem;
+}
+
+.hit p {
+  font-size: 0.8rem;
+  opacity: 0.8;
+}
+
+.hit-image {
+  align-items: center;
+  display: flex;
+  height: 100px;
+  justify-content: center;
+}
+
+.hit-image img {
+  max-height: 100%;
+}
+
+.ais-HierarchicalMenu-item--selected.ais-HierarchicalMenu-item--parent
+  > div:first-of-type
+  .ais-HierarchicalMenu-label {
+  font-weight: bold;
+}
+
+.ais-HierarchicalMenu-item--selected:not(.ais-HierarchicalMenu-item--parent)
+  .ais-HierarchicalMenu-label {
+  font-weight: bold;
+}
+
+.ais-Pagination {
+  display: flex;
+  justify-content: center;
+  margin: 2rem 0;
+}
+</style>