Nuxt Ignis

Appearance

UI features ​

Nuxt Ignis contains following customizable UI related features:

Nuxt UI ​

Packages:

Nuxt UI is an official UI library for Nuxt, providing a set of components and utilities to build user interfaces. It is designed to be flexible and easy to use and it might be a natural choice when building Nuxt applications. It also brings in Tailwind CSS and Nuxt Icon modules out of the box.

Nuxt UI is disabled by default. To enable it, you can use following environment variable:

dotenv
NUXT_PUBLIC_IGNIS_UI=true

Or UI preset:

dotenv
NUXT_PUBLIC_IGNIS_PRESET_UI=nuxt-ui

Usage notice ​

To abstract users from the requirment of adding CSS files manually, Nuxt Ignis is automatically including ignis-nuxt-ui.css with necessary import directives:

ignis-nuxt-ui.css
css
@import "tailwindcss";
@import "@nuxt/ui";

Your custom CSS files may be added via dedicated option.

Tailwind CSS ​

NOTE: Integration via @nuxtjs/tailwindcss module is temporarily bridged by direct Vite integration until v7 with updated Tailwind v4 support is released.

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without leaving your HTML. It is highly customizable and can be extended with plugins.

Tailwind CSS is disabled by default. To enable it, you can use following environment variable:

dotenv
NUXT_PUBLIC_IGNIS_TAILWIND=true

Or UI preset:

dotenv
NUXT_PUBLIC_IGNIS_PRESET_UI=tailwind

NOTE: If @nuxt/ui is enabled, this setting is ignored as Tailwind CSS is already included.

Usage notice ​

To abstract users from the requirment of adding CSS files manually, Nuxt Ignis is automatically including ignis-tailwind.css with necessary import directive:

ignis-tailwind.css
css
@import "tailwindcss";

Your custom CSS files may be added via dedicated option.

NOTE: In order to use Tailwind CSS utility classes in your custom CSS files, you still need to import tailwindcss set in each of them:

custom.css
css
@import "tailwindcss";

/* your custom CSS with Tailwind utility classes */

Open Props ​

Open Props is a collection of CSS custom properties (variables) that can be used to style your application. It provides a set of design tokens that can be used to create consistent and reusable styles across your application.

Open Props are disabled by default. To enable it, you can use following environment variable:

dotenv
NUXT_PUBLIC_IGNIS_OPENPROPS=true

Usage notice ​

To abstract users from the requirment of adding CSS files manually, Nuxt Ignis is automatically including ignis-open-props.css with necessary import directives. The file also contains definition for style shown on the Ignis Features overview page:

ignis-open-props.css
css
@import "open-props/normalize";
@import "open-props/buttons";

.openprops-feature {
  background: var(--gradient-18);
  color: var(--gray-12);
}

Your custom CSS files may be added via dedicated option.

Nuxt Charts ​

Nuxt Charts is a module for creating visualy appealing charts in your Nuxt application.

Nuxt Charts integration is an optional module and it is disabled by default. To enable it, you can use following environment variable:

dotenv
NUXT_PUBLIC_IGNIS_CHARTS=true

Usage notice ​

Because Nuxt Charts don't work with SSR, you need either to disable SSR in your app or make your charts client only. Check the dedicated docs page for more details.

Custom CSS ​

If you have custom CSS files you want to include in your project, you can do so by defining a comma-delimited array of paths as a value for the NUXT_PUBLIC_IGNIS_CSS environment variable.

Refer to this page for more details.