Skip to main content
Signature
<ais-powered-by
  // Optional parameters
  theme="string"
  :class-names="object"
/>

​
Import

  • Component
  • Plugin
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
  },
  // ...
};
View demo

​
About this widget

The ais-powered-by widget is used to display the Algolia logo to redirect to our 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>
⌘I