Data Synchronization

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

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,
     },
    },
   },
  },
 },
});