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

| Name | Type | Default value | Description | | ------------- | ------ | ------------------------- | --------------------------------------------------------------------------- | | slugs | Object | null | {framework: 'nuxtjs', ui: 'buefy', plugins: ['vue-i18n', 'vue-apollo']} | | imageWidth | Number | 800 | Preview image width in pixels | | sortBy | String | "rank" | Sort criteria ("rank", "lastDetectedAt") | | sortDirection | String | "asc" | Sort direction ("asc", "desc") | | labelRetry | String | "Retry" | Label shown on button during retry | | labelError | String | "Something went wrong!" | Label shown when something goes wrong | | labelLoadMore | String | "Load more" | Label shown on button to load more | | labelLoading | String | "Loading..." | Label shown during loading |

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