vue-telescope-expo v1.0.1

Vue Telescope Expo

Fully customizable expo component for Vue.js that fetches data from VueTelescope! We're using this component inside Oruga's documentation.

Installation

yarn add vue-telescope-expo

Usage

import VueTelescopeExpo from 'vue-telescope-expo'
import 'vue-telescope-expo/dist/vue-telescope-expo.css'

export default {
  components: { VueTelescopeExpo },
}

<template>
  <div id="app">
    <vue-telescope-expo :slugs="{ui: 'oruga'}" :image-width="800"/>
  </div>
</template>

Properties

Slots

🔷 buttons

Use this slot to override buttons. This slot receives:

• loading: variable that indicates whether the component is loading items.
• loadMoreItems: method used to load more items.
• hasMoreItems: method used to check if there are more items to load.
• labelLoadMore: labelLoadMore property.
• labelLoading: labelLoading property.

🔷 retry

Use this slot to override part. This slot receives:

• firstLoadItems: method that fires the first items loading process.

🔷 item

Use this slot to override the items' template. This slot receives:

• item: object representing a VueTelescope item.

Here's a simple customization using Oruga UI components (live preview)

<vue-telescope-expo :slugs="{ ui: 'oruga' }">
    <template v-slot:buttons="{ loading, hasMoreItems, loadMoreItems }">
        <o-button v-if="hasMoreItems" root-class="loadingbtn" elements-wrapper-class="loadingbtnwrapper" @click="loadMoreItems">
            <o-icon root-class="loadingicon" v-if="loading" pack="fas" icon="sync-alt" spin> </o-icon>
            <span v-else>Load more</span>
        </o-button>
    </template>
    <template v-slot:retry="{ firstLoadItems }">
        <p>Something went wrong!</p>
        <o-button @click="firstLoadItems">Retry</o-button>
    </template>
</vue-telescope-expo>

Project setup

yarn install

Compiles and minifies for production

yarn build

Run your component tests

yarn test

Lints and fixes files

yarn lint