Nuxt Ignis

Appearance

Made with Ignis ​

PragVue.com ​

https://pragvue.com/

PragVue is an annual Vue.js conference in Prague, Czechia. The event landing page is mostly static but stil leveraging couple of Vue and Nuxt features. Styling is made with Tailwind CSS and despite not being actively used right now, the I18N integration is already prepared for future multilingual support.

PragVue.com

Configuration:

nuxt.config.ts
ts
export default defineNuxtConfig({
  // rest of the Nuxt config

  ignis: {
    config: {
      // set HTML language attribute
      html: {
        lang: 'en',
      },
    },
    default: {
      // do not use default CSS file
      // (because of clashes with custom styling)
      css: false,
    },
    preset: {
      // use Nuxt UI integration
      ui: 'nuxt-ui',
    },
    content: {
      // use I18N integration
      i18n: {
        enabled: true,
      },
    },
  },
})
Dependency management

To demonstrate the biggest benefit of using Nuxt Ignis, let's compare the number of dependencies in package.json before and after Nuxt Ignis was introduced:

Before (15 packages)

  • @nuxt/eslint
  • @nuxt/image
  • @nuxt/fonts
  • @nuxt/scripts
  • @nuxtjs/i18n
  • @nuxtjs/tailwindcss
  • @vueuse/core
  • @vueuse/nuxt
  • nuxt
  • swiper
  • tailwindcss
  • typescript
  • vue
  • vue-router
  • vue-tsc

After (2 packages)

  • nuxt-ignis
  • swiper

Alois-Seckar.cz ​

https://alois-seckar.cz/

Nuxt Ignis author's simple personal website with links to socials, blog and other projects. Tailwind CSS and Nuxt UI are used on frontend in combination with custom CSS. Page also has few Nuxt server-side endpoints like https://alois-seckar.cz/nuxt-news. Under https://alois-seckar.cz/run there is also a test implementation of nuxt-neon module along with little of Vueform.

Alois-Seckar.cz

Configuration:

nuxt.config.ts
ts
export default defineNuxtConfig({
  // rest of the Nuxt config

  ignis: {
    config: {
      // set HTML title and language attribute
      html: {
        title: 'Alois-Seckar.cz',
        lang: 'cs',
      },
    },
    preset: {
      // use Nuxt UI integration
      ui: 'nuxt-ui',
      // use Neon database integration
      db: 'neon',
      // use Vueform form integration
      forms: 'vueform',
    },
  },

  // NOTE
  // additional config for connection to Neon database 
  // must be provided via the .env file
  // see https://github.com/AloisSeckar/nuxt-neon
})
Dependency management

To demonstrate the biggest benefit of using Nuxt Ignis, let's compare the number of dependencies in package.json before and after Nuxt Ignis was introduced:

Before (11 packages)

  • @nuxt/eslint
  • @nuxt/ui
  • @vueuse/core
  • @vueuse/nuxt
  • crypto-js
  • node-html-parser
  • nuxt
  • nuxt-neon
  • nuxt-security
  • typescript
  • vue-component-type-helpers

After (4 packages)

  • crypto-js
  • node-html-parser
  • nuxt-ignis
  • vue-component-type-helpers

master-coda.cz ​

https://master-coda.cz/

Master Coda is author's personal IT blog (written in Czech language). The website uses Tailwind CSS for styling and Nuxt Content for managing the blog posts. To deal with Czech typography rules (no single-letter words at the end of each line), the pslo utility with Nuxt Content integration is used.

master-coda.cz

Configuration:

nuxt.config.ts
ts
export default defineNuxtConfig({
  // rest of the Nuxt config
  ignis: {
    config: {
      // set HTML language attribute
      html: {
        lang: 'cs',
      },
    },
    default: {
      // do not use default CSS file
      // (because of clashes with custom styling)
      css: false,
    },
    preset: {
      // use Nuxt UI integration
      ui: 'nuxt-ui',
    },
    content: {
      // use Nuxt Content integration
      content: {
        enabled: true,
      },
      // use `pslo` integration
      pslo: {
        enabled: true,
        content: true,
      },
      // use Nuxt Social Share integration
      social: {
        enabled: true,
        url: 'https://master-coda.cz/',
      },
    },
  },
})
Dependency management

To demonstrate the biggest benefit of using Nuxt Ignis, let's compare the number of dependencies in package.json before and after Nuxt Ignis was introduced:

Before (16 packages)

  • @nuxt/content
  • @nuxt/eslint
  • @nuxt/icon
  • @nuxt/image
  • @nuxtjs/tailwindcss
  • @pinia/nuxt
  • @stefanobartoletti/nuxt-social-share
  • better-sqlite3
  • elrh-pslo
  • nuxt
  • nuxt-security
  • pinia
  • tailwindcss
  • typescript
  • vue
  • vue-router

After (1 package)

  • nuxt-ignis

More info ​