Stale-while-revalidate data fetching for Vue

Last update: Aug 16, 2022

swrv

build

swrv (pronounced "swerve") is a library using the @vue/composition-api for remote data fetching. It is largely a port of swr.

The name “SWR” is derived from stale-while-revalidate, a cache invalidation strategy popularized by HTTP RFC 5861. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.

Features:

  • Transport and protocol agnostic data fetching
  • Fast page navigation
  • Revalidation on focus
  • Interval polling
  • Request deduplication
  • TypeScript ready
  • Minimal API
  • stale-if-error
  • Customizable cache implementation
  • Error Retry
  • SSR support
  • Vue 3 Support

With swrv, components will get a stream of data updates constantly and automatically. Thus, the UI will be always fast and reactive.

Table of Contents

Installation

yarn add swrv

If you want to try out Vue 3 support (beta), install the beta release and check out the Vite example. swrv code for Vue 3.0 exists on next branch.

Getting Started

<template>
  <div>
    <div v-if="error">failed to load</div>
    <div v-if="!data">loading...</div>
    <div v-else>hello {{ data.name }}</div>
  </div>
</template>

<script>
import useSWRV from 'swrv'

export default {
  name: 'Profile',

  setup() {
    const { data, error } = useSWRV('/api/user', fetcher)

    return {
      data,
      error,
    }
  },
}
</script>

In this example, useSWRV accepts a key and a fetcher function. key is a unique identifier of the request, normally the URL of the API. And the fetcher accepts key as its parameter and returns the data asynchronously.

useSWRV also returns 2 values: data and error. When the request (fetcher) is not yet finished, data will be undefined. And when we get a response, it sets data and error based on the result of fetcher and rerenders the component. This is because data and error are Vue Refs, and their values will be set by the fetcher response.

Note that fetcher can be any asynchronous function, so you can use your favorite data-fetching library to handle that part. If ommitted, swrv uses the Fetch api.

Api

const { data, error, isValidating, mutate } = useSWRV(key, fetcher, options)

Parameters

Param Required Description
key yes a unique key string for the request (or a watcher function / null) (advanced usage)
fetcher a Promise returning function to fetch your data
options an object of configuration options

Return Values

  • data: data for the given key resolved by fetcher (or undefined if not loaded)
  • error: error thrown by fetcher (or undefined)
  • isValidating: if there's a request or revalidation loading
  • mutate: function to trigger the validation manually

Config options

See Config Defaults

  • refreshInterval = 0 - polling interval in milliseconds. 0 means this is disabled.
  • dedupingInterval = 2000 - dedupe requests with the same key in this time span
  • ttl = 0 - time to live of response data in cache. 0 mean it stays around forever.
  • shouldRetryOnError = true - retry when fetcher has an error
  • errorRetryInterval = 5000 - error retry interval
  • errorRetryCount: 5 - max error retry count
  • revalidateOnFocus = true - auto revalidate when window gets focused
  • revalidateDebounce = 0 - debounce in milliseconds for revalidation. Useful for when a component is serving from the cache immediately, but then un-mounts soon thereafter (e.g. a user clicking "next" in pagination quickly) to avoid unnecessary fetches.
  • cache - caching instance to store response data in. See src/lib/cache, and Cache below.

Prefetching

Prefetching can be useful for when you anticipate user actions, like hovering over a link. SWRV exposes the mutate function so that results can be stored in the SWRV cache at a predetermined time.

import { mutate } from 'swrv'

function prefetch() {
  mutate(
    '/api/data',
    fetch('/api/data').then((res) => res.json())
  )
  // the second parameter is a Promise
  // SWRV will use the result when it resolves
}

Dependent Fetching

swrv also allows you to fetch data that depends on other data. It ensures the maximum possible parallelism (avoiding waterfalls), as well as serial fetching when a piece of dynamic data is required for the next data fetch to happen.

<template>
  <p v-if="!projects">loading...</p>
  <p v-else>You have {{ projects.length }} projects</p>
</template>

<script>
import { ref } from '@vue/composition-api'
import useSWRV from 'swrv'

