Vue API Reference

Vue 3 Integration Reference

Reference

[1]

Vue Adapter

The @velo-sci/notebook-vue package provides components and composables for Vue 3.

[2]

Usage

[3]

<template>
  <SciNotebook
    :notebook="initialData"
    theme="dark"
    :showToolbar="true"
    @change="handleChange"
    :engineRef="engineRef"
  />
</template>

<script setup>
import { SciNotebook } from '@velo-sci/notebook-vue';
import { ref } from 'vue';

const initialData = ref({ /* ... */ });
const engineRef = ref(null);

const handleChange = (nb) => {
  console.log('Notebook updated', nb);
};
</script>

[4]

Composables

[5]

• useNotebook(): Reactive reference to current state
• useCell(cellId): Reactive reference to a specific cell
• useSciNotebook(): Imperative engine access