algolia · dhayab · Feb 10, 2022 · Feb 9, 2022 · Feb 9, 2022 · Feb 9, 2022
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -11,7 +11,8 @@
     "/examples/starter-algolia",
     "/examples/starter",
     "/examples/reshape",
-    "/examples/vue"
+    "/examples/vue",
+    "/examples/vue-instantsearch"
   ],
   "node": "14"
 }
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.10.3",
+    "core-js": "^3.6.5",
+    "vue": "^3.1.2",
+    "vue-instantsearch": "4.0.0"
+  },
+  "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.1.2",
+    "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>