Skip to main content

init

Callback fired once after the first store initialization, before the first render effect runs. Use it to grab the API reference, attach data providers, register interceptors, or wire up setNext.

Subsequent prop-driven reinitializations don't re-fire init. The callback receives the same API object exposed via ref.

Usage​

init?: (api: KanbanInstanceApi) => void;
  • Default: undefined

Example​

Store an API reference for later use:

<script setup>
  import { Kanban } from "@svar-ui/vue-kanban";
  import { ref } from "vue";

  const api = ref(null);
</script>

<template>
  <Kanban :cards="cards" :columns="columns" :init="(a) => (api = a)" />
</template>

Attach a REST data provider during initialization:

<script setup>
  import { Kanban, RestDataProvider } from "@svar-ui/vue-kanban";

  const provider = new RestDataProvider("/api/board");
</script>

<template>
  <Kanban
    :cards="cards"
    :columns="columns"
    :init="(api) => api.setNext(provider)"
  />
</template>

Register an interceptor to validate cards before they're added:

<script setup>
  import { Kanban } from "@svar-ui/vue-kanban";
</script>

<template>
  <Kanban
    :cards="cards"
    :columns="columns"
    :init="(api) => {
      api.intercept('add-card', (ev) => {
        if (!ev.card.label) return false;
      });
    }"
  />
</template>
  • Working with server - attaching RestDataProvider via init
  • setNext - append a handler chain (typically called from init)
  • intercept - register interceptors (typically called from init)