vue-fetch

library3.0.0jsnpmunverified

A simplified fetch API integration for Vue 3 applications that provides observable fetch calls with automatic loading, error, and data state management for components. Current stable version is 3.0.0 (released Jan 2023, updated quarterly). It requires Vue ^3.2.45 and ships TypeScript declarations. Unlike alternatives like vue-apollo or vue-query, vue-fetch is lightweight (no GraphQL or caching layer) and focuses on bare-minimum fetch binding with a composition API `useFetch` function, making it ideal for simple CRUD apps or API wrappers without extra overhead.

devops

npm install vue-fetch

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-FETCH

vue-fetch

devopsjavascriptv3.0.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useFetch

✓ import { useFetch } from 'vue-fetch'

✗ const useFetch = require('vue-fetch')

ESM-only package since v3; named export, not default.

createResource

✓ import { createResource } from 'vue-fetch'

✗ import createResource from 'vue-fetch'

secondary function for creating reusable fetch wrappers.

VueFetchPlugin

✓ import { VueFetchPlugin } from 'vue-fetch'

✗ import VueFetchPlugin from 'vue-fetch'

Plugin object for app-level configuration with .use().

useFetch type

✓ import type { UseFetchReturn } from 'vue-fetch'

TypeScript type for the return type of useFetch.

Configures the plugin globally with base URL and headers, then uses useFetch in a composition API setup to fetch data.

import { createApp } from 'vue' import { VueFetchPlugin } from 'vue-fetch' import App from './App.vue' const app = createApp(App) app.use(VueFetchPlugin, { baseURL: process.env.VUE_APP_API_URL ?? 'https://api.example.com', headers: { 'Content-Type': 'application/json' } }) app.mount('#app') // In component: import { useFetch } from 'vue-fetch' import { onMounted } from 'vue' export default { setup() { const { data, loading, error, execute } = useFetch('/items') onMounted(() => execute()) return { data, loading, error } } }

Debug

Known issues

breakingVersion 3.0.0 reworked the entire API: removed `$fetch` global property and replaced with `VueFetchPlugin` and `useFetch` composition function.

fix

Migrate to v3 by installing vue@^3 and using `import { useFetch } from 'vue-fetch'` instead of `this.$fetch`.

affects: <3.0.0

deprecatedThe `createResource` function is deprecated in v3.0.0 and will be removed in v4.

fix

Replace `createResource` calls with direct `useFetch` calls, or wrap logic manually.

affects: >=3.0.0 <4.0.0

gotchauseFetch is not reactive by default unless you pass a reactive URL (ref or computed). If a static string is given, the function fetches only once.

fix

Use a ref for the URL if you want to react to changes: `const url = ref('/items'); useFetch(url)`.

affects: >=3.0.0

gotchaThe plugin's `baseURL` does not automatically add trailing slashes; ensure your relative URLs don't miss the leading slash.

fix

Always use absolute paths like `/items` in useFetch calls, not `items`.

affects: >=3.0.0

gotchaFor error handling, the `error` ref from useFetch is a string (error.message), not an Error object. Do not assume methods like `.stack` exist.

fix

Parse or handle errors as strings, or use try-catch around execute().

affects: >=3.0.0

Errors

Common errors & fixes

TypeError: vue_fetch_1.useFetch is not a function

Using 'const { useFetch } = require('vue-fetch')' in a CommonJS environment; v3 ships ESM only.

fix

Use 'import { useFetch } from 'vue-fetch'' or set 'type':'module' in package.json.

Property '$fetch' does not exist on type 'ComponentCustomProperties'

Accessing global $fetch which was removed in v3.

fix

Use application-level plugin and import useFetch in components instead.

Uncaught (in promise) TypeError: Cannot destructure property 'data' of '(intermediate value)' as it is undefined.

Calling useFetch before providing plugin configuration.

fix

Ensure app.use(VueFetchPlugin) is called before any component uses useFetch.

Upgrade

Version history

3.0.0latest on npm

Audit

Dependencies

vuerequiredPeer dependency for composition API and reactivity primitives

Agent activity

11 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/bangbang93/vue-fetch ↗

packagevue-fetch ↗

homepagehttps://github.com/bangbang93/vue-fetch#readme ↗