# Fetch

Component name: <v-fetch>

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

# Examples

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

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

In the following example we set the per_page and page parameters using the query property.

This allows us to update parameters easily and get an updated response.

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

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

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
query	Object	The Object to be encoded as querystring parameters in request's URL.	{}
headers	Object	The Object to be included as headers in the request's. Useful for posting form data.	{}
data	Object	The Object to be transmited as JSON in request's body.	{}
url-change-loading-state-on	Boolean	Enables loading state when `url` changes after the initial fetch.	false
cache	Boolean or Number	Wether or not the request should be cached and re-used. `true` will cache forever. `Number` will set the amount of miliseconds to cache the result.	false

In order to access the fetched data, we're exposing a response object using Scoped slots (opens new window).

The response object contains the following information:

Name	Type	Description
loading	Boolean	Indicates whether 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.