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/',
     headers: {
      'x-api-key': 'reqres-free-v1',
     },
    },
   },
  },
 },
});

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: {
  integration: {
   protocol: {
    'reqres-sync': {
     type: 'fetch',
     prefix: 'https://reqres.in/api/',
     headers: {
      'x-api-key': 'reqres-free-v1',
     },
     sync: {
      method: 'put',
      delay: 1000,
      maxWait: 3000,
     },
    },
   },
  },
 },
});

first_name

{
 "valid": false,
 "location": {},
 "summury": {
  "errors": [],
  "keywords": []
 },
 "schema": {}
}

vue

<template>
 <ViewState
  v-slot="user"
  src="reqres-sync://users/5"
  path="data"
  schema-src="app-config://usebootstrap/schemas/basic"
 >
  <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">
    <BInputGroup margin="b-3">
     <BFormInput
      type="text"
      :state-src="user"
      state-path="first_name"
     />
     <BInputGroupText style="width:3em;">
      <Spinner
       v-show="user.syncStatus == 100"
       spinner="grow"
       sm
      />
     </BInputGroupText>
    </BInputGroup>
   </Col>
  </Row>
  <JsonView
   v-if="user.validationResult && !user.validationResult.valid"
   :data="user.validationResult"
  />
  <JsonView
   v-else
   :data="user.syncResult"
  />
 </ViewState>
</template>

ActionState

ボタンをクリックしてデータを送信する例です。

actionメソッドのパラメータで、HttpMedhodとBodyを指定します。

vue

<template>
 <ActionState src="reqres://login?delay=1">
  <template #default="{ action }">
   <b-button
    color="primary"
    @click="action('post', { email: 'eve.holt@reqres.in', password: 'cityslicka' })"
   >
    Action
   </b-button>
  </template>
  <template #fallback>
   <b-button
    color="primary"
    disabled
   >
    <Spinner
     spinner="grow"
     sm
     aria-hidden="true"
    />
    Loading...
   </b-button>
  </template>
  <template #complete="{ data, status }">
   <div v-if="status.value == 200">
    Response: {{ data }}
   </div>
   <div v-else>
    ErrorMessages: {{ data }}
   </div>
   <b-button
    color="success-subtle"
    @click="status.value = 0"
   >
    Retry
   </b-button>
  </template>
 </ActionState>
</template>

Bootstrap

Browse docs