Nuxt Ignis

Appearance

Performance ​

Following modules helps you with your app performance:

Nuxt Fonts ​

Nuxt Fonts is an official module for working with web fonts. It allows you to easily integrate and optimize web fonts.

@nuxt/fonts is a default feature and it is enabled by default. To disable it, you can use following environment variable:

.env
dotenv
NUXT_PUBLIC_IGNIS_DEFAULT_FONTS=false

Or equivalently in nuxt.config.ts:

nuxt.config.ts
ts
export default defineNuxtConfig({
  extends: ['nuxt-ignis'],
  ignis: {
    default: { fonts: false },
  },
})

Nuxt Image ​

Nuxt Image is an official module for working with images. Resize and transform your images using built-in optimizer or your favorite images CDN.

@nuxt/image is a default feature and it is enabled by default. To disable it, you can use following environment variable:

.env
dotenv
NUXT_PUBLIC_IGNIS_DEFAULT_IMAGE=false

Or equivalently in nuxt.config.ts:

nuxt.config.ts
ts
export default defineNuxtConfig({
  extends: ['nuxt-ignis'],
  ignis: {
    default: { image: false },
  },
})

Note: Nuxt Ignis uses @nuxt/image v2 which includes some breaking changes. Please refer to the migration guide if you experience troubles after switching.

Usage notice ​

Keep in mind that with the default ipx provider, sharp runtime is being bundled into server-side code. This both increases the server bundle size (by more than 20 MB) and especially makes the build potentially platform-dependant. See the Sharp Cross-Platform Installation in the module docs.

Nuxt Scripts ​

Nuxt Scripts is an official module for working with scripts. It lets you load third-party scripts with better performance, privacy, security and DX. It includes many popular third-parties out of the box.

@nuxt/scripts is a default feature and it is enabled by default. To disable it, you can use following environment variable:

.env
dotenv
NUXT_PUBLIC_IGNIS_DEFAULT_SCRIPTS=false

Or equivalently in nuxt.config.ts:

nuxt.config.ts
ts
export default defineNuxtConfig({
  extends: ['nuxt-ignis'],
  ignis: {
    default: { scripts: false },
  },
})

Pinia ​

Pinia is a de-facto standard Vue solution for state management. It is type safe, extensible, modular by design and SSR-friendly with tiny runtime.

pinia is a default feature and it is enabled by default. To disable it, you can use following environment variable:

.env
dotenv
NUXT_PUBLIC_IGNIS_DEFAULT_PINIA=false

Or equivalently in nuxt.config.ts:

nuxt.config.ts
ts
export default defineNuxtConfig({
  extends: ['nuxt-ignis'],
  ignis: {
    default: { pinia: false },
  },
})