Vue
If you are looking for how to use Vue components as custom components, please refer to here.
Vue 3.x
Notes before integration
- Univer completely supports integration in Vue, allowing you to use all Univer features within Vue.
- Avoid proxying the Univer and FUniver instances, as this may lead to unpredictable errors or performance issues.
Integration Steps
- Initialize Univer in the
onMounted
hook - Destroy Univer in the
onBeforeUnmount
hook
Example
<template>
<div ref="container"></div>
</template>
<script lang="ts" setup>
import { onMounted, onBeforeUnmount, ref } from 'vue'
import { createUniver, FUniver, LocaleType, merge, Univer } from '@univerjs/presets';
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core';
import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US';
import '@univerjs/preset-docs-core/lib/index.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(
{},
UniverPresetDocsCoreEnUS
),
},
presets: [
UniverDocsCorePreset({
container: container.value as HTMLElement,
}),
],
})
univerAPI.createUniverDoc({})
univerInstance = univer
univerAPIInstance = univerAPI
})
onBeforeUnmount(() => {
univerInstance?.dispose()
univerAPIInstance?.dispose()
univerInstance = null
univerAPIInstance = null
})
</script>
Vue 2.x
Notes before integration
- Univer can be integrated in Vue 2.x, but the Univer's
ComponentManager
does not support Vue 2.x, so you cannot register components written in Vue 2.x as custom components in Univer. - When installing
@univerjs/presets
with pnpm, you may need to manually installreact
andreact-dom
. - If you encounter the "ResizeObserver loop limit exceeded" warning in the development environment, you can ignore it or refer to the code snippet below to resolve 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
<template>
<div ref="container"></div>
</template>
<script>
import { createUniver, LocaleType, merge } from '@univerjs/presets';
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core';
import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US';
import '@univerjs/preset-docs-core/lib/index.css'
export default {
mounted() {
const { univer, univerAPI } = createUniver({
locale: LocaleType.EN_US,
locales: {
[LocaleType.EN_US]: merge(
{},
UniverPresetDocsCoreEnUS,
),
},
presets: [
UniverDocsCorePreset({
container: this.$refs.container,
}),
],
});
univerAPI.createUniverDoc({});
this.univerInstance = univer;
this.univerAPIInstance = univerAPI;
},
beforeDestroy() {
this.univerInstance?.dispose();
this.univerAPIInstance?.dispose();
this.univerInstance = null;
this.univerAPIInstance = null;
},
}
</script>