Getting Started

Umo Viewer is a document viewer built with Vue3. You can visit https://www.umodoc.com/en/demo?target=viewer to experience and test some of Umo Viewer’s features.

Installation

Install via NPM

npm install --save @umoteam/viewer

pnpm add @umoteam/viewer

yarn add @umoteam/viewer

bun add @umoteam/viewer

Usage

Choose one of the following usage methods:

Global Installation

main.js

import { createApp } from 'vue'
import { useUmoViewer } from '@umoteam/viewer'
 
// Import the required version of Umo Editor styles
import '@umoteam/editor/style'
 
// Requires Umo Editor version 8.0.0 or later
const app = createApp(App)
app.use(useUmoViewer, {
  // options
  // ...
})
app.mount('#app')

Direct Import

You can use either the Composition API or Options API as shown below:

component.vue

<template>
  <umo-viewer v-bind="options" />
  <!-- Or -->
  <!-- 
  <umo-viewer 
    lang="en-US"
    ... 
  /> -->
</template>
 
// Using Composition API
<script setup>
import { ref } from 'vue'
import { UmoViewer } from '@umoteam/viewer'
 
// Requires Umo Editor version 8.0.0 or later
const options = ref({
  // options
  // ...
})
</script>
 
// Or using Options API
<script>
import { UmoViewer } from '@umoteam/viewer'
 
// Requires Umo Editor version 8.0.0 or later
export default {
  components: {
    UmoViewer,
  },
  data() {
    return {
      options: {
        // options
        // ...
      },
    }
  },
}
</script>

Configuration

See Options.

Introduction Configuration