# Интеграция в Vue

- Human documentation: [https://docs.univer.ai/ru-RU/guides/docs/getting-started/integrations/vue](https://docs.univer.ai/ru-RU/guides/docs/getting-started/integrations/vue)

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

- Requested language: `ru-RU`

- Content language: `ru-RU`

- Documentation version: `1.2.0`

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

---

> [!NOTE]
> Если вы ищете информацию о том, как использовать компоненты Vue в качестве пользовательских компонентов, обратитесь к [этому разделу](https://docs.univer.ai/ru-RU/guides/docs/ui/components.md#vue).

Перед интеграцией Univer в проект Vue прочитайте раздел [установки и базовой настройки](https://docs.univer.ai/ru-RU/guides/docs/getting-started/installation.md) и ознакомьтесь с компонентами Vue и хуками их жизненного цикла.

## Vue 3.x

### Примечания перед интеграцией

* Не создавайте прокси для экземпляров Univer и FUniver: это может привести к непредсказуемым ошибкам или проблемам с производительностью.

### Этапы интеграции

1. Инициализируйте Univer в хуке `onMounted`
2. Уничтожьте Univer в хуке `onBeforeUnmount`

### Пример

```vue
<script lang="ts" setup>
import type { Univer } from '@univerjs/presets'
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'
import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'
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 = null

onMounted(() => {
  const { univer, univerAPI } = createUniver({
    locale: LocaleType.EN_US,
    locales: {
      [LocaleType.EN_US]: mergeLocales(
        UniverPresetDocsCoreEnUS,
      ),
    },
    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

### Примечания перед интеграцией

* При установке `@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)
    }
  }
}
```

### Этапы интеграции

1. Инициализируйте Univer в хуке `mounted`
2. Уничтожьте Univer в хуке `beforeDestroy`

### Пример

```vue
<script>
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'
import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-docs-core/lib/index.css'

export default {
  mounted() {
    const { univer, univerAPI } = createUniver({
      locale: LocaleType.EN_US,
      locales: {
        [LocaleType.EN_US]: mergeLocales(
          UniverPresetDocsCoreEnUS,
        ),
      },
      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>
```