Configuration options

Nue has a hierarchical configuration system where the site-wide settings are specified in the site.yaml file on the root directory, the application-level settings are specified in <appdir>/app.yaml, and page-level settings in the front matter section of a Markdown file. App settings extend/override the global settings and page settings extend/override the app settings.

All options

An alphabetical index of all the configuration options:


Name of the application directory a page belongs to. For example, the root level could set this to "home" and read the layout, data, scripts, styles, and components from that directory.


Setting this to false disables automatic mounting of reactive islands. This is enabled (true) by default.


The base directory is where all the styles and components are loaded on the front end. This is similar to tag and allows you to deploy the project under some path such as /@simple-blog/, instead to a root domain like


Setting this to true makes Nuemark wrap the Nuemark content inside a <section> element even if there are no sections defined on the page. Setting this globally makea consistent HTML structure for your external CSS.


By default, Nue looks for a file named "main.js" and includes it automatically on your page requests. You can change this with this setting. For example, a value such as ['index.js'] would auto-include "index.js". See details of JS/TS modules


Specifies files that should be bundled so that the imported dependencies are *inlined into the file itself. For example: bundle: [index.js]. See to bundle or not to bundle.


Sets the <body :class="class"> attribute in the default HTML layout for page-specific CSS rules.


The output directory. The default is .dist/dev for the development version and .dist/prod for the minified production version.


This is a directory name for a content collection. Setting this to "posts" makes all the Markdown pages and their metadata available as a looped array for your template files. Good for making blog/docs indexes.


The name of the looped variable on the content collection. By default, this is the name of the directory i.e. the value of the content_collection option.


An array of CSS path matches to exclude from the page.


A site-wide setting in your site.yaml file to define directories that are global to all your applications. The scripts, styles, and components under global directories are automatically included on all your pages. See files and directories.


An array of matches to be included from the directories specified by the libs property. For example: include: [highlight, motion]. A partial match is enough.


A site-wide setting in your site.yaml for CSS library directories to be used by the include statement.


Setting this to false disables the default processing with Lightning CSS


Setting this to false disables universal hot-reloading. This is enabled (true) by default.


Setting this to true inlines all CSS directly into the page to make it load faster. See performance optimization.


This setting tells the browser about critical resources that you want to load as soon as possible before they are discovered in HTML. For example: preload_image: my-hero.png


The port number of the development server. Default is 8080


Setting this to true enables [client-side-navigation] to make the successive page loads feel instant.