Vue SDK requirements and setup

Prerequisite

Steps for setup

1. Install the package in your project 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 all Vue.js resources (e.g. assets/js/vue).

3. Create an index.js at a root level and add it as an entry file in webpack.config.js

   module.exports = {
       entry: {
           main: [
               './assets/src/js/vue/index.js'
               ...
           ]
       },
       resolve: {
           alias: {
               'vue$': 'vue/dist/vue.min.js',
               src: path.resolve(__dirname, 'src')
           },
           extensions: ['*', '.js', '.vue', '.json']
       },
       ...
   }

npm install --save-dev css-loader

4. Create widgets folder in resource directory (e.g. assets/js/vue/widgets) Creating widgets with Vue SDK

5. Add all widget references in index.js (if there aren’t any created, add these later)

import "./widgets/search-box";
import "./widgets/search-results";

6. Build the JS resources accordingly (e.g. npm run build)