Skip to content

Commit 4430816

Browse files
dhayabdhayab
authored
docs(examples): add vue instantsearch example (#892)
1 parent e418ee2 commit 4430816

File tree

16 files changed

+2157
-51
lines changed

16 files changed

+2157
-51
lines changed

‎.eslintignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ dist
66
node_modules
77
examples/twitter-compose-with-typeahead
88
examples/slack-with-emojis-and-commands
9+
examples/vue-instantsearch

‎examples/vue-instantsearch/.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
6+
# local env files
7+
.env.local
8+
.env.*.local
9+
10+
# Log files
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
pnpm-debug.log*
15+
16+
# Editor directories and files
17+
.idea
18+
.vscode
19+
*.suo
20+
*.ntvs*
21+
*.njsproj
22+
*.sln
23+
*.sw?

‎examples/vue-instantsearch/.prettierrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "es5"
4+
}

‎examples/vue-instantsearch/README.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Autocomplete with Vue InstantSearch example
2+
3+
This example shows how to integrate Autocomplete with [Vue InstantSearch](https://github.com/algolia/vue-instantsearch/).
4+
5+
<p align="center"><img src="capture.png?raw=true" alt="A capture of the Autocomplete with Vue InstantSearch demo" /></p>
6+
7+
## Demo
8+
9+
[Access the demo](https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/vue-instantsearch)
10+
11+
## How to run this example locally
12+
13+
### 1. Clone this repository
14+
15+
```sh
16+
git clone [email protected]:algolia/autocomplete.git
17+
```
18+
19+
### 2. Install the dependencies and run the server
20+
21+
```sh
22+
yarn
23+
yarn workspace @algolia/autocomplete-example-vue-instantsearch dev
24+
```
25+
26+
Alternatively, you may use npm:
27+
28+
```sh
29+
cd examples/vue-instantsearch
30+
npm install
31+
npm run dev
32+
```
33+
34+
Open <http://localhost:8080> to see your app.

‎examples/vue-instantsearch/babel.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset'
4+
]
5+
}

‎examples/vue-instantsearch/capture.png

686 KB
Loading

‎examples/vue-instantsearch/package.json

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"name": "@algolia/autocomplete-example-vue-instantsearch",
3+
"description": "Autocomplete with Vue InstantSearch",
4+
"version": "0.1.0",
5+
"private": true,
6+
"license": "MIT",
7+
"scripts": {
8+
"dev": "vue-cli-service serve",
9+
"build": "vue-cli-service build",
10+
"lint": "vue-cli-service lint"
11+
},
12+
"dependencies": {
13+
"@algolia/autocomplete-js": "1.5.2",
14+
"@algolia/autocomplete-plugin-query-suggestions": "1.5.2",
15+
"@algolia/autocomplete-plugin-recent-searches": "1.5.2",
16+
"@algolia/autocomplete-theme-classic": "1.5.2",
17+
"algoliasearch": "4.12.1",
18+
"core-js": "^3.6.5",
19+
"vue": "3.2.30",
20+
"vue-instantsearch": "4.3.2"
21+
},
22+
"devDependencies": {
23+
"@vue/cli-plugin-babel": "~4.5.0",
24+
"@vue/cli-plugin-eslint": "~4.5.0",
25+
"@vue/cli-service": "~4.5.0",
26+
"@vue/compiler-sfc": "3.2.30",
27+
"babel-eslint": "^10.1.0",
28+
"eslint": "^6.7.2",
29+
"eslint-plugin-vue": "^7.0.0-0"
30+
},
31+
"eslintConfig": {
32+
"root": true,
33+
"env": {
34+
"node": true
35+
},
36+
"extends": [
37+
"plugin:vue/vue3-essential",
38+
"eslint:recommended"
39+
],
40+
"parserOptions": {
41+
"parser": "babel-eslint"
42+
},
43+
"rules": {}
44+
},
45+
"browserslist": [
46+
"> 1%",
47+
"last 2 versions",
48+
"not dead"
49+
],
50+
"keywords": [
51+
"algolia",
52+
"autocomplete",
53+
"vue"
54+
]
55+
}

‎examples/vue-instantsearch/public/favicon.png

43.1 KB
Loading

‎examples/vue-instantsearch/public/index.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
7+
<link rel="shortcut icon" href="<%= BASE_URL %>favicon.png" type="image/x-icon" />
8+
<title>Vue InstantSearch | Autocomplete</title>
9+
<link
10+
rel="stylesheet"
11+
href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css"
12+
/>
13+
</head>
14+
<body>
15+
<noscript>
16+
<strong
17+
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
18+
properly without JavaScript enabled. Please enable it to
19+
continue.</strong
20+
>
21+
</noscript>
22+
<div id="app"></div>
23+
<!-- built files will be auto injected -->
24+
</body>
25+
</html>

