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 { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreJaJP from '@univerjs/preset-docs-core/locales/ja-JP'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import { onBeforeUnmount, onMounted, ref } from 'vue'import '@univerjs/preset-docs-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( UniverPresetDocsCoreJaJP, ), }, presets: [ UniverDocsCorePreset({ container: container.value as HTMLElement, }), ], }) univerAPI.createDocument({}) univerInstance = univer})onBeforeUnmount(() => { univerInstance?.dispose() univerInstance = null})</script><template> <div ref="container" style="height: 600px" /></template>Vue 2.x
統合前の注意点
- pnpm で
@univerjs/presetsをインストールする場合、react と react-dom を手動で追加する必要があることがあります。 - 開発環境で
ResizeObserver loop limit exceededの警告が出る場合は無視して構いません。気になる場合は以下のスニペットで回避できます。
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) } }}統合手順
mountedフックで Univer を初期化beforeDestroyフックで Univer を破棄
サンプルコード
Vue
<script>import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreJaJP from '@univerjs/preset-docs-core/locales/ja-JP'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-docs-core/lib/index.css'export default { mounted() { const { univer, univerAPI } = createUniver({ locale: LocaleType.JA_JP, locales: { [LocaleType.JA_JP]: mergeLocales( UniverPresetDocsCoreJaJP, ), }, presets: [ UniverDocsCorePreset({ container: this.$refs.container, }), ], }) univerAPI.createDocument({}) this.univerInstance = univer }, beforeDestroy() { this.univerInstance?.dispose() this.univerInstance = null },}</script><template> <div ref="container" style="height: 600px" /></template>このガイドはいかがですか？