November 16, 2023

Tyler Huff

|

7 min. read

Build engaging site search with SearchStax Studio and our new Search UI Kit. Learn how to build dynamic search front ends in Vue that integrate with your site design, technology, and delivery process.

In today’s digital environment, search functionality is not just a nice-to-have, but a must-have. Be it healthcare systems aiming to provide quick access to patient resources, higher education platforms needing to sift through vast educational resources, or government portals that require efficient public document retrieval — search is at the heart of user experience.

SearchStax Studio now includes the Search UI Kit – a collection of customizable front end components, pre-built search experiences, and APIs for building dynamic and headless front ends in popular frameworks such as Vue. If you have a headless Drupal implementation, SearchStudio-UX-Vue is the library that meets these needs effectively.

Building Site Search with a Vue App

The primary goal of the SearchStudio-UX-Vue package is to simplify the development of search UIs in Vue.js applications. It takes care of frontend complexities and UI intricacies as well as API authentication and requests, so you can focus on delivering an outstanding user experience that fit seamlessly with your site design and technology. With a range of pre-designed Vue components like search boxes, filters, and result displays, you can effortlessly assemble sophisticated search interfaces as a stand-alone Vue-powered search page or as part of a larger Vue headless application.

Key Features

  • Full Integration with SearchStax Studio – Leverage powerful search features like typo tolerance, synonyms, and facets without diving into the complexities of UI implementation.
  • Ready-made Components – Use predefined Vue components that are both performant and accessible out of the box.
  • Customizable – Adjust styles and behaviors to make these components truly yours, aligning them perfectly with your brand identity.

Why Use SearchStudio-UX-Vue?

  • Performance – The components are optimized for high-speed performance, ensuring a smooth user experience.
  • Accessibility – Built with accessibility in mind, ensuring compliance with key standards.
  • Development Speed – Why build from scratch when you can piece together a powerful search UI in minutes?
  • Vue.js Compatibility – If you’re already working with Vue.js, incorporating SearchStudio-UX-Vue is a breeze.

Installing Search UI Components for Vue

Getting started with SearchStudio-UX-Vue is incredibly simple. You can add Search UI Components to an existing or new Vue app using NPM.

				
					npm install --save @searchstax-inc/searchstudio-ux-vue
				
			

Setting Up in a Vue Project​

In order to use Search UI Components in Vue you’ll need to import the required components and interfaces and then register them globally in your Vue.js application.

				
					import { SearchstaxWrapper, SearchstaxInputWidget } from '@searchstax-inc/searchstudio-ux-vue';
Vue.component('SearchstaxWrapper', SearchstaxWrapper);
Vue.component('SearchstaxInputWidget', SearclhstaxInputWidget);
				
			

Customizing Search UI Components

The SearchStaxWrapper component handles configuration, API connections, and state management for your search experience. Individual search components will need to be included within SearchStaxWrapper to respond to user actions and receive search result data.

				
					<SearchstaxWrapper>
<!-- Other SearchStax Studio components here -->
</SearchstaxWrapper>

				
			

Configuration and Initialization

Before you can dive into crafting your search UI, you’ll need to configure search fields in SearchStax Studio and include your account endpoints and tokens in your Vue application.

You can access your SearchStax Studio APIs and authentication tokens by logging into SearchStax Studio and navigating to ‘Settings’ for your search app. From there you can access the Search API, Discovery API, and Analytics API endpoint URLs and authentication tokens. Only use read-only tokens in your front end as they’ll be exposed in your source code and any search API requests.

				
					<SearchstaxWrapper
    :language="sampleConfig.language"
    :searchURL="sampleConfig.searchURL"
    :suggesterURL="sampleConfig.suggesterURL"
    :trackApiKey="sampleConfig.trackApiKey"
    :searchAuth="sampleConfig.searchAuth"
    :authType="sampleConfig.authType"
    :router="sampleConfig.router"
    :beforeSearch="sampleConfig.hooks.beforeSearch"
    :afterSearch="sampleConfig.hooks.afterSearch"
  >
  </SearchstaxWrapper>
				
			

Initialization example

				
					sampleConfig = {
    language: "en",
    searchURL: "", // SearchStax Studio Search API Select endpoint
   suggesterURL: "", // SearchStax Studio Search API Auto-Suggest endpoint,
    trackApiKey: "", // SearchStax Studio Analytics API token
    searchAuth: "", // SearchStax Studio Search API Read-Only token
    authType: "token",
    router: {
      enabled: true,
      routeName: "searchstax",
      title: (result: ISearchObject) => {
        return "Search results for: " + result.query;
      },
      ignoredKeys: [],
    },
    hooks: {
      beforeSearch: function (props: ISearchObject) {
        const propsCopy = { ...props };
        return propsCopy;
      },
      afterSearch: function (results: ISearchstaxParsedResult[]) {
        const copy = [...results];
        return copy;
      },
    }
  };
				
			
