Web SDK

Vue に統合する

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

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

Vue 3.x

統合前の注意事項

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

統合手順

  1. onMounted フックで Univer を初期化する
  2. 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

統合前の注意事項

  • @univerjs/presets を pnpm でインストールする際は、手動で 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)    }  }}
  • Vue CLI 3.x/4.x (Webpack 4.x ベース) をビルドツールとして使用している場合、マッピングされたパスを実際のパスに手動で変更する必要があります。
JavaScript
// vue.config.jsconst path = require('node:path')module.exports = {  transpileDependencies: ['@wendellhu/redi'],  configureWebpack: {    resolve: {      alias: {        '@univerjs/core/facade': path.resolve(__dirname, 'node_modules/@univerjs/core/lib/facade.js'),        '@univerjs/engine-formula/facade': path.resolve(__dirname, 'node_modules/@univerjs/engine-formula/lib/facade.js'),        '@univerjs/preset-sheets-core/lib/index.css': path.resolve(__dirname, 'node_modules/@univerjs/preset-sheets-core/lib/index.css'),        '@univerjs/preset-sheets-core/locales/ja-JP': path.resolve(__dirname, 'node_modules/@univerjs/preset-sheets-core/lib/es/locales/ja-JP.js'),        '@univerjs/design/locale/ja-JP': path.resolve(__dirname, 'node_modules/@univerjs/design/lib/es/locale/ja-JP.js'),        '@univerjs/docs-ui/locale/ja-JP': path.resolve(__dirname, 'node_modules/@univerjs/docs-ui/lib/es/locale/ja-JP.js'),        '@univerjs/sheets-formula-ui/locale/ja-JP': path.resolve(__dirname, 'node_modules/@univerjs/sheets-formula-ui/lib/es/locale/ja-JP.js'),        '@univerjs/sheets-formula/locale/ja-JP': path.resolve(__dirname, 'node_modules/@univerjs/sheets-formula/lib/es/locale/ja-JP.js'),        '@univerjs/sheets-numfmt-ui/locale/ja-JP': path.resolve(__dirname, 'node_modules/@univerjs/sheets-numfmt-ui/lib/es/locale/ja-JP.js'),        '@univerjs/sheets-ui/locale/ja-JP': path.resolve(__dirname, 'node_modules/@univerjs/sheets-ui/lib/es/locale/ja-JP.js'),        '@univerjs/sheets/facade': path.resolve(__dirname, 'node_modules/@univerjs/sheets/lib/facade.js'),        '@univerjs/sheets/locale/ja-JP': path.resolve(__dirname, 'node_modules/@univerjs/sheets/lib/es/locale/ja-JP.js'),        '@univerjs/ui/locale/ja-JP': path.resolve(__dirname, 'node_modules/@univerjs/ui/lib/es/locale/ja-JP.js'),        '@wendellhu/redi/react-bindings': path.resolve(__dirname, 'node_modules/@wendellhu/redi/dist/esm/react-bindings/index.js'),        // ...      },    },  },}

統合手順

  1. mounted フックで Univer を初期化する
  2. beforeDestroy フックで Univer を破棄する

例

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,        }),      ],    })    univerAPI.createWorkbook({})    this.univerInstance = univer  },  beforeDestroy() {    this.univerInstance?.dispose()    this.univerInstance = null  },}</script><template>  <div ref="container" style="height: 600px" /></template>

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

© 2026 DreamNum Co., Ltd.