Page Comparison

...

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

   Code Block
   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

   Code Block
   language 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

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

   
   assets/js/app.js

   Code Block
   language 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 vue instance is also required for any additional customization, so it is a good practice to add it to the webpack config.
   
   webpack.common.js

   Code Block
   language js
   module.exports = { ... resolve: { alias: { ... 'vue$': 'vue/dist/vue.esm.js' } } };

6. 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.

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

...