Skip to main content

Getting Started with code | VUE

The @dhl-official/vue-library npm package is designed to provide the DHL User Interface Library components ready to be used in a Vue application with the added benefit of lazy loading. This package offers a more optimized approach to loading components, resulting in improved performance and reduced initial bundle size.

With the lazy loading feature, the components are not loaded upfront when the application starts. Instead, they are loaded on-demand as they are needed. This allows for a more efficient use of network resources and faster initial loading times.

By using the @dhl-official/vue-library package, you can achieve a more optimized and efficient loading experience for your Vue application, while still benefiting from the rich set of components provided by the DHL User Interface Library.

In alternative, you may consider using @dhl-official/vue-library-single-bundle.

Install​

npm install @dhl-official/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'),
        },
      },
    }),
  ]
})

Add styles and register custom elements​

Update your application entry-point to import the DUIL styles and register custom elements:

import { createApp } from 'vue';
import App from './App.vue';
import "@dhl-official/tokens/index.css";
import { ComponentLibrary } from '@dhl-official/vue-library';
createApp(App).use(ComponentLibrary).mount('#app');

You should now be able to use DUIL components as following within your Vue application:

<dhl-button>Button</dhl-button>

Known issues​

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