Creating widgets with Vue SDK

Overview

Using the Vue SDK package provided by Hawksearch, a variety of widgets can be created, each with its own specific purpose. These widgets will enable access to the search service and ready to use components to be placed on the web page. Depending on the purpose of usage the configuration and the layout is different. Here are some overview examples on how to configure these widgets after you created the basic structure:

Searchbox with Vue SDK

Results widget with search tools with Vue SDK

Single Page Application with Vue SDK

Prerequisite

Steps to create a widget

1. Create a .js file that will contain the configuration code. It should be included in the build process. Open to edit.

2. Include the main package class and styles

   import HawksearchVue from '@hawksearch/vue'; import '@hawksearch/vue/dist/vue-hawksearch.css';

    

3. Select the root element on which the widget will be rendered to. This could be achieved in several ways: by id, class selectors or specific data attribute. It is necessary to do this after the page is fully loaded

   window.addEventListener('load', () => { var el = document.getElementById('vue-app'); // Initialization code ... });

    

4. Create a configuration file for the widget. Again, the properties differ on different use cases, but these are the base one that are always set

   const config = { clientGuid: '9c2a78v6bc9977w0929w88rf576y4476', apiUrl: 'https://searchapi.hawksearch.net/api/v2/search/', dashboardUrl: 'https://dev.hawksearch.net/', indexName: '' }

   These are only for demonstration purposes. Please contact an administrator from Hawksearch for the configuration data.

5. Create the widget with this configuration

    

6. Save, build and view the page