Options

For the time being all paths have to be the actual path, patterns are not yet supported

`outputDir`

What directory in your end build ("dist" by default) do you want the files to be in ? This is the base directory, will be used so the plugin knows where the files that need to be loaded are. It's relative to your dist dir

Type: string
Default: assets/css
Optional: true

nuxt.config.ts

export default {
  lazyLoadFiles: {
    outputDir: "mySpecialDir"
  }
}

`inputDir`

Relative path to a directory where the files you want to lazy load are. It'll try to process of the files it finds. Works recursively

Type: string
Default: undefined
Optional: true

nuxt.config.ts

export default {
  lazyLoadFiles: {
    inputDir: "assets/scss"
  }
}

`files`

Configuration of specific files you want to lazy load. For each file you can specify which rule you want to be applied

Type: LazyFileConfiguration
Default: undefined
Optional: true

nuxt.config.ts

export default {
  lazyLoadFiles: {
    files: {
      css: {
        path: "assets/scss/mobile.scss",
        windowWidthLowerThan: { width: 700},
      }
    }
  }
}

See rules.

You need configure either inputDir or files or nothing will happen

`plugin`

Toggles whether or not to automatically inject the plugin that actually handles the lazy loading

Type: boolean
Default: true
Optional: true

nuxt.config.ts

export default {
  lazyLoadFiles: {
    plugin: false
  }
}

`verbose`

Sets the log level from the module to verbose instead of the default, which is warn

Type: boolean
Default: undefined
Optional: true

nuxt.config.ts

export default {
  lazyLoadFiles: {
    verbose: true
  }
}

Rules

All rules can be defined either globally or specific to a file

`windowWidthGreaterThan`

Loads the files when window width is bigger than x

Type: LazyLoadRuleScreenSize
Default: undefined
Optional: true

nuxt.config.ts

export default {
  lazyLoadFiles: {
    windowWidthGreaterThan: { width: 1200 }
  }
}

`windowWidthLessThan`

Loads the files when window width is lower than x

Type: LazyLoadRuleScreenSize
Default: undefined
Optional: true

nuxt.config.ts

export default {
  lazyLoadFiles: {
    windowWidthLessThan: { width: 700 }
  }
}

IntroductionLimitations

ApiRules