Search by Algolia
How to increase your ecommerce conversion rate in 2024
e-commerce

How to increase your ecommerce conversion rate in 2024

2%. That’s the average conversion rate for an online store. Unless you’re performing at Amazon’s promoted products ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

How does a vector database work? A quick tutorial
ai

How does a vector database work? A quick tutorial

What’s a vector database? And how different is it than a regular-old traditional relational database? If you’re ...

Catherine Dee

Search and Discovery writer

Removing outliers for A/B search tests
engineering

Removing outliers for A/B search tests

How do you measure the success of a new feature? How do you test the impact? There are different ways ...

Christopher Hawke

Senior Software Engineer

Easily integrate Algolia into native apps with FlutterFlow
engineering

Easily integrate Algolia into native apps with FlutterFlow

Algolia's advanced search capabilities pair seamlessly with iOS or Android Apps when using FlutterFlow. App development and search design ...

Chuck Meyer

Sr. Developer Relations Engineer

Algolia's search propels 1,000s of retailers to Black Friday success
e-commerce

Algolia's search propels 1,000s of retailers to Black Friday success

In the midst of the Black Friday shopping frenzy, Algolia soared to new heights, setting new records and delivering an ...

Bernadette Nixon

Chief Executive Officer and Board Member at Algolia

Generative AI’s impact on the ecommerce industry
ai

Generative AI’s impact on the ecommerce industry

When was your last online shopping trip, and how did it go? For consumers, it’s becoming arguably tougher to ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

What’s the average ecommerce conversion rate and how does yours compare?
e-commerce

What’s the average ecommerce conversion rate and how does yours compare?

Have you put your blood, sweat, and tears into perfecting your online store, only to see your conversion rates stuck ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

What are AI chatbots, how do they work, and how have they impacted ecommerce?
ai

What are AI chatbots, how do they work, and how have they impacted ecommerce?

“Hello, how can I help you today?”  This has to be the most tired, but nevertheless tried-and-true ...

Catherine Dee

Search and Discovery writer

Algolia named a leader in IDC MarketScape
algolia

Algolia named a leader in IDC MarketScape

We are proud to announce that Algolia was named a leader in the IDC Marketscape in the Worldwide General-Purpose ...

John Stewart

VP Corporate Marketing

Mastering the channel shift: How leading distributors provide excellent online buying experiences
e-commerce

Mastering the channel shift: How leading distributors provide excellent online buying experiences

Twice a year, B2B Online brings together America’s leading manufacturers and distributors to uncover learnings and industry trends. This ...

Jack Moberger

Director, Sales Enablement & B2B Practice Leader

Large language models (LLMs) vs generative AI: what’s the difference?
ai

Large language models (LLMs) vs generative AI: what’s the difference?

Generative AI and large language models (LLMs). These two cutting-edge AI technologies sound like totally different, incomparable things. One ...

Catherine Dee

Search and Discovery writer

What is generative AI and how does it work?
ai

What is generative AI and how does it work?

ChatGPT, Bing, Bard, YouChat, DALL-E, Jasper…chances are good you’re leveraging some version of generative artificial intelligence on ...

Catherine Dee

Search and Discovery writer

Feature Spotlight: Query Suggestions
product

Feature Spotlight: Query Suggestions

Your users are spoiled. They’re used to Google’s refined and convenient search interface, so they have high expectations ...

Jaden Baptista

Technical Writer

What does it take to build and train a large language model? An introduction
ai

What does it take to build and train a large language model? An introduction

Imagine if, as your final exam for a computer science class, you had to create a real-world large language ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

The pros and cons of AI language models
ai

The pros and cons of AI language models

What do you think of the OpenAI ChatGPT app and AI language models? There’s lots going on: GPT-3 ...

Catherine Dee

Search and Discovery writer

How AI is transforming merchandising from reactive to proactive
e-commerce

How AI is transforming merchandising from reactive to proactive

In the fast-paced and dynamic realm of digital merchandising, being reactive to customer trends has been the norm. In ...

Lorna Rivera

Staff User Researcher

Top examples of some of the best large language models out there
ai

Top examples of some of the best large language models out there

You’re at a dinner party when the conversation takes a computer-science-y turn. Have you tried ChatGPT? What ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What are large language models?
ai

What are large language models?

It’s the era of Big Data, and super-sized language models are the latest stars. When it comes to ...

Catherine Dee

Search and Discovery writer

Looking for something?

facebookfacebooklinkedinlinkedintwittertwittermailmail

Last year, Taylor Otwell, the maker of Laravel, decided to create an official Laravel package named Scout. The package allows Laravel users to add full-text search on top of their existing database without much effort.

