Nova Components Vue provides an easy way to use Nova’s native Web Components within your Vue applications.
-
Nova Components Vue
- Key Features
- Installation
-
Setup Using Tailwind (Recommended)
- 1. Install Tailwind CSS and the Vite Plugin
- 2. Configure the Vite Plugin
- 3. Create
tailwind.config.ts - 4. Configure Tailwind and Nova Plugin in
main.css - 5. Register NovaComponents and include the Nova Tokens
- 6. Use Nova Components and Tailwind Utilities
- 7. Setup the Nova Font
- Creating Your Own Style Components with Tailwind
- Setup Without Tailwind (Not Recommended)
- Nova Font Pro Integration
- Lightweight Integration: Leverage Nova Web Components with minimal configuration in Vue.
- Customizable Styling: Use Tailwind (recommended) or Nova’s utility classes to quickly style components.
-
Dark Mode Ready: Toggle dark mode by adding the
darkclass to yourbodyelement. - Nova Font Pro Support: Easily integrate Nova’s custom font for a consistent design experience.
To begin, install the necessary Nova packages using your package manager:
npm install @nova-design-system/nova-webcomponents @nova-design-system/nova-base @nova-design-system/nova-vueor
yarn add @nova-design-system/nova-webcomponents @nova-design-system/nova-base @nova-design-system/nova-vueWe highly recommend using Tailwind CSS for styling, as it ensures an optimized bundle size and a powerful utility-first workflow. Nova offers a dedicated Tailwind plugin and theme, allowing you to seamlessly integrate Nova’s design tokens with Tailwind’s utility classes for a consistent and efficient styling workflow.
Tailwind Version This guide is written for Tailwind v4. While compatible with v3, some features may not work as expected.
Below is an example setup using the vue cli with vite. If you're using another framework, such as nuxt, please refer to the Tailwind Installation Guide.
npm install tailwindcss @tailwindcss/viteUse the Tailwind CSS IntelliSense Extension to get full autocomplete support for Tailwind and Nova tokens.
Add the tailwindcss plugin to your vite.config.ts:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/
export default defineConfig({
plugins: [vue(), vueJsx(), vueDevTools(), tailwindcss()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
})In the root of your project, create a tailwind.config.ts file and include the Nova theme:
import type { Config } from 'tailwindcss'
import { novaTailwindTheme } from "@nova-design-system/nova-base/theme"
export default {
theme: novaTailwindTheme,
} satisfies Configin src/assets/main.css:
@import 'tailwindcss';
@config "../../tailwind.config.ts";
@plugin "@nova-design-system/nova-base/theme/plugin";
@custom-variant dark (&:where(.dark, .dark *));Make sure to remove any other CSS that was generated by the Vue CLI.
Dark Mode To enable dark mode, add the
darkclass to the<body>element.
Register the Nova Components Vue plugin in your main.ts file, and include the nova tokens (Spark or Ocean theme) css file:
import './assets/main.css'
import '@nova-design-system/nova-base/dist/css/spark.css'; // or ocean.css
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { NovaComponents } from '@nova-design-system/nova-vue/plugin';
const app = createApp(App)
app.use(router)
app.use(NovaComponents)
app.mount('#app')<script setup lang="ts">
import { ref } from 'vue';
import { NvButton } from '@nova-design-system/nova-vue'
const count = ref(0);
</script>
<template>
<div class="flex items-center justify-center">
<NvButton danger @click="count++">
Count is {{ count }}
</NvButton>
</div>
</template>Note: We have full typescript and intellisense support for Nova components. If you do not see the autocomplete options, make sure you uninstall Volar or Vetur, and use the Vue - Official Extension only.
Follow the steps in the Nova Font Pro Integration section below.
If you find you’re repeating the same set of utility classes for certain UI elements (e.g., a card component), you can group them using Tailwind’s @apply keyword:
/* any css file */
.card {
@apply bg-gray-50 dark:bg-gray-500 p-4 rounded-md shadow-sm;
}Then in your markup, instead of:
<div class="bg-gray-50 dark:bg-gray-500 p-4 rounded-md shadow-sm">
{/* Content */}
</div>
<div class="bg-gray-50 dark:bg-gray-500 p-4 rounded-md shadow-sm">
{/* Content */}
</div>You can use your new card class:
<div class="card">
{/* Content */}
</div>
<div class="card">
{/* Content */}
</div>This ensures consistent styling and keeps your markup clean. Any colors or spacing used will reference the correct Nova Tokens.
If you don’t plan to use Tailwind, Nova provides a large utility CSS file for quick prototyping. Be aware that this approach will increase your CSS bundle size, offer less options, and lacks the flexibility and optimizations of Tailwind.
After installing the nova packages, you'll need to include the CSS for the theme and the utils. Then you register the Nova Components Vue plugin.
In your main.ts file:
import './assets/main.css'
import '@nova-design-system/nova-base/dist/css/nova-utils.css';
import '@nova-design-system/nova-base/dist/css/spark.css'; // or ocean.css
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { NovaComponents } from '@nova-design-system/nova-vue/plugin';
const app = createApp(App)
app.use(router)
app.use(NovaComponents)
app.mount('#app')<script setup lang="ts">
import { ref } from 'vue';
import { NvButton } from '@nova-design-system/nova-vue'
const count = ref(0);
</script>
<template>
<div class="flex items-center justify-center">
<NvButton danger @click="count++">
Count is {{ count }}
</NvButton>
</div>
</template>[!WARNING] Nova Fonts is a protected asset and is not included in the Nova Base package. You need to include the Nova Fonts CSS file in your project. To get the Nova Fonts URL, please contact us via Teams or get the URL in the Nova Design System internal wiki.
Once you have the URL, you can integrate it using any of these methods:
In your main.ts:
import './assets/main.css'
import '@nova-design-system/nova-base/dist/css/spark.css'; // or ocean.css
import 'https://novaassets.azureedge.net/fonts/nova-fonts-pro.css';
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { NovaComponents } from '@nova-design-system/nova-vue/plugin';
const app = createApp(App)
app.use(router)
app.use(NovaComponents)
app.mount('#app')In your index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://novaassets.azureedge.net/fonts/nova-fonts-pro.css">
</head>
<body>
<div id="app"></div>
</body>
</html>The nova-fonts-pro.css file includes both font definitions and the font-family rule for the body, automatically applying the fonts across your Vue application.