> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Redirects in Vue InstantSearch

> Learn how to add redirects on specific searches with Vue InstantSearch.

export const SearchQuery = () => <Tooltip tip="The text users enter into a search box. In the Search API, this corresponds to the query parameter. A search query is often used with filters, facets, and other parameters, but these aren't part of the query text itself.">
    search query
  </Tooltip>;

Redirects can enhance the search experience. For example:

* Searching for "help" redirects users to a support page
* Searching for a category, such as, "TV" redirects users to a category page
* Searching for a specific product or brand redirects users to a seasonal promotional page for it
* Searching for specific keywords related to an ongoing event, such as, "masks", redirects users to a more specific landing page

This guide explains how to add redirects to InstantSearch through [Rules](/doc/guides/managing-results/rules/detecting-intent) and using custom data.

Redirects are handled by Autocomplete's [redirect plugin](/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-redirect-url).
However, if you don't use [Autocomplete](/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete), you must handle redirects in InstantSearch:

* If a redirect was created in the Manual Editor, [handle it with InstantSearch's `queryRuleCustomData` widget](#handle-a-manual-editor-rule-redirect).
* If a redirect was created in the Visual Editor, you must [create a custom InstantSearch widget to handle redirects](#handle-a-visual-editor-rule-redirect).

## Handle a Visual Editor rule redirect

### Configure the redirect with a custom widget

If a redirect was created in the Visual Editor, the API response contains the `renderingContent.redirect` property which, in turn, contains the redirect `URL`.
To access this property from InstantSearch, you must create a custom widget.

Custom widgets have [lifecycle hooks](/doc/guides/building-search-ui/widgets/create-your-own-widgets/vue#existing-connectors) for each of the widget stages: `init`, `render`, and `dispose`.
The `render` stage runs when Algolia sends results: in other words, when a user types something.

Use it as follows:

```html Vue theme={"system"}
<template />
<script>
import { createWidgetMixin } from 'vue-instantsearch/vue3/es';
// Use 'vue-instantsearch' for Vue 2

export default {
  mixins: [
    createWidgetMixin({
      connector: (renderFn) => () => ({
        dispose() {},
        render({ results }) {
          const url = results?.renderingContent?.redirect?.url;
          if (url) {
            location.href = url;
          }
          renderFn({ url }, false);
        },
      }),
    }),
  ],
  computed: {
    url() {
      return this.state?.url;
    },
  },
};
</script>
```

## Handle a Manual Editor rule redirect

If a redirect was created in the Manual Editor, handle it with InstantSearch's [`ais-query-rule-custom-data`](/doc/api-reference/widgets/query-rule-custom-data/vue) widget.

### Configure a rule

To set up a rule that returns custom data whenever the <SearchQuery /> matches specific keywords,
see [Create a rule for returning custom data](/doc/guides/managing-results/rules/merchandising-and-promoting/how-to/redirects#create-a-rule-for-returning-custom-data).

### Configure the `queryRuleCustomData` widget

After setting up a rule that returns the custom redirect data, you can use the [`ais-query-rule-custom-data`](/doc/api-reference/widgets/query-rule-custom-data/vue) widget to update the page location when `userData` contains a redirect.

```html HTML theme={"system"}
<template>
  <ais-query-rule-custom-data :transform-items="transformItems" />
</template>

<script>
export default {
  methods: {
    transformItems(items) {
      const match = items.find(data => Boolean(data.redirect));
      if (match && match.redirect) {
        window.location.href = match.redirect;
      }
      return [];
    },
  },
};
</script>
```

### Offer a suggested redirect rather than a hard redirect

The preceding is an example of a "hard redirect", which forces users to a specific URL. This works in most situations, but sometimes you might want to suggest a redirect URL rather than force it onto them.

To do this, create the rule similarly but distinguish between "hard" and "suggested" redirects by ensuring the returned data is a JSON object. The object's properties are:

* **name** (used to display the link)
* **URL**
* **force** (`true` for a hard redirect, `false` for a suggested redirect).

```json JSON icon=braces theme={"system"}
  { 
    "redirect": {
      "name": "help",
      "url": "https://www.algolia.com/support",
      "force": true
    }
  }
```

With this change applied, the [`ais-query-rule-custom-data`](/doc/api-reference/widgets/query-rule-custom-data/vue) widget that had been previously defined needs updating to decide what happens to a user based upon the returned data.

To do this, the redirect check (within `transformItems`) needs updating to decide whether to force the redirect onto users or not.
The default template also needs setting to display a user message with the specific redirect URL.

```diff JavaScript theme={"system"}
  search.addWidgets([
  instantsearch.widgets.queryRuleCustomData({
    container: '#queryRuleCustomData', 
    templates: {
-      default: '',
+      default({ items }, { html }) {
+        const customData = items.find(data => Boolean(data.redirect));
+
+        if (!customData) {
+          return null;
+        }
+
+        return html`
+          <div>
+            <a href="${customData.redirect.url}">
+              Click to view more on: '${customData.redirect.name}'
+            </a>
+          </div>
+       `;
+     },  
    },
    transformItems(items) {
      const match = items.find(data => Boolean(data.redirect));
-      if (match && match.redirect) {
+      if (match && match.redirect && match.redirect.force) {
        window.location.href = match.redirect;
+       return [];
      }

-      return [];
+      return items;
    },
  })
]);
```