Vuejs Component to Work with Chocolat

vue-chocolat .Vuejs Component to Work with Chocolat

vue-chocolat

VueJs component to work with Chocolat 🐴

Install

In package.json

The component can be installed by executing

npm install --save vue-chocolat
# or yarn add vue-chocolat

In Component

Add it globally

import vueChocolat from 'vue-chocolat'

// ...

Vue.component('vue-chocolat', vueChocolat)

or locally

import vueChocolat from 'vue-chocolat'

// ...

export default {
  // ...
  components: {
    'vue-chocolat': vueChocolat
    // or even in a async way
    // 'vue-chocolat': () => import('vue-chocolat')
  }
}

Props

No properties are required altough you’ll have a better control over the component when using it.

• items
  • default: null
  • required: false
  • type: Array
  • Reference link
• options
  • default: undefined
  • required: false
  • type: Object
  • Reference link
• selector
  • default: :scope > a
  • required: false
  • type: String

items create a gallery, selector creates a collection of clickable elements. You can’t use both of them at once.

API

Reference link

When creating a <vue-chocolat> component you’ll have access to its api by adding a ref attribute to it.

<!-- Name whatever you prefer instead of `instance` -->
<vue-chocolat ref="instance"></vue-chocolat>

someMethod() {
  const { api } = this.$refs.instance

  // see the reference link to full detailed information
  api.open(1)
  api.close()
  api.next()
  api.prev()
  // etc
}

Todo list

• [ ] Improve API interface

Examples

Examples can be found here:

• Examples

Live examples can be found at Chocolat’s page.

Reference

• http://chocolat.insipi.de/

Download Details:

Author: eliamartani

Demo: https://eliamartani.github.io/vue-chocolat/

Source Code: https://github.com/eliamartani/vue-chocolat

Suggest:

☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework

☞ Learn Vue.js from scratch 2018

☞ Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!

☞ Vue.js Tutorial: Zero to Sixty

☞ Learn Vue.js from Scratch - Full Course for Beginners

☞ Create Shopping basket page With Vuejs and Nodejs