Introduction

vue-composable is out-of-box ready to use composition-api (opens new window) generic components.

💯 typescript based composable components and full type support out-of-box.

Installation

# install with yarn
yarn add @vue/composition-api vue-composable
# install with npm
npm install @vue/composition-api vue-composable

Examples

Check out the examples folder or start hacking on codesandbox (opens new window).

(opens new window)

Composables

Event

• Event - Attach event listener to a DOM element
• Mouse Move - Attach mousemove listener to a DOM element
• Resize - Attach resize listener to a DOM element
• Scroll - Attach scroll listener to a DOM element
• onOutsidePress - Execute callback when click is outside of element

Dom

• Mouse distance from Element (opens new window) - Distance in pixels from an element center

Date

• useNow : Return reactive custom timer with specified refresh rate
• useDateNow : Returns reactive Date.now() with custom refresh rate
• usePerformanceNow : Returns reactive performance.now() with custom refresh rate

Format

• format - Reactive string format
• path - Retrieve object value based on string path

Breakpoint

• MatchMedia - reactive MatchMedia
• Breakpoint - reactive breakpoints based on window.innerWidth
• Chrome - reactive chrome breakpoints
• TailwindCSS - reactive TailwindCSS breakpoints

MISC

• sharedRef - cross-tab reactive ref
• VModel - helper to wrap model update into a ref [vue3 only]
• injectFactory - same as inject (opens new window) but allows you to have a factory as default value
• interval - self-remove setInterval on unmount
• lockScroll - lock-scroll component
• refDebounced - debounces the update value of a ref

Storage

• WebStorage - Reactive access to Storage API, useLocalStorage and useSessionStorage use this
• storage - uses localStorage or on safari private it uses sessionStorage
• localStorage - Reactive access to a localStorage
• sessionStorage - Reactive access to a sessionStorage

Pagination

• Pagination - Generic reactive pagination controls
• Array Pagination - Array pagination

Validation

• Validation - model based validation inspired by vuelidate (opens new window)

i18n

• i18n - Simple i18n implementation with API inspired by vue-i18n (opens new window)

Intl

• dateTimeFormat - Intl.DateTimeFormat
• numberFormat - Intl.NumberFormat
• currencyFormat - CurrencyFormat with Intl.NumberFormat

Promise

• Promise - Promise reactive resolve and reject
• promiseLazy - Sugar for usePromise lazy:true
• Cancellable Promise - Allow to cancel promises
• Retry - Provides functionality to retry promise

Meta

• Title - reactive document.title

State

• Timeline - Tracks variable history
• Undo - Tracks variable history, to allow undo and redo
• valueSync - syncs variables value, across multiple refs

Web

• Fetch - reactive fetch wrapper
• WebSocket - reactive WebSocket wrapper
• IntersectionObserver - reactive IntersectionObserver
• NetworkInformation - reactive NetworkInformation wrapper
• Online - reactive navigator.onLine wrapper
• PageVisibility - reactive Page Visibility API
• Language - reactive NavigatorLanguage
• BroadcastChannel - reactive BroadcastChannel API
• Geolocation API
• CSS variables - reactive CSS variables
• Worker - Web Worker API
• WorkerFunction - Webworker Function, offload a function to webworker
• share - WebShare API
• Clipboard (opens new window) - Clipboard API

External

New packages needed

• Axios - @vue-composable/axios (opens new window) reactive axios wrapper client
• makeAxios - @vue-composable/axios (opens new window) wrap your axios instance
• useCookie (opens new window) - @vue-composable/cookie (opens new window) js-cookie wrapper

Usage

<template>
  <div>
    <p>page {{ currentPage }} of {{ lastPage }}</p>
    <p>
      <button @click="prev">prev</button>
      <button @click="next">next</button>
    </p>
    <ul>
      <li v-for="n in result" :key="n">
        {{ n }}
      </li>
    </ul>
  </div>
</template>

<script>
import { useArrayPagination } from "vue-composable";

export default {
  setup() {
    const array = new Array(1000).fill(0).map((_, i) => i);
    const { result, next, prev, currentPage, lastPage } = useArrayPagination(
      array,
      {
        pageSize: 3
      }
    );

    return { result, next, prev, currentPage, lastPage };
  }
};
</script>

Pagination example

page 1 of 334

• 0
• 1
• 2