vue-example-project

This repo is an example of using Vue 3 / 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 commit history shows the steps taken to integrate Vue and Nord. Those steps 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 { 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.

Now everything is ready! In a component file (assuming use of 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) + TypeScript Vue Plugin (Volar).

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 TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

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 © 2022 Nordhealth Ltd.