Skip to main content

Vue

Ask AI
Copy a prompt to ask an AI assistant about this page.

Vue is a progressive framework for building user interfaces, known for its simplicity and flexibility. This section guides you through the steps to install and set up our design system within a Vue project, ensuring a smooth and efficient integration process.

Library installation​

Install @siemens/ix, @siemens/ix-vue and @siemens/ix-icons using a package manager:

npm install @siemens/ix @siemens/ix-vue @siemens/ix-icons

Usage​

import '@siemens/ix/dist/siemens-ix/siemens-ix.css';

import { createApp } from 'vue';
import { ixPlugin } from '@siemens/ix-vue';
import Root from './App.vue';

const app = createApp(App);

app.use(ixPlugin);

app.mount('#root');

Set the data-ix-theme attribute of the <html> tag to the theme of choice (e.g. classic) and the corresponding data-ix-color-schema attribute to the value light, dark or system to set the color scheme. system will automatically apply the color scheme of the users’ operating system.

<html data-ix-theme="classic" data-ix-color-schema="dark">
  <!-- Framework related imports -->
  <!--  -->
  <body></body>
</html>