Frameworks

Nova Components Native Setup

Nova Components allows you to use Nova's native UI elements directly in your HTML pages without the need for a framework like React. This setup is ideal for projects where you prefer a simple, framework-independent approach while still leveraging the power and flexibility of Nova UI components.

Installation

To get started, include the necessary Nova packages in your project. You can install them via npm or yarn if you're using a package manager, or you can link directly to the CSS and JavaScript files from your project.


                                                
                                                npm install @nova-design-system/nova-webcomponents @nova-design-system/nova-base


                                                
                                                yarn add @nova-design-system/nova-webcomponents @nova-design-system/nova-base

In some case, you might experience SSL certificate issues when working on Developers' VM. As documented in the Developers' setup guide, you need to turn off the SSL certificate verification:


                                                
                                                npm config set strict-ssl false

Setup

After installing the package, you'll need to include the Nova UI CSS and define the custom elements in your JavaScript setup file. Here's an example setup file (setup.js):


                                                
                                                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 url('https://novaassets.azureedge.net/fonts/nova-fonts-pro.css'); // replace with the correct font url
                                                import { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
                                                
                                                defineCustomElements();

This file sets up the Nova components and styles, making them available for use in your HTML.

[!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.

Usage

Once the setup is complete, you can use Nova components directly in your HTML. Here's an example of how to use the nv-button component:


                                                
                                                <!DOCTYPE html>
                                                <html lang="en">
                                                <head>
                                                  <meta charset="UTF-8">
                                                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                                  <title>Nova Components Example</title>
                                                  <script type="module" src="setup.js"></script>
                                                </head>
                                                <body>
                                                  <nv-button id="counter" danger>Click me</nv-button>
                                                
                                                  <script>
                                                    const button = document.getElementById('counter');
                                                    let count = 0;
                                                
                                                    button.addEventListener('click', () => {
                                                      count += 1;
                                                      button.textContent = `Count is ${count}`;
                                                    });
                                                  </script>
                                                </body>
                                                </html>

In this example, the nv-button component is used directly in the HTML, and a simple JavaScript script is included to handle the button click event.

Conclusion

Nova Components Vanilla makes it easy to integrate Nova's web components into any project without the overhead of a frontend framework. With just a few lines of setup, you can start building rich, interactive user interfaces using Nova UI components. For more detailed documentation and examples, refer to the official Nova documentation.