Nuxt Ignis

Appearance

Validation features ​

Nuxt Ignis offers two alternatives for schema validation:

Zod ​

Packages:

Zod is a TypeScript-first schema declaration and validation library that allows you to define schemas for your data and validate them at runtime. It provides a simple and intuitive API for defining schemas and validating data against them.

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

.env
dotenv
NUXT_PUBLIC_IGNIS_VALIDATION_ZOD=true

Or Validation preset:

.env
dotenv
NUXT_PUBLIC_IGNIS_PRESET_VALIDATION=zod

Or equivalently in nuxt.config.ts:

nuxt.config.ts
ts
export default defineNuxtConfig({
  extends: ['nuxt-ignis'],
  ignis: {
    validation: { zod: true },
    // or via preset:
    // preset: { validation: 'zod' },
  },
})

Usage notice ​

In order to use zod in Nuxt Ignis conditionally, we wrapped its import into a composable. In order to use it, you need to import it in a file like this:

your-zod-validator.ts
ts
const z = (await useZod())!

You can then use z object as you would normally do in your project.

NOTE: We are using await here, because the import is dynamic at runtime. And because the composable may technically return undefined (only if the relevant setting is not enabled), we add exclamation mark to avoid TS complaints.

For quick schema validation, helper function isValidByZod is available. It will return true/false based on Zod's safeParse result:

your-code.ts
ts
const ZodSchema = z.object({
  // ...
})

const object = { 
  // ...
}

const isValid: boolean = await isValidByZod(ZodSchema, object)

Server-side: Both useZod and isValidByZod are also available as auto-imports in server routes and utilities (e.g. server/api/*.ts, server/utils/*.ts).

Valibot ​

Packages:

Valibot is a TypeScript-first schema validation library that allows you to define schemas for your data and validate them at runtime. It provides a simple and intuitive API for defining schemas and validating data against them.

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

.env
dotenv
NUXT_PUBLIC_IGNIS_VALIDATION_VALIBOT=true

Or Validation preset:

.env
dotenv
NUXT_PUBLIC_IGNIS_PRESET_VALIDATION=valibot

Or equivalently in nuxt.config.ts:

nuxt.config.ts
ts
export default defineNuxtConfig({
  extends: ['nuxt-ignis'],
  ignis: {
    validation: { valibot: true },
    // or via preset:
    // preset: { validation: 'valibot' },
  },
})

Usage notice ​

In order to use valibot in Nuxt Ignis conditionally, we wrapped its import into a composable. In order to use it, you need to import it in a file like this:

your-valibot-validator.ts
ts
const v = (await useValibot())!

You can then use v object as you would normally do in your project.

NOTE: We are using await here, because the import is dynamic at runtime. And because the composable may technically return undefined (only if the relevant setting is not enabled), we add exclamation mark to avoid TS complaints.

For quick schema validation, helper function isValidByValibot is available. It will return true/false based on Valibot's safeParse result:

your-code.ts
ts
const ValibotSchema = v.object({
  // ...
})

const object = { 
  // ...
}

const isValid: boolean = await isValidByValibot(ValibotSchema, object)

Server-side: Both useValibot and isValidByValibot are also available as auto-imports in server routes and utilities (e.g. server/api/*.ts, server/utils/*.ts).