ONLYOFFICE Docs Vue component

    Install ONLYOFFICE Docs Vue component from npm in your project. Run:

    or

    Using ONLYOFFICE Docs Vue component

    Find below the component usage example:

    1. <template>
    2.     <DocumentEditor 
    3.         id="docEditor" 
    4.         documentServerUrl="http://documentserver/"
    5.         :config="config"
    6.         :events_onDocumentReady="onDocumentReady"
    7.     /> 
    8. </template>
    10. <script lang="ts">
    11. import { defineComponent } from 'vue';
    12. import { DocumentEditor } from "@onlyoffice/document-editor-vue";
    13. export default defineComponent({
    15.     components: {
    16.         DocumentEditor
    17.     },
    18.     data() {
    19.         return {
    20.             config: {
    21.                 document: {
    22.                     fileType: "docx",
    23.                     key: "Khirz6zTPdfd7",
    24.                     title: "Example Document Title.docx",
    25.                     url: "https://example.com/url-to-example-document.docx"
    26.                 },
    27.                 documentType: "word",
    28.                 editorConfig: {
    30.                 }
    31.             }
    32.     },
    33.     methods: {
    34.         onDocumentReady() {
    35.             console.log("Document is loaded");
    36.         }
    37.     },
    38. });
    39. </script>

    where the example.com is the name of the server where document manager and document storage service are installed and the documentserver is the name of the server with ONLYOFFICE Docs installed.

    Properties

    Installing Storybook

    Install Storybook to develop UI components in isolation:

    1. Change the address of the document server in the config/default.json file:

      where the documentserver is the name of the server with ONLYOFFICE Docs installed.

    2. Build Storybook with the following command:

      1. npm run build-storybook

    3. Start Storybook:

      1. npm run storybook

    2. Install the project dependencies:

      1. npm install

    3. Test the component:

    4. Build the project:

    Feedback and support

    In case you have any issues, questions, or suggestions for the ONLYOFFICE Docs Vue component, please refer to the section.