vue3-fetch

library3.0.7jsnpmunverified

A Vue 3 component for making HTTP requests using the native Fetch API. Version 3.0.7 provides a declarative way to fetch data in Vue templates with built-in loading and error states, slot-based rendering, and support for GET/POST/PUT/DELETE methods. It requires Vue 3.0+ and offers a global or local component registration. Compared to axios-based solutions, it leverages the browser's native fetch and targets simplicity for JSON-based REST APIs. It is bundled with Vite and includes a CSS file for styling.

ecommerce

npm install vue3-fetch

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE3-FETCH

vue3-fetch

ecommercejavascriptv3.0.7

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.

Vue3Fetch

✓ import { Vue3Fetch } from 'vue3-fetch'

✗ import Vue3Fetch from 'vue3-fetch'

This is a named export, not default. Also import the CSS: 'vue3-fetch/dist/style.css'.

Shows global registration of the Vue3Fetch component and basic usage with slot props for loading and data.

// main.js import { createApp } from 'vue' import App from './App.vue' import { Vue3Fetch } from 'vue3-fetch' import 'vue3-fetch/dist/style.css' const app = createApp(App) app.component('vue3-fetch', Vue3Fetch) app.mount('#app') // App.vue <template> <vue3-fetch ref="fetchRef" fetchId="get-users" url="https://jsonplaceholder.typicode.com/users" > <template #default="{ isLoading, data }"> <div v-if="isLoading">Loading...</div> <div v-else v-for="user in data" :key="user.id"> {{ user.name }} </div> </template> </vue3-fetch> </template> <script setup> import { ref } from 'vue' const fetchRef = ref(null) </script>

Debug

Known issues

gotchaThe component only returns JSON responses; non-JSON responses will cause errors.

fix

Ensure the endpoint returns JSON, or handle the error via @fetch-error event.

affects: >=1.0.0

gotchaThe CSS file must be imported separately; otherwise the component may render without styling.

fix

Add import 'vue3-fetch/dist/style.css' in your main.js or component.

affects: >=3.0.0

gotchaThe component uses native Fetch API headers; do not include disallowed headers like 'Content-Type' for GET requests.

fix

Set headers only for POST/PUT/DELETE as needed; avoid overriding mandatory headers.

affects: >=1.0.0

Errors

Common errors & fixes

Uncaught (in promise) TypeError: Failed to fetch

Network error, CORS, or invalid URL; or the response is not JSON.

fix

Check the URL is correct and the server allows CORS. Ensure the response is valid JSON.

vue3-fetch is not defined

The component was not registered globally or locally.

fix

Register the component via app.component('vue3-fetch', Vue3Fetch) in main.js or import and add to components in a SFC.

Upgrade

Version history

3.0.7latest on npm

Audit

Dependencies

vuerequiredpeer dependency required for Vue 3 component functionality

Agent activity

39 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/vivy27/vue3-fetch ↗

packagevue3-fetch ↗

homepagehttps://github.com/vivy27/vue3-fetch#readme ↗