Getting Started with searchstudio-ux-vue


For a full example, see searchstudio-ux-vue.


Install the searchstudio-ux-vue package:

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

Import and Register Components

Import and globally register the SearchStudio components:

import { SearchstaxWrapper, SearchstaxInputWidget } from '@searchstax-inc/searchstudio-ux-vue';

Vue.component('SearchstaxWrapper', SearchstaxWrapper);
Vue.component('SearchstaxInputWidget', SearchstaxInputWidget);

Wrapper Component

Wrap all other SearchStudio components within the SearchstaxWrapper component:


<!-- Other SearchStudio components here -->



Pass search configuration to the SearchstaxWrapper component:


Initialization example:

sampleConfig = {
    language: "en",
    searchURL: "",
    suggesterURL: "",
    trackApiKey: "",
    searchAuth: "",
    authType: "basic",
    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;

Initialization object needs to be of type: ISearchstaxConfig

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

Add any SearchStudio components needed:


  <SearchstaxInputWidget />

  <SearchstaxResultsWidget />

<!-- Other components -->



Import the CSS styles:

@import '@searchstax-inc/searchstudio-ux-vue/dist/styles/mainTheme.css';

See the Styling section for information on theming and customization.