Skip to content

robbinjohansson/vuebbble

Repository files navigation

Latest Version on NPM Total Downloads on NPM Software License Build Status

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

License

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