Skip to content

Commit 3a88128

Browse files
guimachiavelliguimachiavelli
committed
Merge branch 'mintlify-iso' of github.com:meilisearch/documentation into mintlify-iso
2 parents 5a9f19c + c3f72cb commit 3a88128

File tree

1 file changed

+227
-0
lines changed

1 file changed

+227
-0
lines changed

‎snippets/samples/code_samples_getting_started_front_end_integration_md.mdx‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
<CodeGroup>
2+
3+
```text Vanilla JS
4+
The following code sample uses plain [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript).
5+
6+
<!DOCTYPE html>
7+
<html lang="en">
8+
<head>
9+
<meta charset="utf-8" />
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/templates/basic_search.css" />
11+
</head>
12+
<body>
13+
<div class="wrapper">
14+
<div id="searchbox" focus></div>
15+
<div id="hits"></div>
16+
</div>
17+
</body>
18+
<script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
19+
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
20+
<script>
21+
const search = instantsearch({
22+
indexName: "movies",
23+
searchClient: instantMeiliSearch(
24+
"http://localhost:7700"
25+
).searchClient
26+
});
27+
search.addWidgets([
28+
instantsearch.widgets.searchBox({
29+
container: "#searchbox"
30+
}),
31+
instantsearch.widgets.configure({ hitsPerPage: 8 }),
32+
instantsearch.widgets.hits({
33+
container: "#hits",
34+
templates: {
35+
item: `
36+
<div>
37+
<div class="hit-name">
38+
{{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}
39+
</div>
40+
</div>
41+
`
42+
}
43+
})
44+
]);
45+
search.start();
46+
</script>
47+
</html>
48+
49+
50+
51+
Here's what's happening:
52+
53+
- The first four lines of the `<body>` add two container elements: `#searchbox` and `#hits`. `instant-meilisearch` creates the search bar inside `#searchbox` and lists search results in `#hits`
54+
- The first two`<script src="…">` tags import libraries needed to run `instant-meilisearch`
55+
- The third and final `<script>` tag is where you customize `instant-meilisearch`
56+
```
57+
58+
```text React
59+
The following code sample uses [React](https://reactjs.org/), a JavaScript library for building web user interfaces.
60+
61+
<!DOCTYPE html>
62+
<html lang="en">
63+
<head>
64+
<meta charset="utf-8" />
65+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/templates/basic_search.css" />
66+
</head>
67+
<body>
68+
<div id="app" class="wrapper"></div>
69+
</body>
70+
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
71+
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
72+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/ReactInstantSearchDOM.js"></script>
73+
<script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
74+
<script>
75+
const { InstantSearch, SearchBox, Hits, Highlight, Configure } = ReactInstantSearchDOM;
76+
const searchClient = instantMeiliSearch(
77+
"http://localhost:7700"
78+
);
79+
const App = () => (
80+
React.createElement(InstantSearch, {
81+
indexName: "movies",
82+
searchClient: searchClient
83+
}, [
84+
React.createElement(SearchBox, { key: 1 }),
85+
React.createElement(Hits, { hitComponent: Hit, key: 2 }),
86+
React.createElement(Configure, { hitsPerPage: 10 })]
87+
)
88+
);
89+
90+
const Hit = (props) => (
91+
React.createElement(Highlight, {
92+
attribute: "title",
93+
hit: props.hit
94+
})
95+
);
96+
ReactDOM.createRoot(document.querySelector('#app')).render(App());
97+
</script>
98+
</html>
99+
100+
101+
102+
Here's what's happening:
103+
104+
- The `< div id="app">` inside `<body>` is React's entry point. `instant-meilisearch` creates the search bar and the search result container inside this HTML element by manipulating the DOM
105+
- The first four`<script src="…">` tags import all the libraries required to run `instant-meilisearch` in [React](https://reactjs.org/).
106+
- The last `<script>` tag initializes React, customizes `instant-meilisearch`, and creates all the required UI elements inside `<div id="app">`
107+
```
108+
109+
```text Vue.js
110+
The following example uses [Vue 2](https://vuejs.org/), the second major release of Vue, a JavaScript framework for building web user interfaces.
111+
112+
<!DOCTYPE html>
113+
<html lang="en">
114+
115+
<head>
116+
<meta charset="utf-8" />
117+
<link rel="stylesheet"
118+
href="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/templates/basic_search.css" />
119+
</head>
120+
121+
<body>
122+
<div id="app" class="wrapper">
123+
<ais-instant-search :search-client="searchClient" index-name="movies">
124+
<ais-configure :hits-per-page.camel="10" />
125+
<ais-search-box placeholder="Search here…" class="searchbox"></ais-search-box>
126+
<ais-hits>
127+
<div slot="item" slot-scope="{ item }">
128+
<ais-highlight :hit="item" attribute="title" />
129+
</div>
130+
</ais-hits>
131+
</ais-instant-search>
132+
</div>
133+
</body>
134+
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
135+
<script src="https://cdn.jsdelivr.net/npm/vue-instantsearch/vue2/umd/index.js"></script>
136+
<script
137+
src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script>
138+
<script>
139+
Vue.use(VueInstantSearch)
140+
var app = new Vue({
141+
el: '#app',
142+
data: {
143+
searchClient: instantMeiliSearch('http://127.0.0.1:7700')
144+
}
145+
})
146+
</script>
147+
148+
</html>
149+
150+
151+
152+
Here's what's happening:
153+
154+
- To use `instant-meilisearch` with Vue, you must add `<ais-instant-search>`, `<ais-search-box>`, and `<ais-hits>` to your application's HTML. These components are mandatory when generating the`instant-meilisearch` interface
155+
- Other Vue components such as `<ais-configure>` and `<ais-highlight>` are optional. They offer greater control over `instant-meilisearch`'s behavior and appearance
156+
- The first two`<script src="..">` tags import libraries needed to run `instant-meilisearch` with Vue
157+
- The third and final `<script>` creates a new Vue instance and instructs it to use `instant-meilisearch`
158+
```
159+
160+
```text Vue3.js
161+
The following example uses [Vue 3](https://vuejs.org/), a JavaScript framework for building web user interfaces.
162+
163+
<!DOCTYPE html>
164+
<html lang="en">
165+
166+
<head>
167+
<meta charset="utf-8" />
168+
169+
<link rel="stylesheet"
170+
href="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/templates/basic_search.css" />
171+
</head>
172+
173+
<body>
174+
<div id="app" class="wrapper">
175+
<ais-instant-search :search-client="searchClient" index-name="steam-video-games">
176+
<ais-search-box></ais-search-box>
177+
<ais-hits>
178+
<template v-slot:item="{ item }">
179+
<ais-highlight :hit="item" attribute="name" />
180+
</template>
181+
</ais-hits>
182+
</ais-instant-search>
183+
</div>
184+
</body>
185+
186+
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
187+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/vue3/umd/index.js"></script>
188+
<script
189+
src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js">
190+
</script>
191+
192+
<script type="module">
193+
const InstantSearch = {
194+
install(localVue) {
195+
Object.keys(VueInstantSearch).forEach(widgetName => {
196+
localVue.component(VueInstantSearch[widgetName].name, VueInstantSearch[widgetName]);
197+
});
198+
},
199+
};
200+
201+
202+
const app = Vue
203+
.createApp({
204+
data() {
205+
return {
206+
searchClient: instantMeiliSearch(
207+
'https://ms-adf78ae33284-106.lon.meilisearch.io',
208+
'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303',
209+
).searchClient,
210+
}
211+
}
212+
})
213+
.use(InstantSearch)
214+
.mount('#app')
215+
</script>
216+
217+
</html>
218+
219+
220+
221+
Here's what's happening:
222+
- To use `instant-meilisearch` with Vue, you must add `<ais-instant-search>`, `<ais-search-box>`, and `<ais-hits>` to your application's HTML. These components are mandatory when generating the `instant-meilisearch` interface
223+
- Other Vue components such as `<ais-configure>` and `<ais-highlight>` are optional. They offer greater control over `instant-meilisearch`'s behavior and appearance
224+
- The three `<script src="..">` tags import libraries needed to run `instant-meilisearch` with Vue
225+
- The fourth and final `<script>` creates a new Vue instance and instructs it to use `instant-meilisearch`
226+
```
227+
</CodeGroup>

0 commit comments

Comments
 (0)