Vue
Vue
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/fontsStep two
Add options into your relevant config.
In-Browser config
// Only works if using in-browser compilation.
app.config.compilerOptions.isCustomElement = (tag) => tag.includes("-");Vite config
// vite.config.js
import vue from "@vitejs/plugin-vue";
export default {
plugins: [
vue({
template: {
compilerOptions: {
// treat all tags with a dash as custom elements
isCustomElement: (tag) => tag.includes("-"),
},
},
}),
],
};Vue CLI config
// vue.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 custom elements
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
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>