Installation

Install Nuvex UI, register the plugin, and load the base styles so your project is ready before moving into components, theming, or layout.

Install with npmView Nuxt Integration

Before you start

  • Vue 3 or Nuxt 4.
  • An existing project scaffold.
  • Sass installed if you plan to import framework.scss.

Choose your starting point

The base installation is short, but the file you need to touch changes with your stack.

Vue + Vite

Register Nuvex UI in main.ts and load global styles during app startup.

Nuxt

Register Nuvex UI in a plugin and load styles from nuxt.config.ts in the correct order.

Install the package

Choose the package manager you use in your project. If you plan to import framework.scss, install sass as well.

If you skip sass, the nuvex-ui/framework.scss import will fail at build time.

Minimum registration in Vue + Vite

In a Vue app, register the plugin in main.ts and load styles.css first, then framework.scss.

src/main.ts

Minimum registration in Nuxt

In Nuxt, register the plugin in app/plugins/nuvex-ui.ts and load styles from nuxt.config.ts.

This is the minimum setup required to install the library. Theme persistence, refined SSR behavior, and custom storage belong in a later integration or theming guide.

app/plugins/nuvex-ui.ts

nuxt.config.ts

Render a first component

Before moving into theming or layout, confirm that the library already renders a simple component.

Verify the installation

Use this list to confirm the base setup is correct before moving into other guides.

  1. The app compiles without Sass errors.
  2. The first component looks styled instead of rendering as unstyled HTML.
  3. An EButton renders without component registration warnings.
  4. Framework classes and base component styling are already visible if you imported framework.scss.

Common pitfalls

These setup issues usually show up when installing the library for the first time and are worth resolving before moving on.

framework.scss does not compile

Install sass in your project before importing nuvex-ui/framework.scss.

Styles do not look as expected

Verify load order: nuvex-ui/styles.css first, then nuvex-ui/framework.scss.

Components do not appear

Confirm that you registered NuvexUI with app.use(NuvexUI) or defineNuxtPlugin.

My Sass variables do not apply

If you plan to customize framework.scss, define your variables before importing the framework from your global stylesheet or your project's Sass configuration.

Recommended next step

Once the base installation is in place, the next step depends on whether you want to try components, structure screens, or customize the theme.

Quick Start

Build a first screen and confirm the base workflow with the library.

Button

Use a real Type B page as the first reference after setup.

Theming Overview

Continue with tokens, CSS variables, and theme customization.

App Shell

Move into layout once the base setup is already stable.