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

Initialisez Univer dans le hook onMounted
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>

Cette section concerne les applications Vue 2 existantes. Exemple vérifié avec Vue 2.7.16, Vite 6.3.6, @vitejs/plugin-vue2 2.3.3 et Univer 1.4.0. Préférez Vue 3 pour un nouveau projet.

Pour partir de zéro, extrayez le starter, lancez npm install puis npm run dev et ouvrez l’URL affichée. Son interface est en anglais. Pour un projet existant, suivez les étapes ci-dessous.

Installer des dépendances cohérentes

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

Ajouter le composant à votre page

Ne placez pas Univer ni Facade dans les data réactives. Initialisez dans mounted, une fois le conteneur présent, et appelez univer.dispose() dans beforeDestroy. Ne détruisez pas une seconde fois la même instance via 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>

Vérifier le résultat

Le premier montant doit être 36. Passez la quantité de 3 à 4 et vérifiez 48. Retirez puis remontez le composant pour vérifier sa destruction et sa recréation.

En cas d’échec d’initialisation

Pour une erreur setConfig, comparez au starter et inspectez les dépendances avec la commande suivante. Gardez une seule version cohérente des paquets Univer et un couple React / ReactDOM compatible. Une trace seule ne prouve pas une incompatibilité avec Vue 2.

Bash

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

Si seule la zone d’édition est vide, vérifiez sa hauteur et l’import du CSS du preset. Ne rendez pas l’instance Univer réactive pour la conserver dans le composant.

Webpack 4 / Vue CLI 3–4

Le starter utilise Vite et les exports de paquets ; sa compilation ne valide pas Webpack 4. Si votre ancien outil ne résout pas les exports Facade ou des langues, privilégiez sa mise à niveau. Une liste d’alias incomplète peut masquer des modules absents ou dupliqués.

Que pensez-vous de ce guide ?