Vue に統合する

カスタムコンポーネントとして Vue コンポーネントを使用する方法をお探しの場合は、こちらをご参照ください。

Vue プロジェクトに Univer を統合する前に、インストールと基本的な使い方を読み、Vue のコンポーネントとライフサイクルフックを理解しておいてください。

Vue 3.x

統合前の注意事項

Univer と FUniver インスタンスのプロキシ化は避けてください。予期しないエラーやパフォーマンスの問題を引き起こす可能性があります。

統合手順

onMounted フックで Univer を初期化する
onBeforeUnmount フックで Univer を破棄する

例

Vue

<script lang="ts" setup>import type { Univer } from '@univerjs/presets'import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreJaJP from '@univerjs/preset-sheets-core/locales/ja-JP'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.JA_JP,    locales: {      [LocaleType.JA_JP]: mergeLocales(        UniverPresetSheetsCoreJaJP,      ),    },    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

既存の Vue 2 アプリ向けの手順です。Vue 2.7.16、Vite 6.3.6、@vitejs/plugin-vue2 2.3.3、Univer 1.4.0 で検証しています。新規プロジェクトには Vue 3 を推奨します。

空のプロジェクトで試すにはスターターを展開し、npm install と npm run dev を実行して表示された URL を開きます。UI は英語です。既存アプリには以下の手順を使います。

依存関係のバージョンをそろえる

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

ページにコンポーネントを追加

Univer と Facade をリアクティブな data に入れないでください。コンテナー作成後の mounted で初期化し、beforeDestroy で univer.dispose() を呼びます。同じインスタンスを Facade 経由でも破棄しないでください。

Vue

<script>import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'import UniverPresetSheetsCoreJaJP from '@univerjs/preset-sheets-core/locales/ja-JP'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-sheets-core/lib/index.css'export default {  mounted() {    const { univer, univerAPI } = createUniver({      locale: LocaleType.JA_JP,      locales: {        [LocaleType.JA_JP]: mergeLocales(          UniverPresetSheetsCoreJaJP,        ),      },      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>

動作を確認する

最初の行の金額が 36 になり、数量を 3 から 4 にすると 48 になることを確認します。コンポーネントを削除して再マウントし、破棄と再作成も確認してください。

初期化に失敗する場合

setConfig エラーでは、まずスターターと比較し、下のコマンドで依存ツリーを確認します。Univer のバージョンと React / ReactDOM の組み合わせをそろえてください。スタックトレースだけでは Vue 2 非対応とは判断できません。

Bash

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

編集領域だけが空白の場合はコンテナーの高さとプリセット CSS を確認してください。保存するインスタンスをリアクティブにしないでください。

Webpack 4 / Vue CLI 3–4

スターターは Vite と package exports を使用します。ビルド成功は Webpack 4 の検証を意味しません。古いツールが Facade や言語の exports を解決できない場合は更新を推奨します。不完全な alias は欠落や重複を隠すことがあります。

このガイドはいかがですか？