Page Comparison

Prerequisite

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

Steps for setup

Install the package in your project using the command shell

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

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

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

Code Block

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"],
        },
      ],
    },
    ...
}

Info
To resolve the styles install Webpack css loader plugin:

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

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

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

Versions Compared

Old Version 3

New Version Current

Key

Prerequisite

Steps for setup