@nova-design-system/nova-vue
v3.0.0-beta.27
Published
Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.
Downloads
471
Keywords
Readme
Nova Components Vue
Nova Components Vue is a Vue.js wrapper that allows you to seamlessly integrate Nova's native UI elements into your Vue applications. This package provides Vue-compatible components, making it easy to build modern and consistent user interfaces with Nova UI components in a Vue environment.
Installation
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-vueSetup
After installing the packages, you'll need to include the Nova UI CSS and register the Nova Components Vue plugin in your main.ts file:
import { createApp } from 'vue';
import App from './App.vue';
import '@nova-design-system/nova-base/dist/css/nova-utils.css';
import '@nova-design-system/nova-base/assets/nova-fonts.css';
import '@nova-design-system/nova-base/dist/css/spark.css'; // or ocean.css
import { NovaComponents } from '@nova-design-system/nova-vue/plugin';
createApp(App).use(NovaComponents).mount('#app');This setup makes Nova's web components available throughout your Vue application.
Nova Font Pro Integration
To use Nova fonts in your Vue application, you'll need to contact the Nova team via Teams, email, or check the Nova Wiki to obtain the full CDN URL. Once you have the URL, you can integrate it using any of these methods:
Option 1: Import in Main Entry (Recommended)
In your main.ts or main.js:
import { createApp } from 'vue';
import App from './App.vue';
import '@nova-design-system/nova-base/dist/css/nova-utils.css';
import '@nova-design-system/nova-base/dist/css/spark.css';
import 'https://novaassets.azureedge.net/fonts/nova-fonts-pro.css';
createApp(App).mount('#app');Option 2: HTML Integration
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.
Usage
With the setup complete, you can now use Nova components in your Vue components. Here's a quick example:
<script setup lang="ts">
import { ref } from 'vue';
import { NvButton } from '@nova-design-system/nova-vue';
const count = ref(0);
</script>
<template>
<NvButton danger @click="count++">count is {{ count }}</NvButton>
</template>In this example, the NvButton component is imported and used within a Vue component. The danger prop is passed to style the button, and the @click event handler is used to increment the count variable.
Conclusion
Nova Components Vue provides a convenient way to integrate Nova's native web components into your Vue.js projects. By following the simple setup steps, you can start using these powerful UI components in your Vue applications right away. For more detailed documentation and examples, refer to the official Nova documentation.