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 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>

Vue 2.x

기존 Vue 2 앱을 위한 절차입니다. Vue 2.7.16, Vite 6.3.6, @vitejs/plugin-vue2 2.3.3, Univer 1.3.0에서 검증했습니다. 새 프로젝트에는 Vue 3를 권장합니다.

빈 프로젝트에서 체험하려면 스타터를 풀고 npm install, npm run dev를 실행한 뒤 표시된 URL을 여세요. UI는 영어입니다. 기존 Vue 2 앱은 아래 절차를 따르세요.

의존성 버전 맞추기

Bash

npm install @univerjs/presets@1.3.0 @univerjs/preset-sheets-core@1.3.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 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>

실행 결과 확인

첫 행 금액이 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는 누락이나 중복 모듈을 숨길 수 있습니다.

이 가이드는 어떠셨나요?