hero

vue-composable

Vue composition-api composable components

Get Started →

Composition

General purpose composable components that fits your needs.

Reactive

Full usable of `reactive`, ready to use on your templates.

TypeScript Support

100% Written in TypeScript.

# 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).

Edit Vue Composable Examples (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

# 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

# MISC

# 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

# Validation

# i18n

# Intl

# 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

# External

New packages needed

# 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