> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Create your widgets
> Learn how you can create a custom widget for your Vue InstantSearch app.
export const FlavorSwitcher = ({current, baseHref = "", options = [], label = "InstantSearch framework"}) => {
if (options.length === 0) {
return
FlavorSwitcher requires at least one option.
;
}
const selected = options.find(option => option.value === current) ?? options[0];
return ;
};
You can build your own components when the provided ones aren't sufficient.
If you're creating a custom InstantSearch widget because you didn't find a built-in option for your use case,
consider [opening a feature request](https://github.com/algolia/instantsearch/discussions/new?category=ideas\&labels=triage\&title=Feature%20request%3A%20) to describe what you're trying to build.
## Existing connectors
Sometimes you might want to create a component which uses a piece of data not provided by any of the widgets.
You also might want to make a custom component for having access to the data in different places than the template.
You can do this with the `createWidgetMixin` function exposed by Vue InstantSearch.
It works together with the [connectors](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/js#customize-the-complete-ui-of-the-widgets) from InstantSearch.js.
Choose the [`connectMenu`](/doc/api-reference/widgets/menu/js) connector for this example.
```vue Vue 3 theme={"system"}
```
```vue Vue 2 theme={"system"}
```
All information from that connector will then be available to your template as well as your other Vue lifecycle methods (after `created`).
All information will be available on `this.state` on your instance, and will be `null` initially
(so make sure your code is safe by wrapping usage in the template for example in an `v-if="state"`).
All connectors expect to be passed widget parameters.
Since these change over the lifecycle of a component, and are usually passed through props, the widget mixin expects a property `widgetParams` on the component's instance.
Create it with a `computed` property, based on props:
```js Vue icon=code theme={"system"}
export default {
// ...
props: {
attribute: {
type: String,
required: true,
},
},
computed: {
widgetParams() {
return {
attribute: this.attribute,
};
},
},
};
```
Use `state` here to filter over the items.
```js Vue icon=code theme={"system"}
export default {
// ...
computed: {
// ...
items() {
// Not needed here if you v-if in the template
// Only labels of three character long allowed
return this.state.items.filter(item => item.label.length === 3)
},
},
};
```
This is also possible with the `transform-items` prop on [`ais-menu`](/doc/api-reference/widgets/menu/vue)).
For more information, see [UI state](/doc/api-reference/widgets/ui-state/vue).
```vue Vue theme={"system"}
```
## Custom connectors
If you want to make your own connector, you can do that using a function with this signature:
```js JavaScript icon=code theme={"system"}
const connector = (renderFn, unmountFn) => (widgetParams = {}) => ({
init({ instantSearchInstance }) {
renderFn(
{
/* Anything you put here comes in this.state */
},
true
);
},
render({ results, instantSearchInstance }) {
renderFn(
{
/* Anything you put here comes in this.state */
},
false
);
},
dispose() {
unmountFn();
},
});
```
That lets you access the lowest level of abstraction,
including the [Algolia search helper](/doc/guides/building-search-ui/upgrade-guides/js#algolia-search-helper).