Nuxt server API

On this page

How it works

State URI

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

Server API

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

Nuxt Server 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

  • abc
  • def
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>