Nuxt Ignis

Appearance

Content features ​

Nuxt Ignis contains following customizable features related to content generation and displaying:

Nuxt Content ​

Nuxt Content is a powerful content management system for Nuxt applications that allows you to write content in Markdown, JSON, YAML, or CSV formats. It provides a flexible way to manage and display content in your application.

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

.env
dotenv
NUXT_PUBLIC_IGNIS_CONTENT_CONTENT_ENABLED=true

Or equivalently in nuxt.config.ts:

nuxt.config.ts
ts
export default defineNuxtConfig({
  extends: ['nuxt-ignis'],
  ignis: {
    content: { content: { enabled: true } },
  },
})

Usage notice ​

In order to use @nuxt-content via Nuxt Ignis, it is currently required to create a custom config file in the root of your project named content.config.ts with following contents:

content.config.ts
ts
import { loadContentConfig } from '@nuxt-ignis/content/config'

export default loadContentConfig({
  // your custom config here
})

Nuxt Ignis will scaffold default content.config.ts file on startup if none exists yet.

This will reference the default config provided by @nuxt-ignis/content that enables the default @nuxt-content collection in your project. The extra step is required as it seems not possible to transfer the config file from the layer.

To alter the default behavior, you can enhance the empty {} object passed to loadContentConfig() with your custom config.

Custom collections (different than the default content) can be defined here via special defineContentCollection helper. However, to overcome issues with path resolution, you need to specify where the source folder is located.

For example, a collection residing in the ./demo folder in your project root can be defined like this:

ts
import { fileURLToPath } from 'node:url'
import { loadContentConfig } from '@nuxt-ignis/content/config'

export default loadContentConfig({
  collections: {
    demo: defineContentCollection({
      source: {
        cwd: fileURLToPath(new URL('demo', import.meta.url)),
      },
      type: 'page',
    }),
  },
})

Referencing config like this allows to pass in a custom config that will be defu-merged with the defaults provided by Nuxt Ignis. Alternatively, you can completely ignore Nuxt Ignis' default config and create your own file based on Nuxt Content docs.

Usage notice - SQLite database ​

Currently, integration relies on Node native SQLite connector by default to eliminate external dependencies. This requires Node.js v22.5.0 or higher.

If you need backward compatibility with older Node versions, you can use content.experimental.sqliteConnector option in nuxt.config.ts to set different connector. Note that this will force you to add an explicit depenency on selected package (either sqlite or better-sqlite3) to your package.json.

I18N ​

Nuxt I18N is a module that provides internationalization support for your application. It allows you to easily manage translations and switch between different languages.

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

.env
dotenv
NUXT_PUBLIC_IGNIS_CONTENT_I18N_ENABLED=true

Or equivalently in nuxt.config.ts:

nuxt.config.ts
ts
export default defineNuxtConfig({
  extends: ['nuxt-ignis'],
  ignis: {
    content: { i18n: { enabled: true } },
  },
})

Additional options ​

  • All .json files with messages in @/i18n/locales folder will be auto-scanned and registered as available locales.
  • You can select default language locale via NUXT_PUBLIC_IGNIS_CONTENT_I18N_DEFAULT (or ignis.content.i18n.default in nuxt.config.ts). Falls back to en if not set.
  • If configured default locale (or fallback en) is not found in @/i18n/locales directory, a warning is produced and the first available locale (if any) will be used as default instead.
  • For other configuration refer to module docs.

Additional utils ​

Nuxt Ignis provides useT() composable function wrapped around useNuxtApp().$i18n.t(key) which is the natural (and tedious) way of accessing I18N translations in <script> blocks. It can also be used in <template> instead of $t. As a composable, it gets auto-imported and can be used simply as:

ts
const translation: string = useT(key: string)

useT() is designed to be operational even if Nuxt I18N is not enabled (although it doesn't make much sense). If so, it will try to fallback into contents of @/i18n/locales/en.json and look for the given key directly in this object. If the object does not contain the key or does not exist at all, it will produce a warning and return 'Translation not available'.

pslo ​

Packages:

This feature exists mainly because Nuxt Ignis origins in Czechia. In Czech language it is considered a typography error to have a single-letter word at the end of a line. To avoid this elrh-pslo package was created to provide a function to "Prevent Single Letter Orphans. The effect is achieved by replacing ordinary spaces with \xa0 Unicode character using regular expressions.

Nuxt Ignis allows simple integration of this function for more convenience.

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

.env
dotenv
NUXT_PUBLIC_IGNIS_CONTENT_PSLO_ENABLED=true

Or equivalently in nuxt.config.ts:

nuxt.config.ts
ts
export default defineNuxtConfig({
  extends: ['nuxt-ignis'],
  ignis: {
    content: { pslo: { enabled: true } },
  },
})

Additional options ​

  • NUXT_PUBLIC_IGNIS_CONTENT_PSLO_CONTENT (or ignis.content.pslo.content in nuxt.config.ts) - if both elrh-pslo and @nuxt/content are enabled, this allows or disallows Markdown content pre-processing with pslo function