馃帀 Try the public beta of the new docs site at algolia.com/doc-beta! 馃帀
UI libraries / Vue InstantSearch / Widgets

ais-powered-by

Signature 
<ais-powered-by
  // Optional parameters
  theme="string"
  :class-names="object"
/>
Import
Copy 
1
2
3
4
5
6
7
8
9

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

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

1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you don鈥檛 use. Read the Getting started guide for more information.

See code examples
See live example

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鈥檙e on a community plan (open source, not-for-profit, or DocSearch).

Examples

Copy 
1

<ais-powered-by />

Props

Parameter Description
theme
type: string ("dark"|"light")
default: light
Optional

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

<ais-powered-by theme="dark" />
class-names
type: object
default: {}
Optional

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.
Copy 
1
2
3
4
5
6
7

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

HTML output

Copy 
1
2
3
4
5
6

<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>
Did you find this page helpful?
Vue InstantSearch v4