Nuxt setup

Create a Nuxt project using the following command (More info here: Nuxt Get Started)

npx nuxi@latest init <project-name>

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 in nuxt.config.ts.

Create a new .scss file (e.g. assets/variables.scss) and add the following lines to it:

$onedesign-root-path: "~@dnvgl-onefoundation/onedesign/src";
@import "@dnvgl-onefoundation/onedesign/src/scss/main.scss";

Declare the .scss file in nuxt.config.ts.

export default defineNuxtConfig({
    // Your other configurations
    // ...

    // Add this
    css: [
        "~/assets/variables.scss",
    ],
})

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.

Add CSS without Sass and SCSS

For a minified CSS import without worrying about the Sass variables, just add the following code to the nuxt.config.ts instead.

export default defineNuxtConfig({
  // Your other configurations
  // ...

  // Add this
  css: [
    "@dnvgl-onefoundation/onedesign/css/oneDesign.min.css",
  ],
})

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.

Simply add the following code to your nuxt.config.ts.

export default defineNuxtConfig({
  // Your other configurations
  // ...

  // Add this
  components: {
    dirs: [
      {
        path: "node_modules/@dnvgl-onefoundation/onedesign-vue/src/components/",
        prefix: "O",
        extensions: [".vue"],
        global: true,
      },
      "~/components",
    ],
  },
})

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 nuxt.config.ts to fix it.

export default defineNuxtConfig({
  // Your other configurations
  // ...

  // Add this
  vite: {
    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 to your nuxt.config.ts.

export default defineNuxtConfig({
  // Your other configurations
  // ...

  // Add this
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          api: 'modern-compiler'
        }
      }
    }
  }
})