Single Page Application with Vue SDK

Overview

The search functionality of the search box and results can be combined in a single widget. This Single Page Application can then be used as an encapsulated entity with all processes and features combined. This approach is useful when the search features need to generally be used as self sufficient widget and have minor dependency with the wrapper environment.

Prerequisite

Steps to create

1. Crete the basic widget configuration described in Creating widgets with Vue SDK

2. Open the template file for editing. This could be a HTML page, or other type of markup generating framework (i.e. CMS). Make sure that the widget initialization file is included.

3. Place the root element on top of which the component should be rendered. This element is accessed in the widget initialization file. For example, an empty <div> with id

   <div id="vue-spa"></div>

    

4. In this root element the component structure of widget should be placed. Any additional elements are also allowed. The inner structure of this widget should basically be combination between the search field and the results widget.

   <div id="vue-spa"> <div class="search-box"> <search-box></search-box> </div> <div class="search-facets"> <facet-list></facet-list> </div> <div class="search-results"> <results></results> </div> </div>

   With this setup all search queries will pass to the results component in the same widget. Facet data updates will also be handled in the same context.

5. Save all the files, re-build and review the page.