This package provides components and integration processes to Hawksearch using Vue.js.
Please contact Hawksearch personnel for additional information on service settup https://www.hawksearch.com/
Install the latest package version usnig npm
$ npm install git+https://github.com/hawksearch/vue-hawksearch.git#master
In some cases you may need a specific version
$ npm install git+https://github.com/hawksearch/vue-hawksearch.git#v0.9.94
Add the widget layout to the markup file - in this case, an SPA widget with all components
<div id="hawk-vue-app">
<div class="hawk">
<div class="hawk__header">
<search-box></search-box>
</div>
<div class="hawk__body">
<facet-list></facet-list>
<results></results>
</div>
</div>
</div>
Create a dedicated .js file for the widget and include the library's main class and styles
import HawksearchVue from '@hawksearch/vue';
import '@hawksearch/vue/dist/vue-hawksearch.css'
Then set the necessary configurations. The values for these should be provided by a Hawksearch representative
const config = {
clientGuid: '1234567890',
apiUrl: 'https://searchapi.hawksearch.net/api/v2/search/'
}
Create the widget after all resources are loaded
window.addEventListener('load', () => {
HawksearchVue.createWidget(document.getElementById('hawk-vue-app'), { config });
});