Vue - Intelligence Community Design System

Show navigation section

Step one

In the root of your project:

# using npm
npm install @ukic/web-components @ukic/fonts

# using yarn
rm package-lock.json
yarn add @ukic/web-components @ukic/fonts

Step two

Add the necessary options to your relevant configuration:

In-Browser config

This only works if using in-browser compilation.

app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith("ic-");

Vite config

Add the following to yourvite.config.js :

import vue from "@vitejs/plugin-vue";

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat any tag that starts with ic- as a custom element
          isCustomElement: (tag) => tag.startsWith("ic-"),
        },
      },
    }),
  ],
};

Vue CLI config

Add the following to yourvue.config.js :

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => ({
        ...options,
        compilerOptions: {
          // treat any tag that starts with ic- as a custom element
          isCustomElement: (tag) => tag.startsWith("ic-"),
        },
      }));
  },
};

Step three

Import defineCustomElements in yourmain.js file.

import { defineCustomElements } from "@ukic/web-components/loader";

Step four

Call defineCustomElements at the bottom ofmain.js .

//other configuration
...
defineCustomElements();

Step five

Add the following into the top level CSS file for your project.

@import "@ukic/fonts/dist/fonts.css";
@import "@ukic/web-components/dist/core/core.css";

In order to be rendered consistently across browsers and in line with modern standards, each of the components uses styles from a global CSS file based on Normalize.css .

If you would like to import these styles to apply them to the rest of your project and slotted elements used within any of the components, add the following into the top level CSS file as well.

@import "@ukic/web-components/dist/core/normalize.css";

Step six

Declare and use components in your file.

<ic-status-tag label="Neutral"></ic-status-tag>

Last reviewed 23 December 2024 .