vue-funnelback-component

Vue Funnelback component (WIP)

A lightweight client-side Vue foundation for your next Funnelback project. Its recommended usage is with the Squiz Webpack Boilerplate.

Note: this is still an MVP and it's not recommended for production use

Installation

npm install vue-funnelback-compoment

Usage

Below are the steps on how to use the components after running the above install steps.

Import the scripts

To use the components in your website you will need to import the scripts into your application using the ES6 syntax.

import vueFbSearch from 'vue-funnelback-compoment';

Then you need to initailise the scripts like so:

// Initialise the search
vueFbSearch();

Vue and Webpack

You may get a Vue error in the console saying that:

This is because we are using the Runtime-only version of Vue but require the Full (Runtime + Compiler) version. To fix this we need to tell Webpack where to find the full version of Vue in the node_modules directory. Edit your Webpack config like so:

resolve: {
    alias: {
      'vue$': Path.resolve(__dirname,'../node_modules/vue/dist/vue.esm.js')
    }
  }

Wrap your app

You will need to wrap the custom elements (components) in the a div with the following ID:

<div id="funnelback_app">
<!-- Components -->
</div>

Add the components to a page, passing the required arguments.

To add the mark up to your application simply add the custom tags below. The markup works best out the box with Bootstrap 4 and in the order listed below. The funnelback-facets component is optional, while the other two are required.

Funnelback search input

Adding this component will add the search bar to your application. There is no submit button, it responds on "enter".

You will need to add the following props to the component:

• url - This is required, this expects the JSON endpoint for the Funnelback search
• collection - This is required, this expects a valid collection name associated with the url provided
• per-page - This is optional, the default is 10 items per page ( the "pages" or lazy loaded )

<funnelback-search url="https://.../s/search.json" collection="my-collection" per-page="10">
</funnelback-search>

<funnelback-facets>
</funnelback-facets>

<funnelback-results>
</funnelback-results>

Features

• Ajax search
• Supports facets
• Lazy load
• URL changes as search