Getting Started
This guide helps you integrate umo-office-viewer into a Vue 3 project.
1. Install
1) Clone the official repository
git clone <Umo Office Viewer private repository URL>2) Install dependencies and build
npm install
npm run build3) Install the package
Assume the local repo is located at ../umo-office-viewer relative to your application:
npm install --save ../umo-office-viewer/packages/umo-office-viewer-xxx.tgz2. Usage
Choose one of the following integration patterns:
1) Global install
main.js
import { createApp } from 'vue'
import { useUmoOfficeViewer } from '@umoteam/office-viewer'
const app = createApp(App)
app.use(useUmoOfficeViewer, {
// options
// ...
})
app.mount('#app')2) Direct import
Use either the Composition API or Options API example below.
component.vue
<template>
<umo-office-viewer v-bind="options" />
</template>
// Composition API
<script setup>
import { ref } from 'vue'
import { UmoOfficeViewer } from '@umoteam/office-viewer'
const options = ref({
// options
// ...
})
</script>
// Or Options API
<script>
import { UmoOfficeViewer } from '@umoteam/office-viewer'
export default {
components: {
UmoOfficeViewer,
},
data() {
return {
options: {
// options
// ...
},
}
},
}
</script>3) Nuxt 3
Umo Office Viewer does not support SSR. Use <client-only> to render it on the client side.
component.vue
<template>
<client-only>
<umo-office-viewer v-bind="options" />
</client-only>
</template>
<script setup>
import { ref } from 'vue'
import { UmoOfficeViewer } from '@umoteam/office-viewer'
const options = ref({
// options
// ...
})
</script>3. Configuration
See Options. Before configuring, it is recommended to run Umo Office Convert.