OpenPaaS Documentation logo OpenPaaS Documentation

Table of contents


A collection of Vue components are available to build Vue applications. Components are available at and can be used as dependency in any other OpenPaaS Vue projects.

npm install @linagora/vue-openpaas-components

Once installed, you can use them in your application by importing them:

import Vue from 'vue';
import OpenPaaSComponents from '@linagora/vue-openpaas-components';


Components are then available and can be used in any other component. For example, to display an OpenPaaS user avatar with its online status:

  <op-avatar size="48">
    <!-- Slots are not yet available, will work on this later -->
    <op-status :status="user.status" slot="bottom-right">

Develop new components

To add new components, you will have to follow some conventions. For example, to create a xyz component:

  1. Always use the op prefix
  2. Create a folder named opXyz under src/components
  3. Create your Vue component in a src/components/opXyz/opXyz.vue file
  4. In src/components/opXyz/index.js file, import your Vue component, then export it like

     import opXyz from './opXyz.vue';
     export { opXyz };
     export default opXyz;
  5. In src/components/index.js, export your component

     export * from './opXyz';
  6. The component will be automatically registered as a global component and you will be able to use it like <op-xyz/>

Use in development mode

While you are developing new components, you will need to link the current project in your Vue project with npm link:

  1. In this project run npm link
  2. In your project run npm link vue-openpaas-components