BigCommerce: Vue SDK - Install

Overview

The integration of Hawksearch using Vue.js is done by using the Hawksearch Vue SDK. It is a publicly distributed NPM package that is included as a dependency to the BigCommerce theme. The default Cornerstone theme is used in the following examples.

Prerequisite

Steps to install

1. Install the package in your theme using the command shell

   npm install git+https://github.com/hawksearch/vue-hawksearch.git#latest

2. Create a directory in your assets folder to include Vue.js resources (e.g. assets/js/hawksearch/vue).

3. Create an index.js (e.g. assets/js/hawksearch/vue/index.js). It will include all necessary initializations and custom work that will be included in the later articles. At this point, the main class can be imported at the top of the file.
   
   assets/js/hawksearch/vue/index.js

   import HawksearchVue from '@hawksearch/vue';

4. The initialization script should be included in theme scripts. The recommended approach is to include it in the theme app.js to maintain a single bundle structure. To do this the index.js must include a function export.
   
   assets/js/hawksearch/vue/index.js

   import HawksearchVue from '@hawksearch/vue';
   // Other imports
   
   ...
   
   export default function () {
     // Initialization code goes here  
   }

   
   assets/js/app.js

   ...
   
   // Import the initializor function
   import hawsearchInitialize from './hawksearch/vue';
   
   ...
   
   window.stencilBootstrap = function stencilBootstrap(pageType, contextJSON = null, loadGlobal = true) {
       const context = JSON.parse(contextJSON || '{}');
   
       return {
           load() {
               $(() => {
                   // Load globals
                   if (loadGlobal) {
                       Global.load(context);
                   }
   
                   ...
                   
                   // Call the init function on load after the rest
                   // of the script loads
                   hawsearchInitialize();
               });
           },
       };
   };

5. The package has default styles that are available from @hawksearch/vue/dist/vue-hawksearch.css and should be included and used as a base for further development.

6. Run the stencil development environment to build the resources and review progress.
   Live Previewing a Theme - Stencil CLI - Stencil Docs

Next steps

BigCommerce: Vue SDK - Setup configuration