Vue Component Registry

Description

The Livingdocs Editor can be customized by using your own components. Components are referenced by name in configurations. For Livingdocs to pick up your components, you need to register them first. Livingdocs provides an API to register custom components written in VueJS. They are always register with a certain type. The supported types are:

Depending on the type, you will get different props defined on your component. Please see below for details.

To register a custom component to be used in the result list of a custom dashboard, you would call the API like this:

const liEditor = require('@livingdocs/editor')()
liEditor.vueComponentRegistry.registerComponent({
  // type needs to be a valid type
  type: 'type',
  name: 'myComponent',
  component: require('path/to/your/vue/component.vue').default
})

As you can see, Vue Single File Components are supported.

Types

includeParamsSidebarForm

A includeParamsSidebarForm is used to render a form to manipulate params for doc-includes. This Guide shows you how to use such a component.

This component needs to take exactly one prop named params. It will contain an object with the params for the doc-include.

props: {
  params: {
    type: Object,
    required: true
  }
}

The component needs to emit a CustomEvent to tell Livingdocs when the params have changed. You can do this in a change event handler for example:

const event = new CustomEvent('update:params', {
  detail: this.paramsDraft,
  bubbles: true
})
this.$el.dispatchEvent(event)

dashboardCard

A dashboardCard is used to render a single search result in a dashboard.

These are the props which are provided to your vue component:

props: {
  result: {
    type: Object,
    required: true
  },
  options: {
    type: Object,
    required: true
  },
  contextMenuActions: {
    type: Array,
    required: true
  },
  cardActions: {
    type: Object,
    required: true
  }
}

searchFilter

A searchFilter registers a Vue component as filter for the search UI.

These are the props which are provided to your vue component:

props: {
  filter: {
    type: Object,
    default: () => {}
  }
},

A full example can be seen here

liDocumentListCardExtension

A liDocumentListCardExtension registers a Vue component that can be configured to be displayed on liDocumentListCard dashboard cards. here

These are the props which are provided to your vue component:

props: {
  options: {
    type: Object
  }
},

The options object looks like this:

{
  column: '', // either empty (when in search column) or 'inbox', 'published', 'inline-list-edit`
  listId: 1,
  documentId: 2
}

Valid inject:

  • authedHttp