vue-shufflejs-plugin

A Vue.js plugin for Shuffle.js library. Note: This project is still under development!

The plugin use and require the following packages:

• Bootstrap 3 - Grid system (Note: see Bootstrap section below)
• vue-multiselect - Probably the most complete selecting solution for Vue.js 2.0, without jQuery. (Github)
• imagesLoaded - Detect when images have been loaded. (Github)

Documentation

• Shuffle.js Docs

Installation

The preferred way to install this extension is through yarn or npm.

Either run

yarn add https://git.hrzg.de/dmstr/vue-shufflejs-plugin.git#0.5.0

or via npm

npm install https://git.hrzg.de/dmstr/vue-shufflejs-plugin.git#0.5.0 --save

Usage

The following types are supported:

• Basic masonry layout without any extra options
• Grid with filter, search and / or sort options
• ...

The following example renders the Shuffle.js plugin with Filter, Search and Sort options. Please check the Shuffle.js documentation for available options supported by the plugin.

Bundler (Webpack, etc.)

import Vue from 'vue'
import VueShuffle from 'vue-shufflejs-plugin'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'vue-shufflejs-plugin/dist/vue-shufflejs-plugin.css'

Vue.use(VueShuffle)

Bootstrap

Bootstrap is defined as peer dependency in packages.json file. If you working in a project without Bootstrap you must install it manually and add following css files via Import or Link Tag to your project:

• bootstrap/dist/css/bootstrap.min.css
• bootstrap/dist/css/bootstrap-theme.min.css

Bootstrap icon font issue (only needed if Bootstrap is bundled in dist source):

Add

yarn add url-loader --dev

or via npm

npm install url-loader --save-dev

Updated module rules section in webpack config and add:

{
  test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
  loader: 'url-loader'
}

Browser

<!-- Include after Vue -->
<!-- Local files -->

<!--
Add Bootstrap CSS files if needed, see Bootstrap section above
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
-->

<link rel="stylesheet" href="vue-shufflejs-plugin/dist/vue-shufflejs-plugin.css"></link>
<script src="vue-shufflejs-plugin/dist/vue-shufflejs-plugin.js"></script>

Use component in Vue app

import axios from 'axios'

export default {
  name: 'app',
  data () {
    return {
      settingsApiUrl: 'http://__PROJECT_URL__/api/settings?internalDetailPath=1',
      settings: null,
      products: {
        data: null,
        option: null,
        filter: null
      }
    }
  },
  created () {
    axios.get(this.settingsApiUrl)
      .then((response) => {
        this.settings = response.data

        axios.get(this.settings.baseUrl + this.settings.endpoints.data)
          .then((response) => {
            this.products.data = response.data
          })
          .catch((error) => {
            console.error(error)
          })

        axios.get(this.settings.baseUrl + this.settings.endpoints.option)
          .then((response) => {
            this.products.option = response.data
          })
          .catch((error) => {
            console.error(error)
          })

        axios.get(this.settings.baseUrl + this.settings.endpoints.filter)
          .then((response) => {
            this.products.filter = response.data
          })
          .catch((error) => {
            console.error(error)
          })
      })
      .catch((error) => {
        console.error(error)
      })
  }
}

<vue-shuffle :settings="settings" :products="products"></vue-shuffle>

Settings API response

settings: {
  "baseUrl": "http://__PROJECT_URL__",
  "imageApiPath": "/filefly/api?action=stream&path=",
  "imgBaseUrl": "http://img.workbench.oneba.se",
  "imgHostPrefix": "http://__PROJECT_URL__/img/stream",
  "imgHostSuffix": ",p2",
  "detailPath": false, // or '/de/frontend/products/detail?productId='
  "endpoints": {
    "settings": "/api/settings",
    "data": "/api/product-data",
    "option": "/api/product-option",
    "filter": "/api/product-filter"
  },
  "languages": [
    "de",
    "en"
  ],
  "enabledFilter": true,
  "enabledFilterOptions": false,
  "filterMode": "and", // or "or", is ignored if "enabledFilterOptions" is set to false
  "enabledSearch": true,
  "enabledSort": true
}

Tests

WIP!

Devlopment

WIP!

# serve with hot reload at localhost:8080
yarn run dev

# distribution build with minification
yarn run build

# build the documentation into docs
yarn run docs

# run unit tests
yarn run test

# run unit tests watch
yarn run unit-watch

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Further Information

Shuffle.js has lots of configuration options, please check the Shuffle.js library website.

Credits

• Glen Cheney - Shuffle.js
• Damian Dulisz - vue-multiselect
• David DeSandro - desandro/imagesloaded

License

The MIT License (MIT). Please see License File for more information.