Http

Overview

nuxt.config に事前に登録したサーバーに対してのみリクエスト可能です。

例外として、/api へのアクセス用に Nuxt Server API プロトコルがプリセットされています。

APIキーが必要な場合や、URLを隠蔽したい場合などは、代わりに Nuxt Server API を利用してください。

URI	{protocol}://{**name}
Path	nuxt.config.ts に登録されたPrefixの後に続くパスを記載します。
Example	reqres://users

nuxt.config.ts

事前に nuxt.config.ts にカスタムプロトコルとしてベースURLを登録します

Test APIである reqres.in を登録する例です。

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

ViewState

Basic

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

レスポンスデータのうち、data プロパティの内部のみを利用するため、path 属性で data を指定しています。

vue

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

List Example

データの取得を確認できれば、データを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

編集内容は data に反映されます。

デフォルトではサーバーにPUTリクエストは送信されません。

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

nuxt.config.ts に同期プロトコルとして登録すれば、編集の度にPUTリクエストが送信され、サーバーとデータを同期できます。

DelayとMaxWaitを設定できます。

同期結果は syncStatus と syncResult で確認できます。

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