The initialization object needs to be of type: ISearchStasxConfig
				
					interface ISearchstaxConfig {
  language: string; // language code. Example: 'en'
  searchURL: string; // SearchStudio select endpoint
  suggesterURL: string; //SearchStudio suggest endpoint
  trackApiKey: string; // Api key used for tracking events
  searchAuth: string; // Authentication value. based on authType it's either a token value or basic auth value
  authType: "token" | "basic"; // Type of authentication
  autoCorrect?: boolean; // if set to true it will autoCorrect misspelled words. Default is false
  router?: IRouterConfig; // optional object containing router settings
  hooks?: {
    // optional object that provides various hook options
    beforeSearch?: (props: ISearchObject) => ISearchObject | null; // this function gets called before firing search. searchProps are being passed as a property and can be modified, if passed along further search will execute with modified properties, if null is returned then event gets canceled and search never fires.
    afterSearch?: (results: ISearchstaxParsedResult[]) => ISearchstaxParsedResult[]; // this function gets called after firing search and before rendering. It needs to return array of results that are either modified or untouched.
  };
}

				
			

Adding Components

Creating a search UI is as simple as including the desired components in your Vue.js templates.
				
					<SearchstaxWrapper>
 	<SearchstaxInputWidget />
 	<SearchstaxResultsWidget />
 	<!-- Other components -->
 </SearchstaxWrapper>
				
			
Components can be customized with additional functionality and styling as needed. You can also create multiple implementations of the individual Search UI Components for different search experiences, templates, and styles.

Styling

For those looking to customize the visual aspect further, the library provides easily importable CSS.
				
					@import '@searchstax-inc/searchstudio-ux-vue/dist/styles/mainTheme.css';
				
			
You can also use your own component and styling libraries so that your search components will follow the same styling conventions as other components in your Vue app while using the same interface, theme, or styling process.

Drupal Integration - Stand-Alone Vue app or Fully Headless

You can use Search UI Components to build a stand-alone Vue app within Drupal or go fully headless. A basic stand-alone Vue app can provide a responsive and interactive search page without needing to modify the rest of your Drupal site.

With Drupal’s recent enhancements to its JSON API—offering features like improved pagination and advanced filtering—integrating state-of-the-art search functionalities becomes more seamless than ever. SearchStudio-UX-Vue complements these advancements by providing ready-to-use Vue.js components that handle a multitude of search functionalities. The result is a more interactive and efficient user experience, making it a fitting addition to Drupal setups across different verticals.

Building SearchStax Studio for Drupal

Search UI Components give your front end and dev-ops team the flexibility to build and deploy site search in a variety of different environments and deployment processes. You can utilize Vue to handle all front end experiences or mix Vue with other CMS and content rendering workflows.

  • Fully Headless – Search UI Components can be utilized in a completely headless and decoupled configuration with your Vue app deployed and served from its own environment (e.g. multi-region EC2 instance on AWS)
  • Hybrid Headless – Search experience and other dynamic app features can be hosted in a Vue app with static content delivered by Drupal or another CMS
  • Embedded App – Build a stand-alone Vue app that includes Search UI Components and embed the Vue app and related external resources (JavaScript, CSS, etc) in a Drupal page or module (See the SearchStax DrupalCon Lille demo on Github for an example)

Comparison with Other Libraries

While there are numerous search UI libraries out there, SearchStudio-UX-Vue distinguishes itself with its comprehensive integration with SearchStudio features, ease of use, and flexibility. It provides the best of both worlds by combining the robust backend capabilities of SearchStudio with the reactive frontend magic of Vue.js.

Conclusion

If you’re in the market for a search UI solution that is fast, user-friendly, and easy to implement, look no further than SearchStudio-UX-Vue. So go ahead, give it a spin, and take your search user experience to the next level.
What is Vue?

Vue is a JavaScript-powered front end framework. Vue allows front end developers to build dynamic and reactive user interfaces with reusable components.

What are the benefits of SearchStax Studio?

SearchStax Studio includes easy content indexing with native CMS integration, APIs, and crawlers. SearchStax Studio includes search customization with relevance modeling, faceting, auto suggest, related searches, and analytics.

What CMS system do I have to use with Vue?

Vue is not tied to any specific content management system so you can build a Vue app that’s integrated within your CMS or create a headless experience using Vue and content APIs in your CMS.

What is a headless CMS system?

A headless CMS system is a content management system that decouples the content from the presentation layer, meaning that you can store your content in one place and deliver it to any platform or device via an API.

What are the advantages of a headless CMS system over a traditional CMS?

A headless CMS system has many advantages over a traditional CMS system:

  • Allows you to use any front-end framework or technology including Vue, React, Angular or plain HTML and CSS
  • Enables you to deliver your content to multiple channels
  • Improves website performance by reducing server load and only delivering the content needed for each request
  • Enhances your website security my minimizing the ‘attack surface’

By Tyler Huff

Solutions Engineer in Pre/Post Sales

"You can use Search UI Components to build a stand-alone Vue app within Drupal or go fully headless"

Get the Latest Content First