Intégrer dans Vue

Consultez d’abord l’installation et les premiers pas. Cet exemple utilise Vue pour monter Univer Bases dans un conteneur avec une hauteur explicite.

Étapes d’intégration

  1. Initialisez Univer dans onMounted.
  2. Libérez Univer dans onBeforeUnmount.

Exemple de code

Vue
<script setup lang="ts">import { onBeforeUnmount, onMounted, ref } from 'vue'import { UniverBasesPlugin } from '@univerjs-pro/bases'import { UniverBasesUIPlugin } from '@univerjs-pro/bases-ui'import BasesUIfrFR from '@univerjs-pro/bases-ui/locale/fr-FR'import BasesfrFR from '@univerjs-pro/bases/locale/fr-FR'import { UniverProFormulaEnginePlugin } from '@univerjs-pro/engine-formula'import { UniverLicensePlugin } from '@univerjs-pro/license'import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core'import DesignfrFR from '@univerjs/design/locale/fr-FR'import { UniverRenderEnginePlugin } from '@univerjs/engine-render'import { UniverUIPlugin } from '@univerjs/ui'import UIfrFR from '@univerjs/ui/locale/fr-FR'import '@univerjs/design/lib/index.css'import '@univerjs/ui/lib/index.css'import '@univerjs-pro/bases-ui/lib/index.css'const containerRef = ref<HTMLDivElement | null>(null)let univerInstance: Univer | undefinedonMounted(() => {  const container = containerRef.value  if (!container) return  const univer = new Univer({    locale: LocaleType.FR_FR,    locales: {      [LocaleType.FR_FR]: mergeLocales(        DesignfrFR,        UIfrFR,        BasesfrFR,        BasesUIfrFR,      ),    },  })  univer.registerPlugin(UniverLicensePlugin, {    license: 'your license.txt',  })  univer.registerPlugin(UniverRenderEnginePlugin)  univer.registerPlugin(UniverUIPlugin, { container })  univer.registerPlugin(UniverProFormulaEnginePlugin)  univer.registerPlugin(UniverBasesPlugin)  univer.registerPlugin(UniverBasesUIPlugin)  univer.createUnit(UniverInstanceType.UNIVER_BASE, {})  univerInstance = univer})onBeforeUnmount(() => univerInstance?.dispose())</script><template>  <div ref="containerRef" style="height: 600px" /></template>

Que pensez-vous de ce guide ?

© 2026 DreamNum Co., Ltd.