‎examples/vue-instantsearch/src/App.vue

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
<template>
2+
<div>
3+
<header class="header">
4+
<div class="header-wrapper wrapper">
5+
<nav class="header-nav">
6+
<a href="/">Home</a>
7+
</nav>
8+
<div id="autocomplete"></div>
9+
</div>
10+
</header>
11+
12+
<ais-instant-search
13+
:search-client="searchClient"
14+
:index-name="indexName"
15+
:routing="routing"
16+
:middlewares="middlewares"
17+
>
18+
<ais-configure
19+
:attributes-to-snippet.camel="['name:7', 'description:15']"
20+
:snippet-ellipsis-text.camel="'…'"
21+
></ais-configure>
22+
<div class="container wrapper">
23+
<div>
24+
<ais-panel>
25+
<template v-slot:header>Categories</template>
26+
<ais-hierarchical-menu
27+
:attributes="[
28+
'hierarchicalCategories.lvl0',
29+
'hierarchicalCategories.lvl1',
30+
]"
31+
></ais-hierarchical-menu>
32+
</ais-panel>
33+
</div>
34+
<div>
35+
<ais-search-box><template></template></ais-search-box>
36+
<ais-hits>
37+
<template v-slot:item="{ item }">
38+
<article class="hit">
39+
<div class="hit-image">
40+
<img :src="item.image" :alt="item.name" />
41+
</div>
42+
<div>
43+
<h1>
44+
<ais-snippet :hit="item" attribute="name" />
45+
</h1>
46+
<div>
47+
By <strong>{{ item.brand }}</strong> in
48+
<strong>{{ item.categories[0] }}</strong>
49+
</div>
50+
</div>
51+
</article>
52+
</template>
53+
</ais-hits>
54+
<ais-pagination :show-first="false" :show-last="false" />
55+
</div>
56+
</div>
57+
</ais-instant-search>
58+
</div>
59+
</template>
60+
61+
<script>
62+
import { history as historyRouter } from 'instantsearch.js/es/lib/routers';
63+
import { singleIndex as singleIndexMapping } from 'instantsearch.js/es/lib/stateMappings';
64+
65+
import { autocompleteMiddleware } from './autocompleteMiddleware';
66+
import { INSTANT_SEARCH_INDEX_NAME } from './constants';
67+
import { searchClient } from './searchClient';
68+
69+
export default {
70+
data() {
71+
return {
72+
searchClient,
73+
indexName: INSTANT_SEARCH_INDEX_NAME,
74+
routing: {
75+
router: historyRouter(),
76+
stateMapping: singleIndexMapping(INSTANT_SEARCH_INDEX_NAME),
77+
},
78+
middlewares: [autocompleteMiddleware],
79+
};
80+
},
81+
};
82+
</script>
83+
84+
<style>
85+
* {
86+
box-sizing: border-box;
87+
}
88+
89+
body {
90+
margin: 0;
91+
padding: 0;
92+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
93+
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
94+
background-color: rgb(244, 244, 249);
95+
color: rgb(65, 65, 65);
96+
}
97+
98+
a {
99+
color: var(--aa-primary-color);
100+
text-decoration: none;
101+
}
102+
103+
.header {
104+
background: rgb(252 252 255 / 92%);
105+
box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.05),
106+
0 1px 3px 0 rgba(35, 38, 59, 0.15);
107+
padding: 0.5rem 0;
108+
position: fixed;
109+
top: 0;
110+
width: 100%;
111+
}
112+
113+
.header-wrapper {
114+
align-items: center;
115+
display: grid;
116+
grid-template-columns: 100px 1fr;
117+
}
118+
119+
.header-nav {
120+
font-weight: 500;
121+
}
122+
123+
.wrapper {
124+
margin: 0 auto;
125+
max-width: 1200px;
126+
padding: 0 1.5rem;
127+
width: 100%;
128+
}
129+
130+
.container {
131+
margin-top: 3.5rem;
132+
padding: 1.5rem;
133+
display: grid;
134+
gap: 1rem;
135+
grid-template-columns: 1fr 3fr;
136+
}
137+
138+
/* Autocomplete */
139+
140+
.aa-Panel {
141+
position: fixed;
142+
}
143+
144+
/* InstantSearch */
145+
146+
.ais-Hits-list {
147+
display: grid;
148+
gap: 1rem;
149+
grid-template-columns: 1fr 1fr 1fr;
150+
}
151+
152+
.ais-Hits-item {
153+
padding: 1rem !important;
154+
}
155+
156+
.hit {
157+
align-items: center;
158+
display: grid;
159+
gap: 1rem;
160+
}
161+
162+
.hit h1 {
163+
font-size: 1rem;
164+
}
165+
166+
.hit p {
167+
font-size: 0.8rem;
168+
opacity: 0.8;
169+
}
170+
171+
.hit-image {
172+
align-items: center;
173+
display: flex;
174+
height: 100px;
175+
justify-content: center;
176+
}
177+
178+
.hit-image img {
179+
max-height: 100%;
180+
}
181+
182+
.ais-HierarchicalMenu-item--selected.ais-HierarchicalMenu-item--parent
183+
> div:first-of-type
184+
.ais-HierarchicalMenu-label {
185+
font-weight: bold;
186+
}
187+
188+
.ais-HierarchicalMenu-item--selected:not(.ais-HierarchicalMenu-item--parent)
189+
.ais-HierarchicalMenu-label {
190+
font-weight: bold;
191+
}
192+
193+
.ais-Pagination {
194+
display: flex;
195+
justify-content: center;
196+
margin: 2rem 0;
197+
}
198+
</style>

0 commit comments

Comments
 (0)