Http

Nuxtの server/ ディレクトリに記載されたAPIから状態を取得します。

項目

How it works

Http Rest APIから状態を取得します。

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

State URI

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

nuxt.config.ts

nuxt.config.ts にカスタム プロトコルを登録します

ts
export default defineNuxtConfig({
  combadge: {
    protocol: {
      reqres: {
        type: "fetch",
        prefix: "https://reqres.in/api/",
      },
    }
  }
})

Use Custom Protocol

登録した State URI を利用します。

id email first_name last_name avatar
1george.bluth@reqres.inGeorgeBluth
2janet.weaver@reqres.inJanetWeaver
3emma.wong@reqres.inEmmaWong
4eve.holt@reqres.inEveHolt
5charles.morris@reqres.inCharlesMorris
6tracey.ramos@reqres.inTraceyRamos
vue
<template>
  <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>
      <c-list-item
        v-slot="{ item }"
        tag="tr"
        state-src="reqres://users"
        state-path="data"
      >
        <td>{{ item.id }}</td>
        <td>{{ item.email }}</td>
        <td>{{ item.first_name }}</td>
        <td>{{ item.last_name }}</td>
        <td>
          <b-img
            :src="item.avatar"
          />
        </td>
      </c-list-item>
    </tbody>
  </b-table>
</template>