Integrate in Vue

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

Before integrating Univer into an Vue project, read installation and basic usage and familiarize yourself with Vue components and lifecycle hooks.

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 { Univer } from '@univerjs/presets'import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import { onBeforeUnmount, onMounted, ref } from 'vue'import '@univerjs/preset-sheets-core/lib/index.css'const container = ref<HTMLElement | null>(null)let univerInstance: Univer | null = nullonMounted(() => {  const { univer, univerAPI } = createUniver({    locale: LocaleType.EN_US,    locales: {      [LocaleType.EN_US]: mergeLocales(        UniverPresetSheetsCoreEnUS,      ),    },    presets: [      UniverSheetsCorePreset({        container: container.value as HTMLElement,      }),    ],  })  univerAPI.createWorkbook({})  univerInstance = univer})onBeforeUnmount(() => {  univerInstance?.dispose()  univerInstance = null})</script><template>  <div ref="container" style="height: 600px" /></template>

Vue 2.x

Use this section for an existing Vue 2 application. The example is verified with Vue 2.7.16, Vite 6.3.6, @vitejs/plugin-vue2 2.3.3 and Univer 1.4.0. For a new project, prefer Vue 3.

For a clean project, extract the starter, run npm install and npm run dev, then open the printed URL. Its interface is English. For an existing Vue 2 project, follow the steps below.

Install matching dependencies

Bash

npm install @univerjs/presets@1.4.0 @univerjs/preset-sheets-core@1.4.0 react@18.3.1 react-dom@18.3.1 rxjs@7.8.2

Add this component to your page

Keep Univer instances and Facade objects outside reactive data. Create the editor in mounted after the container exists, and call univer.dispose() in beforeDestroy; do not also dispose the same instance through Facade.

Vue

<script>import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'export default {  mounted() {    const { univer, univerAPI } = createUniver({      locale: LocaleType.EN_US,      locales: {        [LocaleType.EN_US]: mergeLocales(          UniverPresetSheetsCoreEnUS,        ),      },      presets: [        UniverSheetsCorePreset({          container: this.$refs.container,        }),      ],    })    this.univerInstance = univer    this.univerAPI = univerAPI    const workbook = univerAPI.createWorkbook({})    workbook.getActiveSheet().getRange('A1:D3').setValues([      ['Item', 'Quantity', 'Unit price', 'Total'],      ['Notebook', 3, 12, '=B2*C2'],      ['Pen', 5, 2, '=B3*C3'],    ])  },  beforeDestroy() {    this.univerInstance?.dispose()    this.univerInstance = null    this.univerAPI = null  },}</script><template>  <div ref="container" style="height: 600px" /></template>

Check the result

The first row total is 36. Change quantity from 3 to 4 and confirm it becomes 48. Remove and remount the component to check cleanup.

If initialization fails

For setConfig errors, first compare your setup with the starter and inspect the dependency tree below. Keep one matching set of Univer packages and a compatible React/ReactDOM pair. A stack trace alone does not establish that Vue 2 is unsupported.

Bash

npm ls @univerjs/core @univerjs/ui @univerjs/presets @univerjs/preset-sheets-core react react-dom

If only the editor area is blank, check that its container has a height and that preset CSS is imported. Do not make the Univer instance reactive to store it in the component.

Webpack 4 / Vue CLI 3–4

The starter uses Vite and package exports. Its successful build does not verify Webpack 4. If your legacy build cannot resolve Facade or locale exports, prefer upgrading the build tool; copying a partial alias list can hide missing or duplicate modules.

How is this guide?