ais-powered-by

Shows the Algolia logo with a link to the Algolia homepage.

Signature

<ais-powered-by
  // Optional parameters
  theme="string"
  :class-names="object"
/>

Import

Component

To ensure optimal bundle sizes, see Optimize build size.

Vue

import { AisPoweredBy } from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

export default {
  components: {
    AisPoweredBy
  },
  // ...
};

Plugin

This imports all widgets, even the ones you don’t use. For more information, see Get started with Vue InstantSearch.

JavaScript

import Vue from "vue";
import InstantSearch from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

Vue.use(InstantSearch);

See this widget in action

Preview this widget and its behavior.

About this widget

The ais-powered-by widget is used to display the Algolia logo to redirect to the Algolia website.

Algolia requires that you use this widget if you’re on a community plan (open source, not-for-profit, or DocSearch).

Examples

Vue

<ais-powered-by />

Props

theme · "dark" | "light" · default: "light"

The version of the logo to use, legible on light or dark backgrounds.

Vue

<ais-powered-by theme="dark" />

class-names · object · default: "{}"

The CSS classes you can override:

• ais-PoweredBy. The root of the widget.
• ais-PoweredBy--light. The root of the widget with the light theme.
• ais-PoweredBy--dark. The root of the widget with the dark theme.
• ais-PoweredBy-link. The link of the widget.
• ais-PoweredBy-logo. The illustration of the widget.

Vue

<ais-powered-by
  :class-names="{
    'ais-PoweredBy': 'MyCustomPoweredBy',
    'ais-PoweredBy--light': 'MyCustomPoweredByLight',
    // ...
  }"
/>

HTML output

HTML

<div class="ais-PoweredBy">
  <span class="ais-PoweredBy-text">Search by</span>
  <a href="..." class="ais-PoweredBy-link" aria-label="Algolia">
    <!-- <svg> ... </svg> -->
  </a>
</div>