Tips to Make Your Life More Vue-tiful 😎

This post was made collaboratively with Bram Adams.

Big news! We’re proud to announce our second major release of Vue InstantSearch. We’ve added a lot of helpful optimizations and new features. We’ll keep this short and focus on our favorites. Let’s go ahead and jump into it.

New Vue Widgets!

I love having new toys to play with, don’t you? Vue InstantSearch 2 comes with a slew of new components that will make your search awesome. Here are a few you may find interesting.

Wrap your widgets in a container

The ais-panel is a container widget and can be used to provide a consistent look and feel to your site. You can use this widget to consistently display a header and footer around widgets. Since it will have a ais-Panel--noRefinement class, it also becomes more consistent to hide or display a widget differently if it can’t be used.

Conditionally display results

Ever thought to yourself, I wish I could show these results only sometimes? Well now you can! With ais-state-results, you can choose what to show to your users. It can be used to show a specific “no results” page, or a specific banner when someone refines a particular case.

Showing breadcrumbs

Now where did I leave that shoe again?… Oh right! Using ais-breadcrumb, you are able to allow users to discover paths and give them another way to navigate your products. I use my breadcrumbs in Notion all the time!

Performing inline configuration

The power of configuration. The comfort of staying in Vue! Using ais-configure, you can provide raw search parameters to Algolia. This will allow you to do powerful things on your front end like limit the number of hits returned per query, or only return distinct results.

Display dropdown menus

A powerful widget, the ais-menu-select gives you a dropdown to show menu items that users will be able to interact with. This widget is heavily customizable, allowing you to pre-render the results, giving you a chance to manipulate them before they show up to your users! Tiny dropdown, big potential!

View your applied refinements

The ais-current-refinements widget displays pills for each of the current refinements a user has selected. You as the developer get to decide what subset of attributes are allowed to show up in this widget. See a trend here? Customizability is here to stay!

Showing more results

The ais-infinite-hits widget is pretty aptly named! It gives you the component to add a ‘Show More Results’ button that will show more items when pressed. Just keep scrolling, just keep scrolling…

Create numeric menus

This ais-numeric-menu widget is a pre-configurable widget that creates a radio-button menu of numeric objects that can be used as filters. To use this widget, simply create a list of objects containing different numerical values, like below. Mathematical!

[
  { label: 'All' },
  { label: '<= 10$', end: 10 },
  { label: '10$ - 100$', start: 10, end: 100 },
  { label: '100$ - 500$', start: 100, end: 500 },
  { label: '>= 500$', start: 500 },
]

Toggling a refinement

Wax on, wax off. That is, at least, if “wax” is an Algolia attribute! You can use ais-toggle-refinement to display a toggle-able component. As before, you can edit the CSS classes as well to achieve deep customizability with slot-scope!

New Widget… Names!

What’s in a name? We’ve updated our widgets names to be closer to the rest of our InstantSearch flavors. The full list can be found here, but the main idea is that any experience you have with Algolia InstantSearch in the past should roll over seamlessly.

Server-side rendering (SSR)

We’ve completely revamped the way server-side rendering works with Vue InstantSearch. The capabilities for server-side rendering didn’t change much compared to the previous version, but the main difference is how it is implemented behind the scenes. Instead of waiting until all requests are done (not necessarily always correct), a static method is used to do a back end request. Read more on how to implement SSR in the documentation.

URL synchronization

Previously you would manually have to read and translate each parameter from the “search store” manually and keep it in sync with the URL. This was not an easy process and so we simplified it with a dedicated API. We now map over the parameters to turn them into a URL-friendly format, and provide a way to modify that URL as much as you need. Read more on that in the documentation.

Customization of Widgets

Let’s finish with a feature we are proud to announce. Our widgets are now fully extendable and customizable. We’ll be publishing a second blog on this subject in the near future, but we can give you a few details. To customize a widget, there are now four levels to make this as smooth as possible:

Simple customization

The easiest way to customize a widget is by changing simple text and icons. For this you’ll use regular “slots”. An example is the reset icon on an ais-search-box.

Customizing the complete HTML

If you want to go further with customizing and override the whole HTML output of the component, you can do that too, via the “scoped slot” which is available at the root of each widget. An example would be to use your own component instead of the search box altogether. You’ll get access to the current query, and a function to change the query to the new one (refine).

Using the widget mixin

If you find you also need access to lifecycle methods to data provided to this widget, you can add the widget mixin and use the connectors which are available from InstantSearch.

Matrix-level control

Finally, you can also enter the “ultra-matrix-mode” (as I like to call it) and make your own connectors to encapsulate logic that modifies the search state directly.

Full control at your fingertips! Check out our tutorial on how to customize a widget.

To conclude

From adding widgets to allowing full customizability of their look, feel, and behavior – we’re continuously working to ensure that Vue InstantSearch gives you the best of Algolia’s powerful search technology! Try Vue InstantSearch v2 out now here, or read the documentation.