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

# How to install Vue InstantSearch

> Learn how to install Vue InstantSearch from npm and load it as a Vue plugin in your app.

Install Vue InstantSearch with a packaging system or with a direct link in your web page.

<AccordionGroup>
  <Accordion title="With a packaging system">
    <Steps>
      <Step title="Install Vue InstantSearch from npm">
        If you have a JavaScript build tool (for example if you've created your project using the Vue command-line tool),
        install Vue InstantSearch from npm:

        ```sh Command line icon=square-terminal theme={"system"}
        npm install algoliasearch vue-instantsearch
        ```
      </Step>

      <Step title="Load the package">
        In your `main js` file, load the package as a Vue plugin:

        <CodeGroup>
          ```js Vue 3 theme={"system"}
          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");
          ```

          ```js Vue 2 theme={"system"}
          import Vue from "vue";
          import App from "./App.vue";
          import InstantSearch from "vue-instantsearch";

          Vue.use(InstantSearch);

          new Vue({
            el: "#app",
            render: (h) => h(App),
          });
          ```
        </CodeGroup>

        This lets you use all the widgets directly in your components.
      </Step>
    </Steps>
  </Accordion>

  <Accordion title="Directly in your page">
    <Steps>
      <Step title="Add the two script tags">
        ```html HTML icon=code-xml theme={"system"}
        <script
          src="https://cdn.jsdelivr.net/npm/algoliasearch@5.55.1/dist/lite/builds/browser.umd.js"
          integrity="sha256-g0Nd8wiSAUr/B/jyQM2KP5Nzg6TT/ZOixlFak5RiMc0="
          crossorigin="anonymous"
        ></script>
        ```

        ```html HTML icon=code-xml theme={"system"}
        <!-- For Vue 2 -->
        <script src="https://cdn.jsdelivr.net/npm/vue-instantsearch@4.26.11/vue2/umd/index.js" integrity="sha256-VLZ8Mfj5x6zMtkqieDpYGTHenGnNXvspX4sA3B9uozM=" crossorigin="anonymous"></script>
        ```

        ```html HTML icon=code-xml theme={"system"}
        <!-- For Vue 3 -->
        <script src="https://cdn.jsdelivr.net/npm/vue-instantsearch@4.26.11/vue3/umd/index.js" integrity="sha256-iJTyHxu8EtQTN5jPgRtsXeUZYzgleaOil5XchcdHAac=" crossorigin="anonymous"></script>
        ```
      </Step>

      <Step title="Write your Vue app within your HTML">
        For example in an `#app` div:

        ```vue Vue icon=code theme={"system"}
        <!-- Replace INDEX_NAME with the name of your index. -->
        <ais-instant-search index-name="INDEX_NAME" v-bind:search-client="searchClient">
          <!-- Regular Vue InstantSearch app here -->
        </ais-instant-search>
        ```
      </Step>

      <Step title="Instantiate the plugin and app">
        Add a script tag with the instantiation of the plugin and the app:

        <CodeGroup>
          ```js Vue 3 theme={"system"}
          <script>
            const { liteClient: algoliasearch } = window['algoliasearch/lite'];
            const { createApp } = Vue;

            const app = createApp({
              data() {
                return {
                  // Initialize the search client

                  // Replace ALGOLIA_APPLICATION_ID and ALGOLIA_API_KEY with credentials for your Algolia application.
                  searchClient: algoliasearch(
                    'ALGOLIA_APPLICATION_ID',
                    'ALGOLIA_API_KEY'
                  ),
                };
              },
            });
            app.use(VueInstantSearch);
            app.mount('#app');
          </script>
          ```

          ```js Vue 2 theme={"system"}
          <script>
            const { liteClient: algoliasearch } = window['algoliasearch/lite'];
            Vue.use(VueInstantSearch);

            new Vue({
              el: '#app',
              data: {
                // Initialize the search client

                // Replace ALGOLIA_APPLICATION_ID and ALGOLIA_API_KEY with credentials for your Algolia application.
                searchClient: algoliasearch(
                  'ALGOLIA_APPLICATION_ID',
                  'ALGOLIA_API_KEY',
                ),
              },
            });
          </script>
          ```
        </CodeGroup>
      </Step>
    </Steps>

    [`ais-instant-search`](/doc/api-reference/widgets/instantsearch/vue) is the root Vue InstantSearch component.
    All widgets must be wrapped within it.

    <Note>
      In a production environment, [secure your API keys](/doc/guides/security/security-best-practices#secure-your-api-keys) as environment variables.
    </Note>
  </Accordion>
</AccordionGroup>

## Send click and conversion events

Capturing real-time user interactions as events gives you actionable insights through [click and conversion metrics](/doc/guides/search-analytics/concepts/metrics#click-through-rate),
and they help you increase your customer engagement and conversions.
Events are used to activate Algolia features and products like [NeuralSearch](/doc/guides/ai-relevance/neuralsearch/get-started),
[Dynamic Re-Ranking](/doc/guides/algolia-ai/re-ranking),
[Query Categorization](/doc/guides/algolia-ai/query-categorization),
[Recommend](/doc/guides/algolia-recommend/overview),
and [Personalization](/doc/guides/personalization/classic-personalization/what-is-personalization).

To send click and conversion events when users interact with your search UI, set the [`insights`](/doc/api-reference/widgets/instantsearch/vue#param-insights) option to `true`.

## Optimize your build with tree shaking

Tree shaking can be done with modern build tools. The goal is to have code that's actually used in your built site. In the context of Vue InstantSearch this means not including the widgets that aren't used. You can do this by using the components directly, rather than the `Vue.use(InstantSearch)` call.

In every component you're using InstantSearch widgets, you can import and instantiate them like this:

<CodeGroup>
  ```js Vue 3 theme={"system"}
  import { AisInstantSearch, AisSearchBox } from "vue-instantsearch/vue3/es";

  export default {
    components: {
      AisInstantSearch,
      AisSearchBox,
    },
  };
  ```

  ```js Vue 2 theme={"system"}
  import { AisInstantSearch, AisSearchBox } from "vue-instantsearch";

  export default {
    components: {
      AisInstantSearch,
      AisSearchBox,
    },
  };
  ```
</CodeGroup>

The build tool you're using will then be able to only include the widgets that you're actually using.

## Browser support

Algolia supports the last two versions of the major browsers (Chrome, Edge, Firefox, Safari).

To support [Internet Explorer 11](https://wikipedia.org/wiki/Internet_Explorer_11) you need [polyfills](https://wikipedia.org/wiki/Polyfill_\(programming\)) for:
`Array.prototype.find`, `Array.prototype.includes`, `Promise`, `Object.entries`, and `Object.assign`.

<Note>
  The code samples in this documentation use a JavaScript syntax that isn't natively supported by older browsers like Internet Explorer 11.
  If your site needs to support older browsers, use a tool like [Babel](https://babeljs.io/repl) to make your code work in the browsers you target.
</Note>