@gumnutdev/vue

Gumnut Vue

Setup

• As Gumnut uses Custom Elements internally, your Vue configuration must follow the steps here. You can treat all tags with a dash as custom elements, or just those starting with "gumnut-".

• You should call configureGumnut from within your app's entrypoint/index JS.

Example

To use Gumnut, you must call useGumnutDoc. This uses Vue's provide/inject behavior to connect all Gumnut... components.

<script setup lang="ts">
import { buildTestToken } from '@gumnutdev/api';
import { GumnutText } from '@gumnutdev/vue';
import { useGumnutDoc } from '../api/useGumnutDoc.ts';

useGumnutDoc({
  docId: 'hello',
  getToken: () => buildTestToken(),
});
</script>

<template>
  <GumnutText name="another.prop" class="special" />
  <GumnutFocus name="another.prop" />
</template>

<style scoped>
.special {
  /* GumnutText has no styling by default, not even a border */
  background: pink;
}
</style>

Data Example

You can use the <GumnutData> component to read and operate on a node directly.

<template>
  <GumnutData name="text" v-slot="{ value, dirty, clients, model }">
    Text node value={{ value }}
  </GumnutData>
</template>

Array Example

Interact with arrays of data via <GumnutArray>:

<template>
  <GumnutArray name="arr">
    <template #item="{ index, key }">
      <div>index={{ index }} key={{ key }}</div>
      <!-- This will be nested within the array -->
      <GumnutText name="prop" />
    </template>
    <template #meta="{ model }">
      <!-- Get access to the array's underlying model in the #meta slot -->
      Meta model length={{ model?.length() }}
    </template>
  </GumnutArray>
</template>