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';
 
// If the preview content includes Umo Editor documents (i.e., 'html' is included in the mode configuration), you need to import Umo Editor styles
// Umo Editor version must not be less than 8.0.0
// import '@umoteam/editor/style'
 
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';
 
  // If the preview content includes Umo Editor documents (i.e., 'html' is included in the mode configuration), you need to import Umo Editor styles
  // Umo Editor version must not be less than 8.0.0
  // import '@umoteam/editor/style'
 
  const options = ref({
    // options
    // ...
  });
</script>
 
// Or using Options API
<script>
  import { UmoViewer } from '@umoteam/viewer';
 
  // If the preview content includes Umo Editor documents (i.e., 'html' is included in the mode configuration), you need to import Umo Editor styles
  // Umo Editor version must not be less than 8.0.0
  // import '@umoteam/editor/style'
 
  export default {
    components: {
      UmoViewer
    },
    data() {
      return {
        options: {
          // options
          // ...
        }
      }
    }
  }
</script>

Configuration

See Options.

Introduction Configuration