Settings and metadata

Nue has a hierarchical system for settings and configuration options. Here are all settings for Nue and your site, pages and components.

Nue settings

List of all Nue-specific configuration options in the site.yaml file. These settings impact the system behaviour and are always global, that is, they cannot be overwritten in app or page level.

dist

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

globals

Array of global directories. The scripts, styles and components under global directories are automatically included on all your pages.

hotreload

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

libs

Array of directories that are treated as libraries and used by the include statement.

List of reference links to be used in the Markdown content in the form of [Link Label][link_reference]. Links are supplied in a name: url format. For example:

# name: url
links:
  gds: //bradfrost.com/blog/post/a-global-design-system/
  soc: //en.wikipedia.org/wiki/Separation_of_concerns

lightning_css

Setting this to false disables the default processing by Lightning CSS and the CSS is served directly as is.

native_css_nesting

Use native CSS nesting intead of converting them to un-nested style rules that are supported in all browsers. Setting this to true generates a smaller CSS output, but is not supported by older browsers. Check the current Can I Use statistics for details.

port

The port number of the development server. Default is 8080.

syntax_highlight

Set this to false to disable the built-in stylesheet for code blocks.

view_transitions

Setting this to true enables view transitions for instant and smooth page switches.

Site settings

List of site-wide settings that impact your SEO data and other metadata inside your document <head> element. These are defined in your site.yaml but can be overwritten on area and page level.

base

The value of the HTML <base> element.

charset

The value of the charset meta tag. The default is "utf-8".

direction

The value of <html direction="{ direction }"> attribute. The default is "ltr" (left to right).

favicon

Relative path to your favicon that overrides the "favicon.ico" on the browser tab.

generator

The generator meta tag. The default is "Nue (nuejs.org)" and is only rendered in production mode.

language

The value of <html lang="{ language }"> attribute. The default is "en". You might want to change this to "en-us", "en-gb", "en-nz", ... depending on your dialect or for example "fi", if your content is written in the Finnish language.

origin

Your full domain name including the protocol. For example: "https://emmabennet.co". Nue uses this value to prefix the og property and later in RSS files.

prefetch

Array of assets to prefetch before using them. These can be images, scripts, or CSS files.

robots

Value for "robots" meta property. Use "noindex" to exclude the whole website from search engines.

theme_color

Value for theme color meta property. This is a color suggestion for user agents to customize the display of the page.

thumb

A thumbnail image for the document when listed and rendered by the gallery tag.

title_template

Allows formatting the value of the <title> tag in the way you like. A value such as '%s | Acme Inc.' prints "My page | Acme Inc." where the %s is replaced by the page title.

viewport

The viewport value. The default is: "width=device-width,initial-scale=1"

Layout settings

Settings to define the global navigational elements on your page with a common YAML-based syntax.

HTML layout for the global header.

HTML layout for the global footer.

burger_menu

HTML layout for the burger menu.

Disabling layouts

You can disable individual layouts for areas or individual pages with settings such as banner: false or footer: false.

Area settings

List of typical area-specific settings inside an application file such as blog/blog.yaml or any other YAML file in a specific application directory. These can also be set globally in site.yaml or individually in a specific page.

include

A list of assets to be included from a library directory to all pages on the area. For example, a value such as include: [highlight, motion], would include all files matching a string "highlight" or "motion" in the file name.

grid_item_component

Specifies a Web Component for your grid items. Learn more

grid_item_class

Array of CSS class names for your grid items. Learn more

section_classes

Array of CSS class names for the page sections. Learn more

section_component

Specifies a Web Component for your page sections. Learn more

Page settings

List of page-specific settings as specified in a page directory or in the front matter section of the Markdown file. Most of these settings can also be set globally or at area-level.

appdir

Name of the application directory a page belongs to. For example, the root level index.md could set this to "home" and grab the layout, data, scripts, styles and components from that directory. This would keep the root level clean from front-page specific assets.

author

The author meta tag.

class

CSS class name for the body element.

content_collection

This is a directory name for a content collection.

collection_name

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

date

The publication date of the article. The content collections are sorted by this property. The most recent one is listed as the first article.

description

The value for the description meta tag.

include

A list of assets to be included from a library directory. These values are concatenated to the possible area-specific includes.

exclude

A list of assets to be excluded from a library directory. These values are concatenated to the possible area-specific excludes.

inline_css

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

og

Relative path to open graph image. Please also supply the origin property to turn this value into an absolute URL, which is the required format.

robots

Value for "robots" meta property. Use "noindex" to exclude the page from search engines.

title

The value of the <title> tag — the most important meta tag for SEO. By default, this is the value of the Markdown # Level one title if not explicitly defined.

unlisted

Do not include the page in content collections.