## Integrating Yext Answers API with Vue.js The primary aim of this article is to show you how Yext Answers API can be integrated into a Vue.js app. The demonstration uses Vue 3, and [Vite](https://vitejs.dev/) is used for scaffolding the app. The app is designed using [Tailwind CSS](https://tailwindcss.com/). Note, however, that neither Vite nor Tailwind is a requirement for the app. This example uses an Answers experience that can answer questions about how to make different beverages. Check out [Yext Hitchhikers](https://hitchhikers.yext.com/?utm_source=draftdev&utm_campaign=hitchhikers&utm_countent=yext-answers-in-vuejs), where you can make a sandbox account to experiment with adding your own data. Now let's move on to integrating Yext Answers using Vue 3. ### Scaffolding a Vue 3 App and Installing Dependencies As mentioned, Vite is used to scaffold the application in this article. Vite is often the better alternative to frontend tools like Webpack, Rollup, and Parcel. For one, Vite provides a quick and easy-to-use environment that doesn’t require long builds to get started. For another, it also addresses the problem of slow server start and makes the server start faster. [Vite documentation](https://vitejs.dev/guide/why.html) lays out more information about the benefits of using Vite. To scaffold a new Vue project using Vite, run the following command in your terminal: ```go npm create vite@latest ``` After running the command, it'll ask you to specify a package name and the template you want to use. Select **Vue** for the template, and it'll use Vue 3 by default. As the scaffolding process completes, enter `cd` into the directory and run `npm i` to install the dependencies. Then run the server with `npm run dev`. Your server will start on localhost. The only necessary dependency needed for this article is the `@yext/answers-core`. To install it, run the command `npm i @yext/answers-core` in your terminal. Other than that, Tailwind CSS is used to design the app. To better understand how Tailwind can be added to this app, follow the [guide to installing Tailwind CSS with Vue 3 and Vite](https://tailwindcss.com/docs/guides/vite). ### Building a Universal Autocomplete Component This article will showcase how the Answers core SDK can be used. Create a new file called `UniversalAutocomplete.vue` in the `components` directory inside the `src` folder. Before adding the universal autocomplete feature, you should first review the created file: ```jsx ``` Focusing on the `script`, the first step is to import the necessary objects. The `ref` and `watchEffect` are imported from `vue`, followed by `provideCore`, which is imported from `@yext/answers-core`. The Answers Core is then initialized in the `core` variable. The `provideCore` function takes a [`AnswersConfig`](https://github.com/yext/answers-core/blob/master/docs/answers-core.answersconfig.md?utm_source=draftdev&utm_campaign=hitchhikers&utm_countent=yext-answers-in-vuejs) object as a parameter that needs to include an apiKey, experienceKey, and locale. > :bulb: > If you're using a Yext sandbox account, you'll also need to pass the [sandbox endpoints](https://hitchhikers.yext.com/community/t/best-practice-for-developing-against-answers-headless-react-and-hh-sandbox/3877?utm_source=draftdev&utm_campaign=hitchhikers&utm_countent=yext-answers-in-vuejs) to Answers Core. The `setup` script is the entry point for using the [composition API](https://vuejs.org/api/composition-api-setup.html). Inside the `setup` function, the `searchTerm` value, the `selectedResult` value and the `result` value are initialized using `ref`. The next step is to create a function that will return the search results. The function is named `searchResults`, and it uses the `watchEffect` hook. The `watchEffect` hook is introduced in the Vue 3 composition API. This [watchEffect hook](https://vuejs.org/api/reactivity-core.html#watcheffect) runs a function immediately while reactively tracking its dependencies. Because the API call is asynchronous, `async-await` is used. The first step inside this function is to check if the `searchTerm` is empty. The `searchTerm` is bound with the input field using `v-model= "searchTerm"`. If the input field is empty, the result is assigned to an empty array. Otherwise, the code moves forward. The `answers-core` library uses the `universalAutocomplete` method to get the autocomplete results. The process takes an object as a parameter where the only required parameter is the `query`. The `searchTerm` value, received from the input field is passed in the `query` key. The result returned from the SDK is stored inside the `result` ref. The `selectResult` function below the `searchResults` function is used to call the [`universalSearch`](https://github.com/yext/answers-core/blob/master/docs/answers-core.answerscore.universalsearch.md?utm_source=draftdev&utm_campaign=hitchhikers&utm_countent=yext-answers-in-vuejs) method. This method is used to search across all verticals. Depending on a selected search result, this function is called to get data depending on the query. The `universalSearch` method also needs a single necessary parameter, i.e., the query. The selected result from the `universalAutocomplete` is passed as the query. The received results are stored in the `r` variable. You can see the received result by console logging the variable. The `r` variable holds a lot of data. For simplicity in this article, you’ll only use a few values from the result. When an autocomplete search result is selected, the description received from the `universalSearch` method will be shown to the user. Because the `universalSearch` method is used to search across all verticals; results received from all the verticals will be merged into a single array. The aim is to show the description and name of each search result. ![vue autocomplete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dyv9sly1ard4vwne7rbb.gif) You can also create separate tabs for search results depending on the verticals. Each vertical holds the results in an array. To merge the results into a single array, an empty array called `ansArr` is defined. The `verticalResults` object holds all the vertical results. The `reduce` method is used in this object. The [`reduce method`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) is a higher-order JavaScript function that executes a reducer function on each array element and returns a single value. On each element, another `forEach` loop is run because each element holds an array that contains the results. The image below will help you better understand the structure of the data. ![Yext Answers Universal Search Results](https://imgur.com/mCaV1Rx.jpg) Inside the `forEach` loop, if an object description is not empty, the result is pushed into the `ansArr` array. Once the single array is generated, the `selectedResult` is initialized with the array. You can now show the results in the DOM. But before moving to show the data, one last step needs to be taken. Whenever a result is selected and the description is shown, you need to hide the search results. A simple `display: none;` property is added to the autocomplete search results using JavaScript. To display the autocomplete results, an unordered list is used. The unordered list is only displayed when the `result.results` array is not undefined. The condition is tested using [`v-if`](https://vuejs.org/guide/essentials/conditional.html). ```jsx

