# UI

The Nodewood UI is a Vue application that uses vue-router and Vuex for routing and state management, respectively. It is built using Webpack.

To build and watch the Nodewood UI in development mode, connect to the Nodewood development VM (nodewood vm from the root of your project folder), then cd code to switch to the shared code folder, and nodewood dev ui to build and begin watching the UI. The default webpack configuration places the built files in app/ui/dist, and the Nodewood API Express server serves any request from /app to there. This means that you must also have the Nodewood API Express server running to test any UI changes.

# Configuration

The following files are located in wood/config, but can be overridden by creating identically-named entries in app/config. The options below are not exhaustive, but cover the options in these files that apply to the UI.

# admin.js

This file contains configuration details for the admin panel.

  • userListFields: These are the fields displayed in the list of users on the Users page.

# app.js

This file contains general configuration details for your app.

  • name: This is the name that is used by default for the title of your pages.
  • features: This is the list of enabled features. Features appearing in this list and located in the app/features folder will be examined for Pages with routes and Stores and automatically add them to the application bundle. Note that this is split into app features (ones that you create) and wood features (once that come bundled with Nodewood). This allows you to disable Nodewood features should you need or want to.
  • defaultErrorMessage: This is the default error message displayed in situations where a more-specific error message has not been provided.

# ui.js

  • templateComponents: This is an array of components that can be used as the custom outer template component, in case you need more configuration than the built-in AppTemplate, AdminTemplate, and MinimalTemplate provide.
  • appSidebar: This array allows you to configure the links in the sidebar in the default App Template.
  • adminSidebar: This array allows you to configure the links in the sidebar in the default Admin Template.
  • dropdown: This array allows you to configure the links in the user dropdown in the default App and Admin templates.