Vue setup

Create a Vue project using the following command (More info here: Vue Quick Start)

npm create vue@latest

Before installing OneDesign-Vue

Add OneDesign-Styles to your project using the provided CDN or following the NPM Setup.

If using the NPM setup, declare the styles at the top of your main .scss file and import it at the top of your main.js file.

Check Configuration for relevant dependency hot-fixes.

If you haven't yet, add your project .npmrc file to your project root folder.

If you need help on creating your npmrc file, follow the steps here to create the file and generate the Authentication token.

Install OneDesign-Vue

Install OneDesign-Vue with the following command:

npm install @dnvgl-onefoundation/onedesign-vue@latest

The package used the same custom registry as the OneDesign styles.

Global component import

The OneDesign-Vue components as a whole can be imported globally in the app. This way you'll have access to all of the OneDesign components without explicitly importing them every time you need them.

Just add two lines to your main.js.

import App from "./App.vue";
import OneDesignVue from "@dnvgl-onefoundation/onedesign-vue"; // 1. Import plugin

const app = createApp(App);
app.use(OneDesignVue); // 2. Use plugin
app.mount("#app");

Local component import

If you don't want to import everything globally, each component can be selectively imported in whatever file they're needed.

<script setup>
import OButton from "@dnvgl-onefoundation/onedesign-vue/src/components/Button";
</script>

It's also possible to give imported components different names.

<script setup>
import RenamedButton from "@dnvgl-onefoundation/onedesign-vue/src/components/Button";
</script>

Configuration

Fix Uncaught SyntaxError error

Dependency lodash.uniqueid might throw an Uncaught SyntaxError because it is structured with named exports, and Vite may not handle this correctly without optimization. Add it to optimized dependencies in your vite.config.js to fix it.

export default defineConfig({
  // Other configurations
  // ...

  // Add this
  optimizeDeps: {
    include: ["lodash.uniqueid"],
  },
});

Fix sass-loader deprecation warnings

The default sass-loader API is marked legacy and prints warnings when running npm run dev. You can explicitly choose the modern-compiler to get rid of the warnings.

Add the following configuration under the defineConfig in your vite.config.js file.

export default defineConfig({
  // Other configurations
  // ...

  // Add this
  css: {
    preprocessorOptions: {
      scss: {
        api: "modern-compiler",
      },
    },
  },
});