# Vue에 통합하기

- Human documentation: [https://docs.univer.ai/ko-KR/guides/sheets/getting-started/integrations/vue](https://docs.univer.ai/ko-KR/guides/sheets/getting-started/integrations/vue)

- Agent Markdown: [https://docs.univer.ai/ko-KR/guides/sheets/getting-started/integrations/vue.md](https://docs.univer.ai/ko-KR/guides/sheets/getting-started/integrations/vue.md)

- Requested language: `ko-KR`

- Content language: `ko-KR`

- Documentation version: `1.0.4`

- Source: [sheets/getting-started/integrations/vue.ko-KR.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/getting-started/integrations/vue.ko-KR.mdx)

---

> [!NOTE]
> Vue 컴포넌트를 사용자 정의 컴포넌트로 사용하는 방법을 찾고 있다면 [여기](https://docs.univer.ai/ko-KR/guides/sheets/ui/components.md#vue)를 참고하세요.

Vue 프로젝트에 Univer를 통합하기 전에 [설치 및 기본 사용법](https://docs.univer.ai/ko-KR/guides/sheets/getting-started/installation.md)을 읽고 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 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 = null

onMounted(() => {
  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

### 통합 전 참고 사항

* 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)
    }
  }
}
```

* Vue CLI 3.x/4.x(Webpack 4.x 기반)를 빌드 도구로 사용하는 경우 매핑된 경로를 실제 경로로 직접 변경해야 합니다.

```javascript
// vue.config.js
const 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/en-US': path.resolve(__dirname, 'node_modules/@univerjs/preset-sheets-core/lib/es/locales/en-US.js'),
        '@univerjs/design/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/design/lib/es/locale/en-US.js'),
        '@univerjs/docs-ui/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/docs-ui/lib/es/locale/en-US.js'),
        '@univerjs/sheets-formula-ui/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/sheets-formula-ui/lib/es/locale/en-US.js'),
        '@univerjs/sheets-formula/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/sheets-formula/lib/es/locale/en-US.js'),
        '@univerjs/sheets-numfmt-ui/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/sheets-numfmt-ui/lib/es/locale/en-US.js'),
        '@univerjs/sheets-ui/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/sheets-ui/lib/es/locale/en-US.js'),
        '@univerjs/sheets/facade': path.resolve(__dirname, 'node_modules/@univerjs/sheets/lib/facade.js'),
        '@univerjs/sheets/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/sheets/lib/es/locale/en-US.js'),
        '@univerjs/ui/locale/en-US': path.resolve(__dirname, 'node_modules/@univerjs/ui/lib/es/locale/en-US.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 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,
        }),
      ],
    })

    univerAPI.createWorkbook({})

    this.univerInstance = univer
  },
  beforeDestroy() {
    this.univerInstance?.dispose()
    this.univerInstance = null
  },
}
</script>

<template>
  <div ref="container" style="height: 600px" />
</template>
```