export default {
  name: 'Profile',

  setup() {
    const { data: user } = useSWRV('/api/user', fetch)
    const { data: projects } = useSWRV(() => user.value.id && '/api/projects?uid=' + user.value.id, fetch)
    // if the return value of the cache key function is falsy, the fetcher
    // will not trigger, but since `user` is inside the cache key function,
    // it is being watched so when it is available, then the projects will
    // be fetched.

    return {
      user,
      projects
    }
  },
}
</script>

Stale-if-error

One of the benefits of a stale content caching strategy is that the cache can be served when requests fail.swrv uses a stale-if-error strategy and will maintain data in the cache even if a useSWRV fetch returns an error.

<template>
  <div v-if="error">failed to load</div>
  <div v-if="data === undefined && !error">loading...</div>
  <p v-if="data">
    hello {{ data.name }} of {{ data.birthplace }}. This content will continue
    to appear even if future requests to {{ endpoint }} fail!
  </p>
</template>

<script>
import { ref } from '@vue/composition-api'
import useSWRV from 'swrv'

export default {
  name: 'Profile',

  setup() {
    const endpoint = ref('/api/user/Geralt')
    const { data, error } = useSWRV(endpoint.value, fetch)

    return {
      endpoint,
      data,
      error,
    }
  },
}
</script>

State Management

useSwrvState

Sometimes you might want to know the exact state where swrv is during stale-while-revalidate lifecyle. This is helpful when representing the UI as a function of state. Here is one way to detect state using a user-land composable useSwrvState function:

import { ref, watchEffect } from '@vue/composition-api'

const STATES = {
  VALIDATING: 'VALIDATING',
  PENDING: 'PENDING',
  SUCCESS: 'SUCCESS',
  ERROR: 'ERROR',
  STALE_IF_ERROR: 'STALE_IF_ERROR',
}

export default function(data, error, isValidating) {
  const state = ref('idle')
  watchEffect(() => {
    if (data.value && isValidating.value) {
      state.value = STATES.VALIDATING
      return
    }
    if (data.value && error.value) {
      state.value = STATES.STALE_IF_ERROR
      return
    }
    if (data.value === undefined && !error.value) {
      state.value = STATES.PENDING
      return
    }
    if (data.value && !error.value) {
      state.value = STATES.SUCCESS
      return
    }
    if (data.value === undefined && error) {
      state.value = STATES.ERROR
      return
    }
  })

  return {
    state,
    STATES,
  }
}

And then in your template you can use it like so:

<template>
  <div>
    <div v-if="[STATES.ERROR, STATES.STALE_IF_ERROR].includes(state)">
      {{ error }}
    </div>
    <div v-if="[STATES.PENDING].includes(state)">Loading...</div>
    <div v-if="[STATES.VALIDATING].includes(state)">
      <!-- serve stale content without "loading" -->
    </div>
    <div
      v-if="
        [STATES.SUCCESS, STATES.VALIDATING, STATES.STALE_IF_ERROR].includes(
          state
        )
      "
    >
      {{ data }}
    </div>
  </div>
</template>

<script>
import { computed } from '@vue/composition-api'
import useSwrvState from '@/composables/useSwrvState'
import useSWRV from 'swrv'

export default {
  name: 'Repo',
  setup(props, { root }) {
    const page = computed(() => root.$route.params.id)
    const { data, error, isValidating } = useSWRV(
      () => `/api/${root.$route.params.id}`,
      fetcher
    )
    const { state, STATES } = useSwrvState(data, error, isValidating)

    return {
      state,
      STATES,
      data,
      error,
      page,
      isValidating,
    }
  },
}
</script>

Vuex

Most of the features of swrv handle the complex logic / ceremony that you'd have to implement yourself inside a vuex store. All swrv instances use the same global cache, so if you are using swrv alongside vuex, you can use global watchers on resolved swrv returned refs. It is encouraged to wrap useSWRV in a custom composable function so that you can do application level side effects if desired (e.g. dispatch a vuex action when data changes to log events or perform some logic).

Cache

By default, a custom cache implementation is used to store fetcher response data cache, in-flight promise cache, and ref cache. Response data cache can be customized via the config.cache property. Built in cache adapters:

localStorage

