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.

$3

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


`javascript
import vueFbSearch from 'vue-funnelback-compoment';
`
Then you need to initailise the scripts like so:
`javascript
// Initialise the search
vueFbSearch();
`

$3

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:
`javascript
resolve: {
alias: {
'vue$': Path.resolve(__dirname,'../node_modules/vue/dist/vue.esm.js')
}
}
`



$3


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

`

$3

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 )

`html


`

`html


`

`html


``

Features

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