From 10ab241f022c82449d7e58b57f9f61d58b22978d Mon Sep 17 00:00:00 2001 From: CaroFG Date: Mon, 24 Jun 2024 17:53:03 +0200 Subject: [PATCH 1/5] Add Vue3 quick start --- guides/front_end/vue_quick_start.mdx | 131 +++++++++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 guides/front_end/vue_quick_start.mdx diff --git a/guides/front_end/vue_quick_start.mdx b/guides/front_end/vue_quick_start.mdx new file mode 100644 index 000000000..188eef65a --- /dev/null +++ b/guides/front_end/vue_quick_start.mdx @@ -0,0 +1,131 @@ +--- +title: Vue3 quick start — Meilisearch documentation +description: Integrate a search-as-you-type experience into your Vue app. +--- + +# Vue3 quick start + +## 1. Create a Vue application + +```bash +npm create vue@latest my-app +``` + +## 2. Install the library of search components + +Navigate to your Vue app and install `vue-instantsearch`, `@meilisearch/instant-meilisearch`, and `instantsearch.css`. + +```bash +npm install vue-instantsearch @meilisearch/instant-meilisearch instantsearch.css +``` + +- [Vue InstantSearch](https://github.com/algolia/instantsearch/): front-end tools to customize your search environment +- [instant-meilisearch](https://github.com/meilisearch/meilisearch-js-plugins/tree/main/packages/instant-meilisearch): Meilisearch client to connect with Vue InstantSearch +- [instantsearch.css](https://github.com/algolia/instantsearch/tree/master/packages/instantsearch.css) (optional): CSS library to add basic styles to the search components + +## 3. Add InstantSearch + +Include InstantSearch into `main.js` to include the Vue InstantSearch library. + +```js +import { createApp } from 'vue'; +import App from './App.vue'; +import InstantSearch from 'vue-instantsearch/vue3/es'; + +const app = createApp(App); +app.use(InstantSearch); +app.mount('#app'); +``` + +## 4. Initialize the search client + +Use the following URL and API key to connect to a Meilisearch instance which contains data from Steam video games. Add the code below to the `App.vue` file. + +```js + + + +``` + + The `ais-instant-search` widget is the mandatory wrapper that allows you to configure your search. It takes two props: the `search-client` and the [`index-name`](/learn/core_concepts/indexes#index-uid). + + ## 5. Add a search bar and list search results + +Add the `ais-search-box` and `ais-hits` widgets inside the `ais-instant-search` wrapper widget. + +Import the CSS library to style the search components. + +``` + + + +``` + +Use the slot directive to customize how each search result is rendered. + + +Use the following CSS classes to add custom styles to your components: +`.ais-InstantSearch`, `.ais-SearchBox`, `.ais-InfiniteHits-list`, `.ais-InfiniteHits-item` + + +## 6.Start the app and search as you type + +Start the app by running: + +```bash +npm run dev +``` + +Now open your browser, navigate to your Vue app URL (e.g., `localhost:5173`), and start searching. + +![Vue app search UI with a search bar at the top and search results for four video games](/assets/images/react_quick_start/react-qs-search-ui.png) + +Encountering issues? Check out the code in action in our [live demo](https://codesandbox.io/p/sandbox/ms-vue3-is-forked-wsrkl8)! + +## Next steps + +Want to search through your own data? [Create a project](https://cloud.meilisearch.com) in the Meilisearch Dashboard. Check out our [getting started guide](/learn/getting_started/cloud_quick_start) for step-by-step instructions. From 3f924f3e4b1fa4908b79caa50f9dfda79660f66a Mon Sep 17 00:00:00 2001 From: CaroFG Date: Mon, 24 Jun 2024 17:59:51 +0200 Subject: [PATCH 2/5] Add route --- config/sidebar-guides.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/config/sidebar-guides.json b/config/sidebar-guides.json index 8d833672e..032f664c7 100644 --- a/config/sidebar-guides.json +++ b/config/sidebar-guides.json @@ -13,6 +13,11 @@ "label": "React quick start", "slug": "react_quick_start" }, + { + "source": "guides/front_end/vue_quick_start.mdx", + "label": "Vue quick start", + "slug": "vue_quick_start" + }, { "source": "guides/front_end/search_bar_for_docs.mdx", "label": "Add a search bar to your docs", From d78c38ae363e5af7b192224b8b373e05e534785f Mon Sep 17 00:00:00 2001 From: CaroFG Date: Mon, 8 Jul 2024 22:51:12 +0200 Subject: [PATCH 3/5] Add sentence to explain what `npm create` does --- guides/front_end/vue_quick_start.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/guides/front_end/vue_quick_start.mdx b/guides/front_end/vue_quick_start.mdx index 188eef65a..b55bc701e 100644 --- a/guides/front_end/vue_quick_start.mdx +++ b/guides/front_end/vue_quick_start.mdx @@ -7,6 +7,8 @@ description: Integrate a search-as-you-type experience into your Vue app. ## 1. Create a Vue application +Run the `npm create` tool to install base dependencies and create your app folder structure. + ```bash npm create vue@latest my-app ``` From 5d87369de6cab340bcd3bdbdc6e11a9ed70752fe Mon Sep 17 00:00:00 2001 From: CaroFG Date: Mon, 8 Jul 2024 22:52:03 +0200 Subject: [PATCH 4/5] Update alt text --- guides/front_end/vue_quick_start.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guides/front_end/vue_quick_start.mdx b/guides/front_end/vue_quick_start.mdx index b55bc701e..cee7242d1 100644 --- a/guides/front_end/vue_quick_start.mdx +++ b/guides/front_end/vue_quick_start.mdx @@ -124,7 +124,7 @@ npm run dev Now open your browser, navigate to your Vue app URL (e.g., `localhost:5173`), and start searching. -![Vue app search UI with a search bar at the top and search results for four video games](/assets/images/react_quick_start/react-qs-search-ui.png) +![Vue app search UI with a search bar at the top and search results for a few video games](/assets/images/react_quick_start/react-qs-search-ui.png) Encountering issues? Check out the code in action in our [live demo](https://codesandbox.io/p/sandbox/ms-vue3-is-forked-wsrkl8)! From 15233e0cd24ac0bafb6dfcee7aaa14556c49e723 Mon Sep 17 00:00:00 2001 From: CaroFG Date: Mon, 8 Jul 2024 22:56:12 +0200 Subject: [PATCH 5/5] Move URL and API key explanation after code sample --- guides/front_end/vue_quick_start.mdx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/guides/front_end/vue_quick_start.mdx b/guides/front_end/vue_quick_start.mdx index cee7242d1..2b43ace4c 100644 --- a/guides/front_end/vue_quick_start.mdx +++ b/guides/front_end/vue_quick_start.mdx @@ -41,7 +41,7 @@ app.mount('#app'); ## 4. Initialize the search client -Use the following URL and API key to connect to a Meilisearch instance which contains data from Steam video games. Add the code below to the `App.vue` file. +Add the code below to the `App.vue` file. ```js