# Application Templates

Nodewood comes with three default templates, all located in wood/ui/src/templates:

  • Most user-facing pages will default to being rendered in ApplicationTemplate, a template that has a simple sidebar and header with user dropdown.
  • Public user-facing pages will default to being rendered in MinimalTemplate, a simple template that displays a header and centers the content.
  • Admin-facing pages will default to being rendered in AdminTemplate, essentially the same template as ApplicationTemplate, but with some indicators to let you know this is the admin section of the site.

# Changing what template a page renders inside of

To modify the template a page will render inside of, you must modify the meta.routeTemplate field in its route. In your feature's ui/init.js file, modify the target route as follows:

{
  path: '/your-route',
  name: 'yourRoute',
  component: () => import(/* webpackMode: "eager" */ '#ui/pages/YourRoutePage'),
  meta: {
    routeTemplate: 'YourNewTemplate',
  },
},

# Adding a new template

First, using an existing template for reference, create a template in app/ui/src/templates. Then, edit app/config/ui.js and add your template to the templateComponents array, like so:

const woodConfig = require('@wood-config/app');
const YourNewTemplate = require('#ui/templates/YourNewTemplate/YourNewTemplate').default;

module.exports = {
  ...woodConfig,

  templateComponents: {
    YourNewTemplate,
  },
};

Finally, modify the meta.routeTemplate field for the page you wish to use the new template, as above.