Fetch

Component name: <v-fetch>

A simple, declarative, and composable way to fetch data.

Examples

Simple GET request

In the following example we are fetching a list of repositories (limited to 5) from the Vue.js Github organisition.

Loop through list

In the following example we are fetching and looping through a list of repositories (limited to 10) from the Vue.js Github organisition.

POST request

In the following example we are fetching and looping through a list of repositories (limited to 10) from the Vue.js Github organisition.

API

Name Type Description Default
method String Indicates the request method to be performed on the target resource (The most common ones being GET, POST, PUT, PATCH or DELETE) GET
url String URL of the resource you want to fetch. The response must be valid JSON. -
with-credentials Boolean By default, cookies will not be sent or received, resulting in unauthenticated requests if the site relies on maintaining a user session. This setting allows both CORS and same origin requests to work with cookies. false
data Object The Object to be transmited as JSON in request's body. {}

Scoped Slot

In order to access the fetched data, we're exposing a response object using Scoped slots.

The response object contains the following information:

Name Type Description
loading Boolean Indicates wether or not data is loading.
status Number Contains the status code of the response, e.g. 404 for a not found resource, 200 for a success.
ok Boolean Returns true if the request received a status in the OK range (200-299).
data Object The (parsed) JSON response that was provided by the server.