Integrate Univer with Vue

Vue 3+

Notes before integration

Univer is fully compatible with Vue, you can use all features of Univer in Vue.
You may need to use the toRaw method to get the raw object from a reactive object.

Integration steps

Initialize Univer in the onMounted hook
Destroy Univer in the onBeforeUnmount hook

Example code


<template>
  <div ref="container"></div>
</template>
 
<script setup>
import { onMounted, onBeforeUnmount, ref, toRaw } from 'vue'
 
import { createUniver, defaultTheme, LocaleType, merge } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
import UniverPresetSheetsCoreEnUS from '@univerjs/presets/preset-sheets-core/locales/en-US';
 
import '@univerjs/presets/lib/styles/preset-sheets-core.css';
 
const container = ref<HTMLElement | null>(null);
const univerAPIRef = ref<Univer | null>(null);
 
onMounted(() => {
  const { univerAPI } = createUniver({
    locale: LocaleType.EN_US,
    locales: {
      [LocaleType.EN_US]: merge(
        {},
        UniverPresetSheetsCoreEnUS,
      ),
    },
    theme: defaultTheme,
    presets: [
      UniverSheetsCorePreset({
        container: container.value,
      }),
    ],
  });
  
  univerAPI.createUniverSheet({ name: 'Test Sheet' });
 
  univerAPIRef.value = univerAPI;
});
 
onBeforeUnmount(() => {
  toRaw(univerRef.value)?.dispose();
  univerAPIRef.value = null;
});

Vue 2.x

Notes before integration

Univer usually works well in Vue 2.x, but the ComponentManager of Univer does not support Vue 2.x, so you cannot register components written based on Vue 2.x as custom components of Univer.
If you encounter the ResizeObserver loop limit exceeded warning in the development environment, you can ignore it, or you can refer to the code snippet below to solve it:


if (process.env.NODE_ENV === 'development') {
  const _ResizeObserver = window.ResizeObserver;
  function debounce(fn, delay) {
    let timer = null;
    return function() {
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        fn.apply(this, arguments);
      }, delay);
    };
  }
  window.ResizeObserver = class ResizeObserver extends _ResizeObserver{
    constructor(callback) {
      callback = debounce(callback, 50);
      super(callback)
    }
  }
}

Integration steps

Initialize Univer in the mounted hook
Destroy Univer in the beforeDestroy hook

Example code


<template>
  <div ref="container"></div>
</template>
 
<script>
import { createUniver, defaultTheme, LocaleType, merge } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
import UniverPresetSheetsCoreEnUS from '@univerjs/presets/preset-sheets-core/locales/en-US';
 
import '@univerjs/presets/lib/styles/preset-sheets-core.css';
 
export default {
  data() {
    return {
      univerAPI: null,
    };
  },
  mounted() {
    const { univerAPI } = createUniver({
      locale: LocaleType.EN_US,
      locales: {
        [LocaleType.EN_US]: merge(
          {},
          UniverPresetSheetsCoreEnUS,
        ),
      },
      theme: defaultTheme,
      presets: [
        UniverSheetsCorePreset({
          container: this.$refs.container,
        }),
      ],
    });
    
    univerAPI.createUniverSheet({ name: 'Test Sheet' });
 
    this.univerAPI = univerAPI;
  },
  beforeDestroy() {
    this.univerAPI.dispose();
    this.univerAPI = null;
  },
}