/
Vue SDK requirements and setup

Vue SDK requirements and setup

Prerequisite

  • 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 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'] }, 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)

 

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

 

Related content

Extending templates
Extending templates
Read with this
Creating widgets with Vue SDK
Creating widgets with Vue SDK
More like this
Example: Change from pagination to continuous loading
Example: Change from pagination to continuous loading
Read with this
Vue SDK
Vue SDK
More like this
BigCommerce: Vue SDK - Install
BigCommerce: Vue SDK - Install
More like this
Customisation
Customisation
More like this