vue-example-project

This repo is an example of using Vue 3 with Vite along with Nord Design System's components. TypeScript is used, but this is not a necessity for using Vue and Nord together.

This repo can be forked as a starting point for new apps. However, you may wish to undertake the process yourself so that all dependencies are up to date, and you can choose which Vue features you would like to use. The steps to integrate Vue and Nord are described next.

Setting up a project from scratch

First initialize a new Vue project. This will ask a series of questions, to determine your project name, and which Vue features you would like to use:

npm init vue@latest

Follow any instructions printed in the terminal.

Next install Nord dependencies:

npm install @nordhealth/components @nordhealth/css --save

When complete, open your editor and navigate to the vite.config file. You must configure Vue to support web components:

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
-    vue()
+    vue({
+      template: {
+        compilerOptions: {
+          // treat all tags with a dash as custom elements
+          isCustomElement: (tag) => tag.includes('-')
+        }
+      }
+    })
  ]
}

In your main.js or main.ts file, import the Nord dependencies:

// main.js
import './assets/main.css';

import { createApp } from 'vue';
import App from './App.vue';

import '@nordhealth/css';
import '@nordhealth/components';

createApp(App).mount('#app');

This will ensure Nord styles are included in your app, and register all Web Components ready for use.

To get types and IntelliSense for Nord components in templates of Vue Single-File Components, add the following to your tsconfig.json in a TypeScript project, or jsconfig.json in a JavaScript project:

{
  "compilerOptions": {
    "types": ["@nordhealth/components/lib/vue.d.ts"]
  }
}

Now everything is ready! In a component file (assuming use of Vue Single-File Components and Composition API), you can start using Nord:

<script setup>
import { ref } from 'vue';

const name = ref('');
const count = ref(0);
</script>

<template>
  <nord-input label="Your name" v-model="name"></nord-input>
  <p>{{ name }}</p>

  <nord-button variant="primary" @click="count++">
    Count: {{ count }}
  </nord-button>
</template>

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

Clone this repo, then:

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Can I use Nord in my own project?

Nord Design System is solely meant for building digital products and experiences for Nordhealth. Please see LICENSE for full license details.

Getting support

If you experience any issues while getting started with any of Nord’s tools, please head over to the Support page for more guidelines and help.

Copyright

Copyright © 2025 Nordhealth Ltd.