Http

Overview

Requests can only be made to servers that are pre-registered in nuxt.config.

As an exception, the Nuxt Server API protocol is preset for access to /api.

If you need an API key or want to hide a URL, please use the Nuxt Server API instead.

URI	{protocol}://{**name}
Path	Specify the path that follows the prefix registered in nuxt.config.ts.
Example	reqres://users

nuxt.config.ts

This is an example of registering the test API reqres.in .

export default defineNuxtConfig({
 usebootstrap: {
  integration: {
   protocol: {
    reqres: {
     type: 'fetch',
     prefix: 'https://reqres.in/api/',
    },
   },
  },
 },
});

ViewState

Basic

This is an example using the test API reqres.in .

vue

<template>
 <ViewState
  v-slot="users"
  src="reqres://users"
 >
  <JsonView :data="users.data" />
 </ViewState>
</template>

{
 "page": 1,
 "per_page": 6,
 "total": 12,
 "total_pages": 2,
 "data": [
  {
   "id": 1,
   "email": "george.bluth@reqres.in",
   "first_name": "George",
   "last_name": "Bluth",
   "avatar": "https://reqres.in/img/faces/1-image.jpg"
  },
  {
   "id": 2,
   "email": "janet.weaver@reqres.in",
   "first_name": "Janet",
   "last_name": "Weaver",
   "avatar": "https://reqres.in/img/faces/2-image.jpg"
  },
  {
   "id": 3,
   "email": "emma.wong@reqres.in",
   "first_name": "Emma",
   "last_name": "Wong",
   "avatar": "https://reqres.in/img/faces/3-image.jpg"
  },
  {
   "id": 4,
   "email": "eve.holt@reqres.in",
   "first_name": "Eve",
   "last_name": "Holt",
   "avatar": "https://reqres.in/img/faces/4-image.jpg"
  },
  {
   "id": 5,
   "email": "charles.morris@reqres.in",
   "first_name": "Charles",
   "last_name": "Morris",
   "avatar": "https://reqres.in/img/faces/5-image.jpg"
  },
  {
   "id": 6,
   "email": "tracey.ramos@reqres.in",
   "first_name": "Tracey",
   "last_name": "Ramos",
   "avatar": "https://reqres.in/img/faces/6-image.jpg"
  }
 ],
 "support": {
  "url": "https://contentcaddy.io?utm_source=reqres&utm_medium=json&utm_campaign=referral",
  "text": "Tired of writing endless social media content? Let Content Caddy generate it for you."
 }
}

Path

Since only the internal data property of the response data is used, the path attribute specifies data.

vue

<template>
 <ViewState
  v-slot="users"
  src="reqres://users"
  path="data"
 >
  <JsonView :data="users.data" />
 </ViewState>
</template>

List Example

Once the data retrieval is confirmed, the data will be assigned to elements using Vue.

id	email	first_name	last_name	avatar

vue

<template>
 <ViewState
  v-slot="users"
  src="reqres://users"
  path="data"
 >
  <b-table striped>
   <thead>
    <tr>
     <th scope="col">
      id
     </th>
     <th scope="col">
      email
     </th>
     <th scope="col">
      first_name
     </th>
     <th scope="col">
      last_name
     </th>
     <th scope="col">
      avatar
     </th>
    </tr>
   </thead>
   <tbody>
    <tr
     v-for="item in users.data"
     :key="item"
    >
     <td>{{ item.id }}</td>
     <td>{{ item.email }}</td>
     <td>{{ item.first_name }}</td>
     <td>{{ item.last_name }}</td>
     <td>
      <Avatar
       circle
       :img-src="item.avatar"
       :img-alt="item.first_name"
      />
     </td>
    </tr>
   </tbody>
  </b-table>
 </ViewState>
</template>

Detail Example

The edits will be reflected in the data.

By default, a PUT request is not sent to the server.

first_name

{
 "id": 5,
 "email": "charles.morris@reqres.in",
 "first_name": "Charles",
 "last_name": "Morris",
 "avatar": "https://reqres.in/img/faces/5-image.jpg"
}

vue

<template>
 <ViewState
  v-slot="user"
  src="reqres://users/5"
  path="data"
 >
  <Row margin="b-3">
   <BColFormLabel
    for="staticEmail"
    class="col-sm-2"
   >
    Email
   </BColFormLabel>
   <Col col="sm-10">
    <BFormInput
     type="text"
     :state-src="user"
     state-path="email"
    />
   </Col>
  </Row>
  <Row margin="b-3">
   <BColFormLabel
    for="inputPassword"
    class="col-sm-2"
   >
    first_name
   </BColFormLabel>
   <Col col="sm-10">
    <BFormInput
     type="text"
     :state-src="user"
     state-path="first_name"
    />
   </Col>
  </Row>
  <JsonView :data="user.data" />
 </ViewState>
</template>

Data Synchronization

If you register it as a synchronization protocol in nuxt.config.ts, a PUT request will be sent with each edit, synchronizing the data with the server.

You can set Delay and MaxWait.

The synchronization results can be checked with syncStatus and syncResult.

export default defineNuxtConfig({
 usebootstrap: {
  viewState: {
   protocol: {
    'reqres-sync': {
     type: 'fetch',
     prefix: 'https://reqres.in/api/',
     sync: {
      method: 'put',
      delay: 1000,
      maxWait: 3000,
     },
    },
   },
  },
 },
});