Skip to main content

Getting Started with code | VUE (Single Bundle)

The @dhl-official/vue-library-single-bundle npm package is designed to provide the DHL User Interface Library components ready to be used in a vue application. It delivers a single bundle JavaScript file that contains all the necessary components.

It is important to note that the package does not provide a lazy loading feature. This means that all the components included in the bundle will be loaded upfront when the application starts. While this ensures that all the components are readily available for use, it may result in a larger initial bundle size and potentially slower loading times.

If lazy loading is a requirement for your application, you may consider using @dhl-official/vue-library.

Overall, the @dhl-official/vue-library-single-bundle package provides a convenient way to access and utilize the DHL User Interface Library components in a Vue application, but it does not include a built-in lazy loading feature.

Install​

npm install @dhl-official/vue-library-single-bundle

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​

Update your application entry-point to import the DUIL styles like this:

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

Use custom elements​

caution

When using the @dhl-official/vue-library-single-bundle package, it is not necessary to register the custom elements. This is because the package automatically registers the custom elements for you.

Therefore, you can simply import the required components from the package and use them in your code without the need to manually register the custom elements.

info

There is a bug in the stencil code that affects the usage of @dhl-official/vue-library-single-bundle.
As a result, it is necessary to manually import and execute the DHL User Interface Library global setup script.

Solution​

To address this issue, follow the steps below:

  • Import the initDUIL function from @dhl-official/stencil-library.
  • Execute the initDUIL function.

Code Snippet​

Use the following code snippet to import and execute the initDUIL function:

// workaround to bug: https://github.com/ionic-team/stencil/issues/5680
import { initDUIL } from "@dhl-official/stencil-library";
initDUIL();

The entry-point of your application should finally look like this:

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

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

import { DhlButton } from "@dhl-official/vue-library-single-bundle";
...
<dhl-button>Button</dhl-button>

Known issues​

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