Nuxt server API

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

項目

How it works

Nuxt Server APIから状態を取得・設定します。

取得時はGetメソッド、更新時はPutメソッド、Action時はPostメソッドを利用します。

State URI

URI	api://{**path}
Scheme	api
Path	Server API へのパスとファイル名を指定します。
Example	api://{**path}

Server API

Nuxt Server APIに従ってAPIを作成します。

取得時はGetメソッド、更新時はPutメソッド、Action時はPostメソッドを利用します。

export default defineEventHandler((/*event*/) => {
 return {
  hello: 'world'
 }
})

Nuxt Server Storage

サブプロジェクトのNuxt Server Storageを利用すれば、コード記載せずにAPIを構成できます。

既定では storage/ パスに自動登録されます。

Example

world

vue

<template>
  <c-input state-src="api://hello" state-path="hello" />
  <c-label state-src="api://hello" state-path="hello" />
</template>

List

vue

<template>
  <ul>
    <c-list-item
      v-slot="{ item }"
      state-src="api://sample/list"
    >
      <span> {{ item }}</span>
    </c-list-item>
  </ul>
</template>

<script setup>

</script>

あいうえお
かきくけこ

vue

<template>
  <ul>
    <c-list-item
      v-slot="{ item }"
      state-src="api://sample/list"
    >
      <c-data
        v-slot="{ data }"
        :state-src="`api://sample/${item}`"
      >
        <span>{{ data }}</span>
      </c-data>
    </c-list-item>
  </ul>
</template>

<script setup>

</script>

Bind

vue

<template>
  <c-input state-src="api://storage/memory/demo-key" />
  <c-label state-src="api://storage/memory/demo-key" />
</template>

<script setup>

</script>

Bootstrap