vue-layer-domain

Vue 3 domain page scaffolding creates three Vue files under src/pages/[domain]/: [Domain]IndexPage.vue, [Domain]DetailPage.vue, and [Domain]FormPage.vue. It automatically registers these files using Vue Router 4 to streamline repetitive page creation and accelerate domain development.

Vue Router 4 automatically registers new domain pages by utilizing children routes, named routes, and props. This official guidance approach ensures maintainable navigation and predictable routing while leaving business logic and UI implementation entirely to the developers.

The fixed file structure for a new Vue domain consists of a folder named src/pages/[domain]/ containing three specific files: [Domain]IndexPage.vue, [Domain]DetailPage.vue, and [Domain]FormPage.vue. Component names are generated using PascalCase for predictable imports.

The Vue domain scaffolding does not include business logic or UI components. It strictly generates the file structure and router entries, leaving developers free to implement the actual application logic and user interface design within the generated pages.

You can use this scaffolding if your Vue project follows the src/pages/[domain]/ directory structure and Vue Router 4 conventions. It enforces named routes and children configurations, so existing custom routing setups may require adjustment to match the generated output.

Using named routes and children in Vue Router 4 for domain page generation ensures maintainable navigation and predictable routing behavior. This official guidance approach prevents hard-coded paths, making it easier to scale applications as new domains are continuously added.