# 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.

# GET request with querystring

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.

# 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.

# Form data 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
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

# Scoped Slot

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.