Web SDK

Intégrer dans Vue

Si vous cherchez comment utiliser des composants Vue en tant que composants personnalisés, consultez cette section.

Avant d’intégrer Univer dans un projet Vue, consultez l’installation et les premiers pas et familiarisez-vous avec les composants Vue et leurs hooks de cycle de vie.

Vue 3.x

Remarques avant l’intégration

  • Évitez de créer des proxys pour les instances Univer et FUniver, car cela peut entraîner des erreurs imprévisibles ou des problèmes de performances.

Étapes d’intégration

  1. Initialisez Univer dans le hook onMounted
  2. Détruisez Univer dans le hook onBeforeUnmount

Exemple

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

Remarques avant l’intégration

  • Lorsque vous installez @univerjs/presets avec pnpm, vous devrez peut-être installer manuellement react et react-dom.
  • Si l’avertissement « ResizeObserver loop limit exceeded » s’affiche dans l’environnement de développement, vous pouvez l’ignorer ou consulter l’extrait de code ci-dessous pour le résoudre :
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)    }  }}
  • Si vous utilisez Vue CLI 3.x/4.x (basé sur Webpack 4.x) comme outil de build, vous devez remplacer manuellement les chemins mappés par les chemins réels :
JavaScript
// vue.config.jsconst path = require('node:path')module.exports = {  transpileDependencies: ['@wendellhu/redi'],  configureWebpack: {    resolve: {      alias: {        '@univerjs/core/facade': path.resolve(__dirname, 'node_modules/@univerjs/core/lib/facade.js'),        '@univerjs/engine-formula/facade': path.resolve(__dirname, 'node_modules/@univerjs/engine-formula/lib/facade.js'),        '@univerjs/preset-sheets-core/lib/index.css': path.resolve(__dirname, 'node_modules/@univerjs/preset-sheets-core/lib/index.css'),        '@univerjs/preset-sheets-core/locales/en-US': path.resolve(__dirname, 'node_modules/@univerjs/preset-sheets-core/lib/es/locales/en-US.js'),        '@univerjs/design/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/design/lib/es/locale/en-US.js'),        '@univerjs/docs-ui/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/docs-ui/lib/es/locale/en-US.js'),        '@univerjs/sheets-formula-ui/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/sheets-formula-ui/lib/es/locale/en-US.js'),        '@univerjs/sheets-formula/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/sheets-formula/lib/es/locale/en-US.js'),        '@univerjs/sheets-numfmt-ui/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/sheets-numfmt-ui/lib/es/locale/en-US.js'),        '@univerjs/sheets-ui/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/sheets-ui/lib/es/locale/en-US.js'),        '@univerjs/sheets/facade': path.resolve(__dirname, 'node_modules/@univerjs/sheets/lib/facade.js'),        '@univerjs/sheets/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/sheets/lib/es/locale/en-US.js'),        '@univerjs/ui/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/ui/lib/es/locale/en-US.js'),        '@wendellhu/redi/react-bindings': path.resolve(__dirname, 'node_modules/@wendellhu/redi/dist/esm/react-bindings/index.js'),        // ...      },    },  },}

Étapes d’intégration

  1. Initialisez Univer dans le hook mounted
  2. Détruisez Univer dans le hook beforeDestroy

Exemple

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,        }),      ],    })    univerAPI.createWorkbook({})    this.univerInstance = univer  },  beforeDestroy() {    this.univerInstance?.dispose()    this.univerInstance = null  },}</script><template>  <div ref="container" style="height: 600px" /></template>

Que pensez-vous de ce guide ?

© 2026 DreamNum Co., Ltd.