Nuxt Ignis

Appearance

Utility features ​

Nuxt Ignis offers following utility options:

VueUse ​

VueUse is a collection of essential Vue Composition Utilities that provides a set of reusable functions and utilities for Vue.js applications. It includes features like reactive state management, event handling, and more.

VueUse integration 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_VUEUSE=false

Or equivalently in nuxt.config.ts:

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

VueEquipment ​

VueEquipment is a collection of Vue composables and plugins that provides a set of reusable functions and utilities for Vue.js applications.

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

.env
dotenv
NUXT_PUBLIC_IGNIS_UTILS_EQUIPMENT_ENABLED=true

Or equivalently in nuxt.config.ts:

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

Additional options ​

Simply enabling VueEquipment actually does nothing as you also need to specify which composables and/or plugins you want to use.

There are two config values for this purpose:

  • NUXT_PUBLIC_IGNIS_UTILS_EQUIPMENT_COMPOSABLES (or ignis.utils.equipment.composables in nuxt.config.ts) - which Vue Equipment composables should be imported (comma-separated list)
  • NUXT_PUBLIC_IGNIS_UTILS_EQUIPMENT_PLUGINS (or ignis.utils.equipment.plugins in nuxt.config.ts) - which Vue Equipment plugins should be imported (comma-separated list)

The values must be a comma-separated list of available composables and plugins(see the docs).

For example:

.env
dotenv
NUXT_PUBLIC_IGNIS_UTILS_EQUIPMENT_COMPOSABLES=useCountdown
NUXT_PUBLIC_IGNIS_UTILS_EQUIPMENT_PLUGINS=MagicNoise, MagicMarquee

Or equivalently in nuxt.config.ts:

nuxt.config.ts
ts
export default defineNuxtConfig({
  extends: ['nuxt-ignis'],
  ignis: {
    utils: {
      equipment: {
        enabled: true,
        composables: 'useCountdown',
        plugins: 'MagicNoise, MagicMarquee',
      },
    },
  },
})

Whitespaces around will be trimmed, so it doesn't matter if you add or omit them.

Nuxt SEO ​

Nuxt SEO is a collection of Nuxt modules that handles all of the technical aspects in growing your sites organic traffic.

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

.env
dotenv
NUXT_PUBLIC_IGNIS_CONTENT_SEO_ENABLED=true

Or equivalently in nuxt.config.ts:

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

Usage notice ​

If you use @nuxtjs/seo module and also have set NUXT_PUBLIC_IGNIS_CONFIG_NUXT_SSR=false (or ignis.config.nuxt.ssr: false in nuxt.config.ts), modules from Nuxt SEO pack requiring SSR (ogImage and schemaOrg) will be disabled by default. You may still override this in your project's nuxt.config.ts, but it will produce their built-in warning on startup.

With ssr:false it is currently required to additionally provide value for NUXT_PUBLIC_SITE_URL to allow static sitemap prerender.

NOTE: If you don't use Nuxt Ignis configuration and set ssr: false directly in your project's nuxt.config.ts, modules mentioned above won't be disabled and you will get the warning, unless you turn them off manually.

Additional options ​

Nuxt OG Image secret ​

Nuxt OG Image (bundled in @nuxtjs/seo) should receive the NUXT_OG_IMAGE_SECRET environment variable for URL tamper protection when running in SSR mode. In DEV mode only, Nuxt Ignis auto-generates a cryptographically secure 64-character hex secret and assigns it to process.env.NUXT_OG_IMAGE_SECRET under the following conditions:

  • the project is running in DEV mode
  • NUXT_OG_IMAGE_SECRET is not set yet
  • @nuxtjs/seo module integration is enabled
  • SSR is not disabled via the respective Nuxt Ignis config option
  • Zero Runtime is not enabled via the respective Nuxt Ignis config option
  • nuxt-og-image is not explicitly disabled (ogImage: { enabled: false } in nuxt.config.ts)
  • nuxt-og-image is not running in zero-runtime mode (ogImage: { zeroRuntime: true } in nuxt.config.ts)

The generated value is also written into the project's .env file (with a warning comment) so it stays stable across dev server restarts and is visible to the developer. If NUXT_OG_IMAGE_SECRET is already declared in .env, the file is left untouched.

For production

It is DISCOURAGED to use the auto-generated secret from development in production as it poses a potential security risk.

Rather than reuse the local value, generate a fresh value with npx nuxt-og-image generate-secret for your production environment.

Nuxt Auth Utils ​

Nuxt Auth Utils is a set of utilities for handling authentication in Nuxt applications.

Nuxt Auth Utils 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_AUTH=false

Or equivalently in nuxt.config.ts:

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

Nuxt Social Share ​

Nuxt Social Share is a module providing seamless integration for sharing content to various social networks from your Nuxt application.

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

.env
dotenv
NUXT_PUBLIC_IGNIS_CONTENT_SOCIAL_ENABLED=true

Or equivalently in nuxt.config.ts:

nuxt.config.ts
ts
export default defineNuxtConfig({
  extends: ['nuxt-ignis'],
  ignis: {
    content: { social: { enabled: true, url: 'https://example.com' } },
  },
})

Additional options ​

  • NUXT_PUBLIC_IGNIS_CONTENT_SOCIAL_URL (or ignis.content.social.url in nuxt.config.ts) - this is a required option that defines the URL to be shared on social networks. Set it to your application's URL or any other relevant link. It falls back to http://nuxt-ignis.com if not set manually and a warning is produced to the console.

Magic Regexp ​

Magic Regexp is a utility library for working with regular expressions in more natural way.

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

.env
dotenv
NUXT_PUBLIC_IGNIS_UTILS_REGEXP_ENABLED=true

Or equivalently in nuxt.config.ts:

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