Options

You can configure all @nujek modules in your nuxt.config.js.

export default {
  tailwindcss: {} // see @nuxtjs/tailwindcss module options
  // nujekUi default options
  nujekUi: {
    withConsole: false,
    nujekCss: false,
    storeTemplates: {
      nav: false
    },
    autoloadComponents: true,
    enableSbUtils: true,
    enableLazySizesPlugin: false,
    enableRichTextRenderer: false
  },
  // nujekStoryblok default options
  nujekStoryblok: {
   storyblokConfig: {
      accessToken: '',
      cacheProvider: 'memory'
    },
    withConsole: false,
    debug: false
  }
}

A. With @nujek/bundle

Or add options directly to the module configuration.

{
  buildModules: [
    ['@nujek/bundle', {
      // Options
      tailwindcss: {},
      nujekStoryblok: {},
      nujekUi: {},
    }],
  ]
}

B. Or with @nujek/storyblok & @nujek/ui

{
  buildModules: [
    ['@nujek/ui', {
      // Options
    }],
    ['@nujek/storyblok', { 
      // Options
    }]
  ]
}

@nujek/storyblok

storyblokConfig

• Type: Object
• Default: {}

This is required to access Storyblok API

nujekStoryblok: {
  storyblokConfig: {
    accessToken: '<Storyblok access token>',
    cacheProvider: 'memory',
  }
}

debug

• Type: Boolean
• Default: false

Debug mode is great for developing websites. If you already built your Storyblok Schema with dynamic bloks you will get a list of bloks including the response json from Storyblok. This helps you to know which bloks need to be implemented and what props you will need.

nujekStoryblok: {
  debug: true
}

withConsole

• Type: Boolean
• Default: false

Verbose output in the console for debugging

nujekStoryblok: {
  withConsole: false
}

@nujek/ui

autoloadComponents +v0.0.192

• Type: Boolean
• Default: true

Autoload components via nuxt/components module. If you disable this option you will need to register your components locally.

nujekCss +v0.0.179

• Type: Boolean
• Default: true

Add nujek css for component styling. Disable it if you don't want prestyled components

enableLazySizesPlugin

• Type: Boolean
• Default: false

The NjImage (SbImage) component has lazyloading support which uses the popular lazysizes plugin. You can disable this plugin with this option.

enableRichTextRenderer

• Type: Boolean
• Default: false

This option will enable vue-rich-text-renderer plugin. This should enabled if you plan to use Storybloks richtext field especially with SbRichtext component. See also SbRichtext not rendering

storeTemplates.nav

• Type: Boolean
• Default: false

To quickstart NjNav component we add a functional state to the project. You can disable this state with this options

addDefaultPostCssPlugins (Deprecated +2.0.30)

This options has been deprecated since @nuxtjs/tailwindcss adds @nuxtjs/postcss8 which includes

postcss-import
postcss-url
postcss-nesting
postcss-custom-properties

tailwindcss-module nuxt/postcss8

• Type: Boolean
• Default: true

Nujek Styles are using postcss plugins like nested e.g. So we add these plugins on @nujek/ui module initialization.

Basically @nujek/ui components don't use any predefined <styles> so if you don't need any postcss plugin you can disable this option.