BigCommerce: Vue SDK - Extend component templates

Overview

All of the available main and inner components are available for modification at a template level. This is usually used when site-specific styles and markup are applied. For this sample, the result item from the list of fetched results is extended.

Steps to extend

Open the initialization file for edit (assets/js/hawksearch/vue/index.js)
Import all components requiring template extending (e.g. ResultItem)

assets/js/hawksearch/vue/index.js
```
...
import { ResultItem } from '@hawksearch/vue';
...
```

Set a template override id for the component

ResultItem.templateOverride = "#vue-hawksearch-result-item";

Place the template override layout alongside the widget template. For the result item this should be the results widget.
templates\components\hawksearch\results.html
```
<div data-hawksearch-component="results">
    <div class="hawk">
        <div class="hawk__body">
            <facet-list></facet-list>

            <results></results>
        </div>
    </div>
</div>

<script id="vue-hawksearch-result-item" type="x-template">
    <div class="custom-classes" v-on:click="onClick">
        <p>\{{ getField('custom_search_field') }}</p>
    </div>
</script>
```
- The script tag contains the new layout for the result item. Note that it is defined by id and therefore should be the only override for this component on a page.
- All Vue.js directives are available for this override. To prevent conflicts with the Stencil theme parser, the fields in {{ }} are escaped.