Integrate Univer with Vue
Vue 3+
Notes before integration
- Univer is fully compatible with Vue, you can use all features of Univer in Vue.
Integration steps
- Initialize Univer in the
onMounted
hook - Destroy Univer in the
onBeforeUnmount
hook
Example code
<template>
<div ref="container"></div>
</template>
<script lang="ts" setup>
import { onMounted, onBeforeUnmount, ref } from 'vue'
import { createUniver, defaultTheme, FUniver, LocaleType, merge, Univer } 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)
let univerInstance: Univer | null = null
let univerAPIInstance: FUniver | null = null
onMounted(() => {
const { univer, univerAPI } = createUniver({
locale: LocaleType.EN_US,
locales: {
[LocaleType.EN_US]: merge(
{},
UniverPresetSheetsCoreEnUS
),
},
theme: defaultTheme,
presets: [
UniverSheetsCorePreset({
container: container.value as HTMLElement,
}),
],
})
univerAPI.createWorkbook({ name: 'Test Sheet' })
univerInstance = univer
univerAPIInstance = univerAPI
})
onBeforeUnmount(() => {
univerInstance?.dispose()
univerAPIInstance?.dispose()
univerInstance = null
univerAPIInstance = null
})
</script>
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. - When using pnpm to install
@univerjs/presets
, you may need to manually install react and react-dom. - 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 {
};
},
mounted() {
const { univer, univerAPI } = createUniver({
locale: LocaleType.EN_US,
locales: {
[LocaleType.EN_US]: merge(
{},
UniverPresetSheetsCoreEnUS,
),
},
theme: defaultTheme,
presets: [
UniverSheetsCorePreset({
container: this.$refs.container,
}),
],
});
univerAPI.createWorkbook({ name: 'Test Sheet' });
this.univerInstance = univer;
this.univerAPIInstance = univerAPI;
},
beforeDestroy() {
this.univerInstance?.dispose();
this.univerAPIInstance?.dispose();
this.univerInstance = null;
this.univerAPIInstance = null;
},
}
</script>
Last updated on