/
Creating widgets with Vue SDK

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

 

Mobile support features are dependant on the configuration of the page the widget is placed on. Make sure that the following tag is available in the <head> of the page:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

 

Related content

Development reference: List of Vue.js components
Development reference: List of Vue.js components
Read with this
Enable Vue.js for Hawksearch results widget
Enable Vue.js for Hawksearch results widget
More like this
Enable Vue.js for Hawksearch box widget
Enable Vue.js for Hawksearch box widget
More like this
Customize search results in Vue.js
Customize search results in Vue.js
More like this
Customize search box in Vue.js
Customize search box in Vue.js
More like this
Searchbox with Vue SDK
Searchbox with Vue SDK
More like this