Vuebbble NPM | npm.io

Vuebbble

Vue component to easily display dribbble shots from a user using the v2 API.

Demo

Installation

$ yarn add vuebbble --dev
# or ...
$ npm i vuebbble --save-dev

import Vue from 'vue';
import { Vuebbble } from 'vuebbble';

Vue.component('vuebbble', Vuebbble);

Alternatively using Vue.use() to register the component:

import Vuebbble from 'vuebbble';

Vue.use(Vuebbble);

Usage

Display the component using scoped slots.

<template>
    <vuebbble
        :token="token"
        :count="count"
    >
        <div slot="shot" slot-scope="{ shot }">
            <img :src="shot.images.hidpi" :alt="shot.title">
        </div>

        <!-- Optional: Custom error message markup -->
        <div slot="error" slot-scope="{ error }">
            {{ error }}
        </div>
    </vuebbble>
</template>

<script>
import { Vuebbble } from 'vuebbble';
Vue.component('vuebbble', Vuebbble);

export default {
    data() {
        return {
            token: 'ACCESS_TOKEN',
            count: 9,
        };
    },
};
</script>