Requirements and setup

📘

Prerequisites

• Node.js version 11.0.0 or higher
• NPM version 6.0.0 or higher

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 inwebpack.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']
    },
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: ["style-loader", "css-loader"],
        },
      ],
    },
    ...
}

📘

To resolve the styles install Webpack css loader plugin:

npm install --save-dev style-loader  
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)