A common usage case to have a better offline experience is to read from localStorage. Checkout the PWA example for more inspiration.

import useSWRV from 'swrv'
import LocalStorageCache from 'swrv/dist/cache/adapters/localStorage'

function useTodos () {
  const { data, error } = useSWRV('/todos', undefined, {
    cache: new LocalStorageCache(),
    shouldRetryOnError: false
  })

  return {
    data,
    error
  }
}

Serve from cache only

To only retrieve a swrv cache response without revalidating, you can omit the fetcher function from the useSWRV call. This can be useful when there is some higher level swrv composable that is always sending data to other instances, so you can assume that fetcher-less composables will have data available.

// Component A
const { data } = useSWRV('/api/config', fetcher)

// Component B, only retrieve from cache
const { data } = useSWRV('/api/config')

Error Handling

Since error is returned as a Vue Ref, you can use watchers to handle any onError callback functionality. Check out the test.

export default {
  setup() {
    const { data, error } = useSWRV(key, fetch)

    function handleError(error) {
      console.error(error && error.message)
    }

    watch(error, handleError)

    return {
      data,
      error,
    }
  },
}

FAQ

How is swrv different from the swr react library

Vue and Reactivity

The swrv library is meant to be used with the @vue/composition-api (and eventually Vue 3) library so it utilizes Vue's reactivity system to track dependencies and returns vue Ref's as it's return values. This allows you to watch data or build your own computed props. For example, the key function is implemented as Vue watcher, so any changes to the dependencies in this function will trigger a revalidation in swrv.

Features

Features were built as needed for swrv, and while the initial development of swrv was mostly a port of swr, the feature sets are not 1-1, and are subject to diverge as they already have.

Why does swrv make so many requests

The idea behind stale-while-revalidate is that you always get fresh data eventually. You can disable some of the eager fetching such as config.revalidateOnFocus, but it is preferred to serve a fast response from cache while also revalidating so users are always getting the most up to date data.

How can I refetch swrv data to update it

Swrv fetcher functions can be triggered on-demand by using the revalidate return value. This is useful when there is some event that needs to trigger a revalidation such a PATCH request that updates the initial GET request response data.

Contributors

Thanks goes to these wonderful people (emoji key):


Darren Jennings

💻 📖

Sébastien Chopin

💻 🤔

Fernando Machuca

🎨

ZEIT

🤔

Jason Yang/楊朝傑

🐛 💻

Axel Hernández Ferrera

🐛 💻 💡

This project follows the all-contributors specification. Contributions of any kind welcome!

GitHub

