3F Design v1.3.0

Fetch

Component name: <v-fetch>

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

API

Name Type Description Default
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

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.
data Object The (deserialized) JSON response that was provided by the server.

Example: Simple

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

Loading... 
<v-fetch url="https://api.github.com/orgs/vuejs/repos?per_page=5">
  <div slot-scope="response">
    <div v-if="response.loading">
      Loading...
    </div>
    <div v-else>
      {{response.data.length}} repositories found.
    </div>
  </div>
</v-fetch>
1
2
3
4
5
6
7
8
9
10

Example: Loop

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

Loading... 
<v-fetch url="https://api.github.com/orgs/vuejs/repos?per_page=10">
  <div slot-scope="response">
    <div v-if="response.loading">
      Loading...
    </div>
    <div v-else-if="response.status !== 200">
      Something went wrong
    </div>
    <ul v-else>
      <li v-for="repo in response.data">
        <a :href="repo.html_url" target="_blank">{{repo.name}}</a>
      </li>
    </ul>
  </div>
</v-fetch>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

←