Integrar en Vue

Consulta primero la instalación y el uso básico. Este ejemplo usa Vue para montar Univer Boards en un contenedor con una altura explícita.

Pasos de integración

  1. Inicializa Univer en onMounted.
  2. Libera Univer en onBeforeUnmount.

Código de ejemplo

Vue
<script setup lang="ts">import { onBeforeUnmount, onMounted, ref } from 'vue'import { UniverBoardsPlugin } from '@univerjs-pro/boards'import { UniverBoardsUIPlugin } from '@univerjs-pro/boards-ui'import BoardsUIesES from '@univerjs-pro/boards-ui/locale/es-ES'import { UniverInkUIPlugin } from '@univerjs-pro/ink-ui'import InkUIesES from '@univerjs-pro/ink-ui/locale/es-ES'import { UniverLicensePlugin } from '@univerjs-pro/license'import { LocaleType, mergeLocales, Univer, UniverInstanceType } from '@univerjs/core'import DesignesES from '@univerjs/design/locale/es-ES'import { UniverDocsPlugin } from '@univerjs/docs'import { UniverDocsUIPlugin } from '@univerjs/docs-ui'import DocsUIesES from '@univerjs/docs-ui/locale/es-ES'import { UniverDrawingPlugin } from '@univerjs/drawing'import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui'import DrawingUIesES from '@univerjs/drawing-ui/locale/es-ES'import { UniverRenderEnginePlugin } from '@univerjs/engine-render'import { UniverUIPlugin } from '@univerjs/ui'import UIesES from '@univerjs/ui/locale/es-ES'import '@univerjs/design/lib/index.css'import '@univerjs/ui/lib/index.css'import '@univerjs/docs-ui/lib/index.css'import '@univerjs/drawing-ui/lib/index.css'import '@univerjs-pro/ink-ui/lib/index.css'import '@univerjs-pro/boards-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.ES_ES,    locales: {      [LocaleType.ES_ES]: mergeLocales(        DesignesES,        UIesES,        DocsUIesES,        DrawingUIesES,        InkUIesES,        BoardsUIesES,      ),    },  })  univer.registerPlugin(UniverLicensePlugin, {    license: 'your license.txt',  })  univer.registerPlugin(UniverRenderEnginePlugin)  univer.registerPlugin(UniverUIPlugin, { container })  univer.registerPlugin(UniverDocsPlugin)  univer.registerPlugin(UniverDocsUIPlugin)  univer.registerPlugin(UniverDrawingPlugin)  univer.registerPlugin(UniverDrawingUIPlugin)  univer.registerPlugin(UniverInkUIPlugin)  univer.registerPlugin(UniverBoardsPlugin)  univer.registerPlugin(UniverBoardsUIPlugin)  univer.createUnit(UniverInstanceType.UNIVER_BOARD, {})  univerInstance = univer})onBeforeUnmount(() => univerInstance?.dispose())</script><template>  <div ref="containerRef" style="height: 600px" /></template>

¿Cómo es esta guía?

© 2026 DreamNum Co., Ltd.