https://github.com/Kong/swrv
Comments
  • 1. SWRV returns wrong cached data before first fetch while using key watcher function.

    CodeSandbox: https://codesandbox.io/s/swrv-first-fetch-key-ip6ox?file=/src/App.vue Click on the add button and see that check turns false.

    I'd assume that the data returned by useSWRV is either undefined (no cache and data not yet available), or some cached data for that key (That is, check to be always true). Not some cached data for some older value of the key.

    Reviewed by peter50216 at 2021-07-03 04:10
  • 2. Allow array as key, multiple arguments to fetcher

    In the parameter documentation, the readme mentions that it is possible to pass an array as a cache key to useSWRV, presumably to allow passing multiple arguments to the fetch function as SWR does.

    Currently, this does not work and it brakes the caching completely.

    Is there a plan to support this feature, or is there another way to pass multiple arguments to the fetcher function?

    Reviewed by hdahlheim at 2020-07-05 21:03
  • 3. refreshInterval is being swallowed by clearTimeout

    refreshInterval seems to be cancelled immediately by https://github.com/Kong/swrv/blob/415f8eb0d6a4dd85cf34c76997308448669c9514/src/use-swrv.ts#L380

    Investigate and write tests for refreshInterval working as expected.

    Reviewed by darrenjennings at 2020-11-02 03:15
  • 4. The behavior is unexpected when TTL value was set to 0

    https://github.com/Kong/swrv/blob/master/src/use-swrv.ts#L45

    Sometimes we prefetch data when starting app.

    mutate('/api/appConfig', fetcher);
    

    and then use that data until use close window.

    const { data } = useSWRV('/api/appConfig');
    

    Because of the ttl, that data can be only kept 5 minutes. That forced us need to do something like below.

    mutate('/api/appConfig', fetcher, undefined, 1000 * 60 * 60 * 24 * 365);
    const { data } = useSWRV('/api/appConfig', undefined, { ttl: 1000 * 60 * 60 * 24 * 365 });
    

    I've looked the source codes. I know if the ttl is 0 means keeping the data and the refs forever. So, could you please let the default ttl be 0?

    Reviewed by NeoLSN at 2020-07-01 14:55
  • 5. Typescript issue with @vue/composition-api > beta.6

    After upgrading composition api, I'm getting the following issue:

    <template>
    <div v-if="data">
       {{data.foo}} <!-- Property 'foo' does not exist on type 'Ref<{ foo: string; } | undefined> -->
    </template>
    

    I traced it down to the definition of IResponse

    interface IResponse {
        data?: Ref......
    }
    

    removing the ? makes it work again.

    it most likely has to do with https://github.com/vuejs/vue-next/pull/1682 which was implemented in beta.7

    I couldn't see that any of the examples given fit this one, but perhaps this is another breaking example

    Reviewed by blocka at 2020-08-28 05:44
  • 6. feat(ssr) add ssr support

    • supports vue native ssr and specific nuxt context

    Credit goes to @Atinux for this one as he provided the code and helped iterate with me. Thank you!

    Sadly, the test did not work as expected, since window is currently always defined when calling renderToString... 🤔

    Reviewed by darrenjennings at 2020-02-12 17:14
  • 7. How to destructure returned data?

    I am using a custom fetcher, but I am having trouble destructuring. This works:

    setup() {
      const { data } = useSWRV('/api/user', () => { ... }
      return { data }
    }
    

    This does not (omitting setup()):

    const { data: { virtualExpos } } = useSWRV('/api/user', () => { ... }
    return { virtualExpos } 
    

    This gives me "toRefs() expects a reactive object but received a plain one"

    const { data: { virtualExpos } } = useSWRV('/api/user', () => { ... }
    const { virtualExpos } = toRefs(data)
    return { virtualExpos }
    

    Strangely enough, using this simple example:

    setup() {
      const { data } = useSWRV("https://cat-fact.herokuapp.com/facts")
      console.log("isReactive(data)", isReactive(data))
      return { data }
    }
    

    Prints isReactive(data) false...

    Even though it is clearly reactive!

    const { data } = useSWRV("https://cat-fact.herokuapp.com/facts")
    console.log("isReactive(data)", isReactive(data))
    setTimeout(() => {
      data.value = "hello"
    }, 5000)
    return { data }
    

    Works and will replace the result of the API call after 5 seconds.

    Am I doing something wrong or is something weird going on?

    Using Vue 2.6.12 and @vue/composition-api 1.0.0-rc.1...

    Reviewed by bartenra at 2021-01-26 10:48
  • 8. refactor(document-visible): modify isDocumentVisible timing

    Consider this scenario.

    1. A user triggered a long time task to get a data, which might be longer than 15 seconds, in page A. useSWRV('dynamicKey', fetcher)
    2. Re-route to page B after the task done. The page B need to be constructed with data from that task.

    Issue: If the user switch to another Chrome tab when the task was running, then the page B won't be setup properly. Because the page B won't get data when calling useSWRV('dynamicKey').

    Expected: Should get data last known state when UI setup in document invisible mode.

    BTW, in SWR, you can get last known state, but won't trigger the fetcher. https://github.com/vercel/swr/blob/e76d30973bf623149ac4a61c81b0d3e4c8d79d93/src/use-swr.ts#L238-L253

    Reviewed by NeoLSN at 2020-08-11 03:13
  • 9. SSR mode shares cache between requests

    I think that a shared cache between different requests can be dangerous. The cache can contain user information and you could send information from user1 to user 2.

    I think that the problem is that the default cache is declared as a variable at the module level https://github.com/Kong/swrv/blob/master/src/use-swrv.ts#L15

    A solution could be to pass my own cache instance and be sure that it is unique by request

    // default.vue
    setup() {
       provide('requestCache', new SWRVCache())
    }
    
    // page.vue
    setup() {
       const requestCache = provide('requestCache')
       useSWRV('key', fetcher, { cache: requestCache })
    }
    

    But what about the other caches? REF_CACHE and PROMISES_CACHE?

    Another possible solution could be to bound the default caches (data, ref and promises) to the current vue instance. This way we can be sure that every request has its own instance.

    Reviewed by axelhzf at 2020-04-26 10:18
  • 10. Add fetchOnServer option to config

    I don't know if you are interested on adding this feature to the library.

    There are some case where is interesting to decide what to fetch on the server

    setup() {
        const { data: post } = useSWRV('post1', () => fetchPostById(1));
        const { data: comments } = useSWRV(
           'post1comments', 
           () => fetchPostCommentsById(1), { fetchOnServer: false }
        );
        return { post, comments }
    }
    

    It is something similar to the fetchOnServer option on nuxt https://nuxtjs.org/api/pages-fetch/

    I know this is a deviation from the original swr api, but I think that they already have the granular control with the initialData prop.

    Reviewed by axelhzf at 2020-04-25 10:05
  • 11. Remove staterefs from ref cache on unmount

    Goal

    Eliminate a (slight) memory leak caused by the indefinite retention of StateRefs by the REF_CACHE when the time-to-live is 0 by removing a StateRef from the REF_CACHE when its component is unmounted (reported in #230).

    How Can This Be Tested?

    1. Checkout the source branch at commit 856002c
    2. yarn
    3. yarn test
    4. Observe the test failures.
    5. Checkout the source branch at commit 2b4a1bc
    6. yarn test
    7. Verify the tests succeed.

    EDIT: Corrected commit order.

    Reviewed by jefrailey at 2021-12-30 21:23
  • 12. feat(vue): upgrade swrv for vue 2.7

    Upgrade for Vue 2.7

    Instead of making updates to the master branch, I back-ported the changes from from the next branch and updated for [email protected]. This strategy allows for an easier transition to Vue 3 as the master branch in a future release thanks to the work already done by @darrenjennings. This PR will resolve #303.

    Changes

    • Upgrade Vue devDependency to ^2.7.8 and the Vue peerDependencies to ^2.7.0
      • This internalizes the Vue Composition API and allows us to remove the @vue/composition-api peer dependency
    • Upgrades all @vue/cli-* dependencies to 5.x
      • Note: We're planning to swap out Vue CLI for Vite and Jest for Vitest in a future PR
    • Update tests for Vue 2.7, including the supported versions of Vue in test-compat-all.sh
    • Swaps out VitePress for VuePress for the documentation site since VitePress requires a conflicting Vue v3.x dependency

    Todo

    • [ ] Update the included /examples/* projects for Vue 2.7
      • [ ] axios-typescript-nuxt
      • [x] ~~basic~~
      • [x] ~~pwa~~
      • [ ] ssr-nuxt
      • [x] ~~vite~~
    • [x] ~~Update README.md~~
    • [x] ~~Port the docs over from the master branch and update accordingly~~
      • [ ] Update the documentation to explain the versioning and release strategy for the 2.7 and prior releases, and which version to install depending on your project's dependencies

    Release strategy

    After adding to and completing the items in the Todo section above and leaving this PR open for feedback for a period, the plan is to replace the current master branch with the code from this PR. I realize this will "break" the history on the master branch and require some tweaks to the next branch before it can be merged in; however, I believe this to be the best way forward. We are open to feedback on this decision, so please comment on this PR.

    As for the versioning/release of this PR, here's what we're thinking:

    • This PR release for Vue 2.7 will inherit the latest tag and will be the default version.
    • Tag the current 0.9.6 release on npm with legacy so anyone that cannot upgrade to Vue 2.7 can install with yarn add [email protected] (this matches the [email protected] tag for the [email protected] version)
    • Update the documentation to explain the version tags and which version to install depending on your project's dependencies
    Reviewed by adamdehaven at 2022-08-06 16:19
  • 13. Incompatibility with Vue 2.7

    Due to the direct requirements of @vue/composition-api, the package is not compatible with Vue 2. Instead, dependency tree building fails when attempting to install.

    How to reproduce

    1. Init an empty npm project
    2. npm i [email protected]^2.7
    3. npm i swrv
    4. Result:
    npm ERR! Found: [email protected]
    npm ERR! node_modules/vue
    npm ERR!   [email protected]"^2.7.8" from the root project
    npm ERR! 
    npm ERR! Could not resolve dependency:
    npm ERR! peer [email protected]">= 2.5 < 2.7" from @vue/[email protected]
    npm ERR! node_modules/@vue/composition-api
    npm ERR!   peer @vue/[email protected]"^0.5.0 || ^1.0.0-beta.17 || ^1.0.0-rc.5" from [email protected]
    npm ERR!   node_modules/swrv
    npm ERR!     [email protected]"^0.9.6" from the root project
    
    Reviewed by ZeroThe2nd at 2022-08-02 11:22
  • 14. LocalStorage Improvements

    We've been using the localStorage adaptor extensively for some time and it's got some rough edges, which this pull request should address. This is our patched version, we've been using it in production for over a year.

    • It checks for expiration on initialisation (swrv may not have been active while an expiration occurred)
    • It avoids an error if setting localStorage fails (as a fallback)
    • It tries to recover from localStorage being full by deleting its own cache.

    To be honest, I don't think localStorage is the best tool for this because of its limitations, but it works well enough that I've not spent any time building an alternative adaptor.

    Reviewed by mmulqueen at 2022-07-13 14:15
  • 15. TTL not working in Vue 3 example?

    Hi there,

    I've cloned and run the vite-basic example and it works great. I've tried to add some options to the hook: const { data, error } = useSWRV(endpoint, fetcher, {ttl: 60* 1000 *100, shouldRevalidate: false, revalidateOnFocus: false} ); I've put App.vue in a separate component added a toggle to mount and unmount the component

    <button @click="isOpen = !isOpen">Toggle isopen</button> <Test v-if="isOpen" />

    When the component is mounted it still makes the network request. Any idea why? TTL should be over an hour and the key hasn't changed?

    Reviewed by DarrenXu94 at 2022-07-13 08:14
  • 16. Switch to Vue 3 by default

    Vue 3 has been around for almost 2 years now. The Vue official site has switched to Vue 3 by default some time ago.

    It's time to merge branch next into master and support Vue 2 as a legacy option (depending on complexity).

    Reviewed by ivos at 2022-05-13 13:18
  • 17. Is loading

    PR for https://github.com/Kong/swrv/issues/208

    Comments:

    1. Some cases of setting isLoading = false are not covered by tests. I haven't found any test cases that would cover that for isValidating which I could extend. These are is a separate (second) commit.
    2. If this gets merged, SWRV docs site would need to be updated too.
    Reviewed by ivos at 2022-05-13 13:09
Related tags
Smart asynchronous data and computed properties for vue components.

vue-async-properties Vue Component Plugin for asynchronous data and computed properties. A Marketdial Project new Vue({ props: { articleId: Numb

Jun 21, 2021
⚡️ A request library for Vue 3. 一个能轻松帮你管理请求状态的 Vue 3 请求库。欢迎使用~
⚡️ A request library for Vue 3. 一个能轻松帮你管理请求状态的 Vue 3 请求库。欢迎使用~

English | 简体中文 VueRequest ⚡️ A request library for Vue 3. Status: Beta Features ?? All data is reactive ?? Interval polling ?? Automatic error retry ?

Aug 13, 2022
The HTTP client for Vue.js

vue-resource The plugin for Vue.js provides services for making web requests and handle responses using a XMLHttpRequest or JSONP. Features Supports t

Aug 14, 2022
Async computed properties for Vue.js

vue-async-computed With this plugin, you can have computed properties in Vue that are computed asynchronously. Without using this plugin, you can't do

Jul 20, 2022
V-Model is a model plugin for Vue.js, like ng-resource.

V-Model V-Model is a model plugin for Vue.js, like ng-resource. based on axios, path-to-regexp, and bluebird. The V-Model provides interaction support

Mar 16, 2021
Control your API calls by using an amazing component which supports axios and vue-resource
Control your API calls by using an amazing component which supports axios and vue-resource

Vue API Request Vue API Request provides a full control on your APIs, making the calls simple, fast and easy to implement. Also, your code will be cle

Apr 21, 2022
Solution to remove and simplify axios in components vue

Vue fast axios Solution to remove and simplify axios in components vue Dependencies: Only Vue.js 2.x Before install Before installing, you must instal

Apr 16, 2022
VueJS RESTful client with reactive features. Vue-Chimera is based on axios http client library.
VueJS RESTful client with reactive features. Vue-Chimera is based on axios http client library.

VueJS RESTful client with reactive features. Vue-Chimera is based on axios http client library.

Jul 27, 2022
Vue 2 directive to easily add AJAX requests to your application

v-fetch v-fetch is a Vue directive to add AJAX to your app without the boilerplate Summary v-fetch is a directive that adds AJAX functionality to your

Mar 31, 2022
Vue Axios Http - This package helps you quickly to build requests for REST API

Vue Axios Http This package helps you quickly to build requests for REST API. Move your logic and backend requests to dedicated classes.

Apr 9, 2022
Hooks for fetching, caching and updating asynchronous data in Vue
Hooks for fetching, caching and updating asynchronous data in Vue

Hooks for fetching, caching and updating asynchronous data in Vue

Aug 10, 2022
Analyze your WhatsApp Chat in Seconds. Reveal insights & get statistics, while all data stays on your device. No chat data is sent to a server it runs only locally in your browser.
Analyze your WhatsApp Chat in Seconds. Reveal insights & get statistics, while all data stays on your device.   No chat data is sent to a server it runs only locally in your browser.

WhatsAnalyze Analyze your WhatsApp Chat in Seconds Reveal insights & get statistics, while all data stays on your device. No chat data is sent to a se

Jul 24, 2022
A Vue.js web application template designed to be as lightweight as possible while offering an extensive set of features

vue-template An ultra-lightweight Vue web application template This template tries to push the limits of how light a Vue application can be while stil

Dec 29, 2021
A Vue.js plugin that affixes an element on the window while scrolling based on a relative element

Affixes an element on the screen based on a relative element Unlike other plugins, this Vue 2 component will make it easy to affix any element while s

Jun 29, 2022
A simple component for a powerful API. vue-youtube provides a simple layer for you to use your imagination while over the YouTube IFrame Player API.
A simple component for a powerful API. vue-youtube provides a simple layer for you to use your imagination while over the YouTube IFrame Player API.

VueYoutube Intro vue-youtube is an wrapper of YouTube IFrame Player API (YIPA). What is the difference between other plugins? The difference is that t

Aug 6, 2022
My first project while learning Vue.js
My first project while learning Vue.js

User List — My first Vue.js project Preview Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies f

Jan 2, 2022
Using to block while client requesting.
Using to block while client requesting.

Vuejs Loading Screen (Demo) Using to block whlie client processed work. Screenshot Installation npm i --save vuejs-loading-screen Usage import Vue fr

Jul 28, 2022
Reading Ruler is a cross-platform (Windows/macOS/Linux) desktop app which displays translucent boxes on your screen to guide your eyes while reading.
Reading Ruler is a cross-platform (Windows/macOS/Linux) desktop app which displays translucent boxes on your screen to guide your eyes while reading.

Reading Ruler (beta version) Read better using a digital ruler. Reading Ruler is a cross-platform (Windows/macOS/Linux) desktop app which displays tra

Nov 16, 2021
A vue3 plugin to show a progress bar while waiting for something.

vue3-progress A vue3 plugin to show a progress bar while waiting for something. Demo Find a demo at https://vue3-progress-demo.netlify.app/. Setup npm

Aug 10, 2022
Vue3-simple-typeahead - A simple and lightweight Vue3 typeahead component that show a suggested list of elements while the user types in.
Vue3-simple-typeahead - A simple and lightweight Vue3 typeahead component that show a suggested list of elements while the user types in.

vue3-simple-typeahead A Vue3 component for a simple typeahead component. It will show a list of suggested items based on the user input. The component

Aug 7, 2022