Page Comparison

...

Steps for customizations

1. Create a subfolder alongside the Vue SDK initialization file (e.g. assets/js/hawksearch/vue/components)

2. Create a ResultItem Vue single file component in it.
   
   assets/js/hawksearch/vue/components/ResultItem.vue

   Code Block
   language js
   <template> <div class="custom-classes" v-on:click="onClick"> <p>{{ customMethod() }}</p> </div> </template> <script> import { ResultItem } from '@hawksearch/vue'; export default { extends: ResultItem, methods: { customMethod: function () { return 'Lorem ipsum'; } } }; </script>

   • Note that in this file both template and scripts are initialized

   • The default ResultItem component is imported from the Vue SDK and the custom one extends it

   • A customMethod is additionally defined for this component

3. The newly created file must be included in the initialization script and attached to his parent
   
   assets/js/hawksearch/vue/index.js

   Code Block
   ... import { ResultListing } from '@hawksearch/vue'; import ResultItem from './components/ResultItem.vue'; ResultListing.components.ResultItem = ResultItem; ...