To load the necessary variables we have to install the sass-loader into the project:
Finally, we can add the variables from the Design system through the vue.config.js file. Add the following to the file:
Loading a specific component
Now we can import a specific component directly from design system. Open src/Plugin.vue and add the following code. You need the import the component you want to use (Line 23) and use it in Vue as a component (Line 27) and then you should be able to use it in your template (Line 3).
Removing UI Kit
In this example, you probably wouldn't want to use the old UI Kit CSS, that is embedded in our index-latest.css. You can remove that asynchronous with the following function, for example in the pluginCreated function of the src/Plugin.vue file.
🍪 Cookie Notice