Skip to main content

Getting Started with code | VUE Legacy

Import DUIL Custom Elements

To install the DHL User Interface Library into your Vue application, import the following into your application entry-point:

import { ComponentLibrary } from "@dhl-official/ui-libraries/vue-library";

Enable custom elements​

In order to use the DHL User Interface Library's components in a Vue application you need to enable the usage of web-components. To do so, you can find the instruction at this link.

For example, to enable custom elements in an application that uses Vite, you can update your vite.config.ts as follows:

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat all tags that starts with "dhl" as web-components custom elements
          isCustomElement: (tag) => tag.toLowerCase().startsWith('dhl'),
        },
      },
    }),
    vueJsx(),
  ]
})

And then update your src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import "@dhl-official/ui-libraries/duil-styles-all.css";
import { ComponentLibrary } from '@dhl-official/ui-libraries/vue-library';
createApp(App).use(ComponentLibrary).mount('#app');
You should now be able to use DUIL components as following within your Vue application:
<DhlButton>Button</DhlButton>

Known issues​

In some instances the .prop attribute is needed for certain properties.
Read here for more information.