{"id":49665,"library":"vue-fetch","title":"vue-fetch","description":"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.","status":"active","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/bangbang93/vue-fetch","tags":["javascript","fetch","vue","typescript"],"install":[{"cmd":"npm install vue-fetch","lang":"bash","label":"npm"},{"cmd":"yarn add vue-fetch","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-fetch","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for composition API and reactivity primitives","package":"vue","optional":false}],"imports":[{"note":"ESM-only package since v3; named export, not default.","wrong":"const useFetch = require('vue-fetch')","symbol":"useFetch","correct":"import { useFetch } from 'vue-fetch'"},{"note":"secondary function for creating reusable fetch wrappers.","wrong":"import createResource from 'vue-fetch'","symbol":"createResource","correct":"import { createResource } from 'vue-fetch'"},{"note":"Plugin object for app-level configuration with .use().","wrong":"import VueFetchPlugin from 'vue-fetch'","symbol":"VueFetchPlugin","correct":"import { VueFetchPlugin } from 'vue-fetch'"},{"note":"TypeScript type for the return type of useFetch.","wrong":"","symbol":"useFetch type","correct":"import type { UseFetchReturn } from 'vue-fetch'"}],"quickstart":{"code":"import { createApp } from 'vue'\nimport { VueFetchPlugin } from 'vue-fetch'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(VueFetchPlugin, {\n  baseURL: process.env.VUE_APP_API_URL ?? 'https://api.example.com',\n  headers: { 'Content-Type': 'application/json' }\n})\napp.mount('#app')\n\n// In component:\nimport { useFetch } from 'vue-fetch'\nimport { onMounted } from 'vue'\n\nexport default {\n  setup() {\n    const { data, loading, error, execute } = useFetch('/items')\n    onMounted(() => execute())\n    return { data, loading, error }\n  }\n}","lang":"typescript","description":"Configures the plugin globally with base URL and headers, then uses useFetch in a composition API setup to fetch data."},"warnings":[{"fix":"Migrate to v3 by installing vue@^3 and using `import { useFetch } from 'vue-fetch'` instead of `this.$fetch`.","message":"Version 3.0.0 reworked the entire API: removed `$fetch` global property and replaced with `VueFetchPlugin` and `useFetch` composition function.","severity":"breaking","affected_versions":"<3.0.0"},{"fix":"Replace `createResource` calls with direct `useFetch` calls, or wrap logic manually.","message":"The `createResource` function is deprecated in v3.0.0 and will be removed in v4.","severity":"deprecated","affected_versions":">=3.0.0 <4.0.0"},{"fix":"Use a ref for the URL if you want to react to changes: `const url = ref('/items'); useFetch(url)`.","message":"useFetch 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.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Always use absolute paths like `/items` in useFetch calls, not `items`.","message":"The plugin's `baseURL` does not automatically add trailing slashes; ensure your relative URLs don't miss the leading slash.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Parse or handle errors as strings, or use try-catch around execute().","message":"For error handling, the `error` ref from useFetch is a string (error.message), not an Error object. Do not assume methods like `.stack` exist.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"search_vec":"'2023':35 '3':11 '3.0.0':32 '3.2.45':41 'altern':47 'api':7,77,88 'apollo':51 'app':86 'applic':12 'automat':19 'bare':70 'bare-minimum':69 'bind':73 'cach':64 'call':17 'compon':27 'composit':76 'crud':85 'current':28 'data':23 'declar':45 'error':21 'extra':91 'fetch':3,6,16,58,72,94 'focus':67 'function':79 'graphql':62 'ideal':82 'integr':8 'jan':34 'javascript':93 'layer':65 'lightweight':60 'like':48 'load':20 'make':80 'manag':25 'minimum':71 'observ':15 'overhead':92 'provid':14 'quarter':37 'queri':55 'releas':33 'requir':39 'ship':43 'simpl':84 'simplifi':5 'stabl':29 'state':24 'typescript':44,96 'unlik':46 'updat':36 'usefetch':78 'version':30 'vue':2,10,40,50,54,57,95 'vue-apollo':49 'vue-fetch':1,56 'vue-queri':53 'without':90 'wrapper':89","created_at":"2026-06-07T17:02:58.123138+00:00","updated_at":"2026-06-07T17:02:58.123138+00:00","problems":[{"fix":"Use 'import { useFetch } from 'vue-fetch'' or set 'type':'module' in package.json.","cause":"Using 'const { useFetch } = require('vue-fetch')' in a CommonJS environment; v3 ships ESM only.","error":"TypeError: vue_fetch_1.useFetch is not a function"},{"fix":"Use application-level plugin and import useFetch in components instead.","cause":"Accessing global $fetch which was removed in v3.","error":"Property '$fetch' does not exist on type 'ComponentCustomProperties'"},{"fix":"Ensure app.use(VueFetchPlugin) is called before any component uses useFetch.","cause":"Calling useFetch before providing plugin configuration.","error":"Uncaught (in promise) TypeError: Cannot destructure property 'data' of '(intermediate value)' as it is undefined."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/bangbang93/vue-fetch#readme","github":"https://github.com/bangbang93/vue-fetch","docs":null,"changelog":null,"pypi":null,"npm":"vue-fetch","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}