Vuebbble

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

Demo

Link

Installation

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

Register the component:

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>

🔍 Inspect the component using Vue devtools to see all available data from the response.

Available properties

Prop	Data Type	Default	Required	Description
token	String		true	Application access token
count	Number	5	false	Number of shots to fetch

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Credits

• Robbin Johansson
• spatie/skeleton-vue

License

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