Showing {{ result.results.length }} results

``` The first `li` item shows the number of search results. The second list item holds the autocomplete results And renders all the results using a `v-for` loop. Whenever a search result is clicked, the `selectResult` function is called, and the selected value is passed into the function. The explanation of the function is described above. Similar to rendering the autocomplete results, the universal search results are also displayed using an unordered list. Only the `name` and the `description` from the results are shown. Yext Answers also provides the search data in HTML format to make the query bold in the results. To render the raw HTML queries [`v-html`](https://vuejs.org/guide/essentials/template-syntax.html#raw-html) is used. If you import the `UniversalAutocomplete` component to your `App.vue` file and render it, you'll be able to search the available questions. The `App.vue` file should look like this: ```jsx ``` You can similarly make a vertical autocomplete component using the [vertical autocomplete](https://github.com/yext/answers-core/blob/master/docs/answers-core.answerscore.verticalautocomplete.md?utm_source=draftdev&utm_campaign=hitchhikers&utm_countent=yext-answers-in-vuejs) method. The universal search and the universal autocomplete features are shown in the example code, which has been written using the required parameters only. You can customize your search even more using the parameters. You can visit [sandbox](https://stackblitz.com/edit/github-rxqfix?file=README.md) or [GitHub](https://github.com/nemo0/yext-answers-autocomplete) to explore how the searches are implemented. ## Conclusion This article covered the basics of integrating Yext Answers with a Vue 3 app. It also covered how a Yext Answers Experience can be set up. The article's primary aim was to help you get started with the Yext Answers API. If you want to know more about the API and delve deeper, you can create a [Yext Hitchhikers account](https://hitchhikers.yext.com/?utm_source=draftdev&utm_campaign=hitchhikers&utm_countent=yext-answers-in-vuejs), which can help you learn and experiment with an array of Yext products. Credits: This article was first published on [Yext Hitchhikers](https://hitchhikers.yext.com/guides/getting-started-with-answers-in-vue?utm_source=draftdev&utm_campaign=hitchhikers&utm_countent=yext-answers-in-vuejs) by Subha Chanda.

eee_molly

Getting Started With the Yext Answers API in VueJS

Join Our Newsletter. No Spam, Only the good stuff.