Skip to content
🏀 Vue component to easily display dribbble shots from a user
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
dist
docs
src
.babelrc
.editorconfig
.eslintrc
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
LICENSE.md
README.md
package.json
webpack.base.js
webpack.config.js
yarn.lock

README.md

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.

You can’t perform that action at this time.