Vue

If you are looking for how to use Vue components as custom components, please refer to here.

Vue 3.x

Notes before integration

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

Vue

<script lang="ts" setup>import type { FUniver, Univer } from '@univerjs/presets'import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import { onBeforeUnmount, onMounted, ref } from 'vue'import '@univerjs/preset-docs-core/lib/index.css'const container = ref<HTMLElement | null>(null)let univerInstance: Univer | null = nulllet univerAPIInstance: FUniver | null = nullonMounted(() => {  const { univer, univerAPI } = createUniver({    locale: LocaleType.EN_US,    locales: {      [LocaleType.EN_US]: mergeLocales(        UniverPresetDocsCoreEnUS,      ),    },    presets: [      UniverDocsCorePreset({        container: container.value as HTMLElement,      }),    ],  })  univerAPI.createDocument({})  univerInstance = univer  univerAPIInstance = univerAPI})onBeforeUnmount(() => {  univerInstance?.dispose()  univerAPIInstance?.dispose()  univerInstance = null  univerAPIInstance = null})</script><template>  <div ref="container" /></template>

Vue 2.x

Notes before integration

When installing @univerjs/presets with pnpm, 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 refer to the code snippet below to resolve it:

TypeScript

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

Vue

<script>import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-docs-core/lib/index.css'export default {  mounted() {    const { univer, univerAPI } = createUniver({      locale: LocaleType.EN_US,      locales: {        [LocaleType.EN_US]: mergeLocales(          UniverPresetDocsCoreEnUS,        ),      },      presets: [        UniverDocsCorePreset({          container: this.$refs.container,        }),      ],    })    univerAPI.createDocument({})    this.univerInstance = univer    this.univerAPIInstance = univerAPI  },  beforeUnmount() {    this.univerInstance?.dispose()    this.univerAPIInstance?.dispose()    this.univerInstance = null    this.univerAPIInstance = null  },}</script><template>  <div ref="container" /></template>

How is this guide?