Composables

Composables are the Vue 3 way to share reusable functionality. Below is a list of composables available and examples how to use. Composables will only be made available to compiled .vue files.

useToaster

The notification system: result toasts and lightweight notices. The full API, live demos and the legacy window.Toaster migration table are documented on the Toaster page.

import { useToaster } from '@front-end/en-components'

usePagination

This can be used alongside the EnPagination component to provide pagination to any list/array.

import { usePagination } from '@front-end/en-components'

API

perPage | number

Sets number of items per page, defaults to 25 unless overwritten by first argument.

currentPage | number

Sets up current page tracking.

pagedList | function

Function that filters the list being paged to the current set of items for the page.

Options API Example

<template>
  <div v-for="item in pagedList(list)">{{ item }}</div>
  <EnPagination v-model="currentPage" :per-page="perPage" :list="list"></EnPagination>
</template>

<script>
import { usePagination } from '@front-end/en-components'
export default {
  setup() {
    const {
      perPage,
      currentPage,
      pagedList
    } = usePagination(1)

    return {
      perPage,
      currentPage,
      pagedList
    }
  },
  data() {
    return {
      list: [...]
    }
  }
}
</script>

Composition API Example

<script setup>
import { ref } from 'vue'
import { usePagination } from '@front-end/en-components'
const {
  perPage,
  currentPage,
  pagedList
} = usePagination(1);
const list = ref([]);
</script>

<template>
  <div v-for="item in pagedList(list)">{{ item }}</div>
  <EnPagination v-model="currentPage" :per-page="perPage" :list="list"></EnPagination>
</template>