I was very happy to notice that Taylor identified search as being something complex that developers would need help with. I was even more excited by the fact that he chose Algolia as the default engine.

Vue.js and Laravel === the perfect mix

In Laravel 5.3, Taylor Otwell chose to power the frontend with the Vue.js framework. Every Laravel app since 5.3 now ships with a ready-to-use Vue.js skeleton.

Because Taylor made that move, Vue.js instantly got my attention. My thought process was that if Taylor chose to ship his backend framework with Vue.js in the frontend, it probably means that Vue.js shares some core values with Laravel. Vue.js is easy to learn, it thrives at empowering developers to add logic to the frontend, and it advances forward quickly.

I remember this one time I opened a very naive PR to adapt the lifecycle of the components in core of Vue.js. Evan You, maker of Vue.js immediately picked it up:

Laravel and Vue.js are each made and driven by a single person. While some might argue this is a disadvantage, I see it as an opportunity to have opinionated people be more innovative and also be more reactive. This is even more true when those people have a very clear idea of where they are going and manage to stay open to the community.

Building a UI components library for Vue.js

Building search on the frontend has the advantage of offloading all search related operations from your Laravel app. Thanks to the Laravel Scout package, little setup is required to send your data to Algolia. I wanted to help developers also benefit from great search experience — this time, on the frontend.

We wanted to create a library that would embody the same principles as Laravel: something users could easily install in existing applications and shape for their own need.

Vue.js offers a very convenient way of creating components in single files. This approach is very readable and makes it easy to reason about the search experience you are building.

So, we ended up bootstrapping a bunch of components that can just be dropped into your Vue.js skeleton. Components will then handle all the logic consisting of listening for user changes and asking Algolia for the new results:

All you need in order to use the above syntax in your own Vue.js application is to actually register the plugin:

How I challenged Vue InstantSearch

After sharing my excitement about this new library, other engineers at Algolia wanted to try it out. They were intrigued by both Vue.js and Vue InstantSearch, so we started writing some documentation in order for them to try out my work.

To allow users to experiment with the library, I created a step-by-step getting started guide. When you reach the bottom of the guide, you have a working instant search experience.

We were really happy when testers told us they managed to get their search up and running in a couple of minutes, even insisting on the fact that they knew nothing about Vue.js previously. At the same time, I have to say that the feedback was largely due to the benefits of Vue.js framework itself, since Vue InstantSearch leverages its available features.

Because of the excitement around the library, and because we had already been invited to speak at the annual Laracon US event, we thought giving a preview of the library at the conference would be a good idea. We didn’t expect much other than to share the idea with the community and get some feedback in advance of the full release.

Maxime Locqueville gave a live coding talk where he explained how to index data with Laravel Scout, and how to leverage Vue InstantSearch. By the end of the 30 minute talk, he had illustrated how to build a fully blown instant-search experience with customized relevance. It was the first time Vue InstantSearch was mentioned in the wild, and then came this:

https://twitter.com/jeffrey_way/status/892150662380888064

Laracasts is the place where Jeffrey Way explains Laravel A-Z. I was really honored that Laracasts didn’t just talk about us, but were the first real Vue InstantSearch users.

To be honest, I was a bit scared that Jeffrey would find blocking issues with the state of the library at that time. He raised some small questions in his first recording which we quickly addressed, and I was also very glad he gave us some more feedback via direct message.

The Vue InstantSearch journey is just starting

Today we have over 100 users and about as much GitHub stars, but the project was still considered unreleased until today, because I wanted to make sure we had the right docs and enough feedback from testers.

This project has been so far the best pre-launch experience I’ve witnessed, largely thanks to  the communities it addresses. I’d also like to give a special mention to my colleague Haroen who has been challenging ideas and reviewing a fair amount of everything that is in Vue InstantSearch. The project would not have been in the current stage without him.

V1 is, of course, just the beginning. Vue.js & Laravel have a strong future and we are excited to be a small part of it. Now, what can we do better? How can we help your use case? We look forward to your feedback: @algolia & @rayrutjes.

About the author
Raymond Rutjes

Software Engineer

githublinkedintwitter

14-day free trial

Create a full-featured search experience in no time.

Get started
14-day free trial

Recommended Articles

Powered byAlgolia Algolia Recommend

Announcing instantsearch.js: Everything you need for great search in one library
product

Alexandre Stanislawski

Connectors, Docs & the Future — a Deeper Look into InstantSearch.js v2
product

Alexandre Stanislawski

Harnessing API’s with React: a different approach
engineering

Alexandre Stanislawski