Vue

Vue plays nice with custom elements, so you can use Modes UI in your Vue apps with ease.

Installation

To add Modes UI to your Vue app, install the package from npm.

npm install @metsooutotec/modes-web-components

Next, include a theme and set the base path for icons and other assets. Setting the base path is important on Vue, as Modes UI cannot automatically find the path. In this example, we’ll import the light theme and set the base path.

import '@metsooutotec/modes-web-components/dist/themes/light.css';
import { setBasePath } from '@metsooutotec/modes-web-components/dist/utilities/base-path';

// point relative url path to your assets folder
// this is just an example and may not apply to your project's structure
setBasePath('./assets');

Configuration

To tell Vue you are not importing Vue components, you’ll need to tell Vue to ignore Modes UI components. As all Modes UI components are prefixed with mo-, it should be easy to target them. Below is an example config, using a Vite build of Vue.

import { fileURLToPath, URL } from 'url';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag.startsWith('mo-')
        }
      }
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});

After the configuration you should be able to use Modes UI components in your project without issue.

Usage

Binding complex data

When binding complex data such as objects and arrays, use the .prop modifier to make Vue bind them as a property instead of an attribute.

<mo-combobox :options.prop="myOptions"></mo-combobox>

Slots

To use Modes UI components with slots, follow the Vue documentation on using slots with custom elements.

Here is an example:

<mo-drawer label="Drawer" placement="start" class="drawer-placement-start" :open="drawerIsOpen">
  This drawer slides in from the start.
  <div slot="footer">
    <mo-button variant="primary" @click=" drawerIsOpen = false">Close</mo-button>
  </div>
</mo-drawer>