Skip to content

Commit f4c8e6c

Browse files
HaroenvHaroenv
committed
feat(Vue): added Nuxt example
1 parent 04c1541 commit f4c8e6c

File tree

10 files changed

+7334
-0
lines changed

10 files changed

+7334
-0
lines changed

‎Vue InstantSearch/nuxt/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.nuxt

‎Vue InstantSearch/nuxt/README.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# nuxt
2+
3+
> Vue InstantSearch & Nuxt
4+
5+
## Build Setup
6+
7+
```bash
8+
# install dependencies
9+
$ yarn install
10+
11+
# serve with hot reload at localhost:3000
12+
$ yarn run dev
13+
14+
# build for production and launch server
15+
$ yarn run build
16+
$ yarn start
17+
18+
# generate static project
19+
$ yarn run generate
20+
```
21+
22+
For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org).

‎Vue InstantSearch/nuxt/layouts/README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# LAYOUTS
2+
3+
**This directory is not required, you can delete it if you don't want to use it.**
4+
5+
This directory contains your Application Layouts.
6+
7+
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).

‎Vue InstantSearch/nuxt/layouts/default.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div>
3+
<div id="nav">
4+
<nuxt-link to="/">Home</nuxt-link> |
5+
<nuxt-link to="/search">Search</nuxt-link>
6+
</div>
7+
<nuxt />
8+
</div>
9+
</template>
10+
11+
<style>
12+
html {
13+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
14+
}
15+
16+
*,
17+
*:before,
18+
*:after {
19+
box-sizing: border-box;
20+
}
21+
22+
#nav {
23+
text-align: center;
24+
}
25+
</style>

‎Vue InstantSearch/nuxt/nuxt.config.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/* eslint-disable import/no-commonjs */
2+
3+
module.exports = {
4+
build: {
5+
transpile: ['vue-instantsearch', 'instantsearch.js/es'],
6+
},
7+
};

‎Vue InstantSearch/nuxt/package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "nuxt",
3+
"version": "1.0.0",
4+
"description": "Vue InstantSearch & Nuxt",
5+
"private": true,
6+
"scripts": {
7+
"serve": "yarn dev",
8+
"dev": "nuxt",
9+
"build": "nuxt build",
10+
"start": "nuxt start",
11+
"generate": "nuxt generate"
12+
},
13+
"dependencies": {
14+
"algoliasearch": "^4.0.1",
15+
"cross-env": "^5.2.0",
16+
"nuxt": "^2.4.5",
17+
"vue-instantsearch": "4.1.1",
18+
"vue-server-renderer": "2.6.11"
19+
},
20+
"devDependencies": {}
21+
}

‎Vue InstantSearch/nuxt/pages/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# PAGES
2+
3+
This directory contains your Application Views and Routes.
4+
The framework reads all the `*.vue` files inside this directory and create the router of your application.
5+
6+
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).

‎Vue InstantSearch/nuxt/pages/index.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<h2>
3+
Go to the search page: <nuxt-link to="/search">"/search"</nuxt-link>
4+
</h2>
5+
</template>
6+
7+
<style>
8+
h2 {
9+
text-align: center;
10+
}
11+
</style>

‎Vue InstantSearch/nuxt/pages/search.vue‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<template>
2+
<ais-instant-search-ssr>
3+
<ais-index
4+
index-name="instant_search_demo_query_suggestions"
5+
index-id="querySuggestions"
6+
>
7+
<ais-search-box />
8+
<ais-configure :hits-per-page.camel="5" />
9+
<ais-hits>
10+
<template v-slot:item="{ item }">
11+
<ais-highlight
12+
attribute="query"
13+
:hit="item"
14+
/>
15+
</template>
16+
</ais-hits>
17+
<ais-pagination />
18+
</ais-index>
19+
<ais-search-box />
20+
<ais-stats />
21+
<ais-index
22+
index-id="refinement"
23+
index-name="instant_search"
24+
>
25+
<ais-refinement-list attribute="brand" />
26+
</ais-index>
27+
<ais-hits>
28+
<template v-slot:item="{ item }">
29+
<p>
30+
<ais-highlight
31+
attribute="name"
32+
:hit="item"
33+
/>
34+
</p>
35+
<p>
36+
<ais-highlight
37+
attribute="brand"
38+
:hit="item"
39+
/>
40+
</p>
41+
</template>
42+
</ais-hits>
43+
<ais-pagination />
44+
</ais-instant-search-ssr>
45+
</template>
46+
47+
<script>
48+
import {
49+
AisInstantSearchSsr,
50+
AisIndex,
51+
AisConfigure,
52+
AisRefinementList,
53+
AisHits,
54+
AisHighlight,
55+
AisSearchBox,
56+
AisStats,
57+
AisPagination,
58+
createServerRootMixin,
59+
} from 'vue-instantsearch'; // eslint-disable-line import/no-unresolved
60+
import algoliasearch from 'algoliasearch/lite';
61+
import _renderToString from 'vue-server-renderer/basic';
62+
63+
function renderToString(app) {
64+
return new Promise((resolve, reject) => {
65+
_renderToString(app, (err, res) => {
66+
if (err) reject(err);
67+
resolve(res);
68+
});
69+
});
70+
}
71+
72+
const searchClient = algoliasearch(
73+
'latency',
74+
'6be0576ff61c053d5f9a3225e2a90f76'
75+
);
76+
77+
export default {
78+
mixins: [
79+
createServerRootMixin({
80+
searchClient,
81+
indexName: 'instant_search',
82+
initialUiState: {
83+
instant_search: {
84+
query: 'iphone',
85+
page: 3,
86+
},
87+
refinement: {
88+
refinementList: {
89+
brand: ['Apple'],
90+
},
91+
},
92+
querySuggestions: {
93+
query: 'k',
94+
page: 2,
95+
configure: {
96+
hitsPerPage: 5,
97+
},
98+
},
99+
},
100+
}),
101+
],
102+
serverPrefetch() {
103+
return this.instantsearch
104+
.findResultsState({ component: this, renderToString })
105+
.then(algoliaState => {
106+
this.$ssrContext.nuxt.algoliaState = algoliaState;
107+
});
108+
},
109+
beforeMount() {
110+
const results = window.__NUXT__.algoliaState;
111+
112+
this.instantsearch.hydrate(results);
113+
},
114+
components: {
115+
AisInstantSearchSsr,
116+
AisIndex,
117+
AisConfigure,
118+
AisRefinementList,
119+
AisHits,
120+
AisHighlight,
121+
AisSearchBox,
122+
AisStats,
123+
AisPagination,
124+
},
125+
head() {
126+
return {
127+
link: [
128+
{
129+
rel: 'stylesheet',
130+
href:
131+
'https://unpkg.com/[email protected]/themes/algolia-min.css',
132+
},
133+
],
134+
};
135+
},
136+
};
137+
</script>
138+
139+
<style>
140+
.ais-Hits-list {
141+
text-align: left;
142+
}
143+
.ais-Hits-list:empty {
144+
margin: 0;
145+
}
146+
.ais-InstantSearch {
147+
margin: 1em;
148+
}
149+
</style>

0 commit comments

Comments
 (0)