Overriding components

Overview

All components existing in the Vue SDK are exposed and can be extended or overridden. This allows the logic and structure to be adjusted to needs of the widgets and to customize the overall behavior. Compared to extending templates, this is the more advanced approach to modify the component that includes not only layout, but also functionality and structure modifications.

Prerequisite

Steps to extend components

1. Create a components folder in the projects vue directory on the same level as the widgets folder

2. Create a component file with .vue extension (e.g. ResultItem.vue) and open for edit. This file should follow the structure of Vue.js single file components

3. In the <script> section import the same component

   import { ResultItem } from '@hawksearch/vue';

    

4. Make the required adjustments. For example creating a computed properties for some of the fields

   export default { extends: ResultItem, computed: { title: function () { return this.getField('title'); }, content: function () { return this.getField('content'); } } };

   1. Note that the package component is passed to the extends field

    

5. Save the file. Now we can directly use the computed properties in the template

   <div><h3>{{ title }}</h3></div> <div>{{ content }}</div>

    

6. Go through the steps for creating a widget (e.g. SPA)

7. On top of the usual configuration, import the newly created component

    

8. The ResultItem component is included in the ResultListing. At this point the used component is from the package and should be swapped with the new extended one

   1. Import the ResultListing from the package

       

   2. Change the component’s reference

       

9. From here, the new custom component will be rendered instead of the default. Save, re-build and preview the page.