The application building system in the JSS Vue.js sample app

You can scaffold a new JSS Vue component using the jss scaffold <componentName> command. The scaffold is defined by scripts/scaffold-component.js, and is fully customizable to your needs. Scaffolding creates the Vue component and the disconnected component definition files, then provides helpful feedback about what to do to make your component work.

The JSS app must be able to read aspects of the JSS configuration, such as the current Layout Service endpoint config. To accomplish this, before a build runs, the script defined in scripts/generate-config.js runs and dynamically assembles the src/temp/config.js file. The application can import this file when it needs access to the configuration. This script is fully customizable and/or removable if you have different configuration requirements.

When a build starts, the JSS Vue app automatically generates the component factory in the src/temp/componentFactory.js file. The component factory is a mapping between JSS component names and their Vue component implementations. The src/temp/componentFactory.js file is generated using conventions for defining your JSS components. It helps avoid manually registering new components. When the app runs locally, the component factory watches for new components and updates the module. This auto-generation is defined in scripts/generate-component-factory.js, and is fully customizable.