Vue Overview

The Vue stack for Coalesce has been designed from the ground up to be used to build modern web applications using current technologies like Vite, ES Modules, and more. It enables you to use all of the features of Vue.js, including building a SPA, and the ability to use modern component frameworks like Vuetify.

Getting Started

Check out the Coalesce project template to learn how to get a new Coalesce Vue project up and running.

TypeScript Layers

The generated code for the Vue stack all builds on the coalesce-vue NPM package which contains most of the core functionality of the Vue stack. Its version should generally be kept in sync with the IntelliTect.Coalesce NuGet packages in your project.

Both the generated code and coalesce-vue are split into four layers, with each layer building on the layers underneath. From the bottom, these layers are:

Metadata Layer

The generated metadata provides a client-side representation of your backend data model's structure and behavior, enabling type-aware operations and dynamic interfaces in your Vue application. Since Vue applications are compiled to static assets and can't perform runtime reflection like .NET applications, the metadata serves as a static analog to the ReflectionRepository available in your .NET backend. The metadata is generated as metadata.g.ts and contains comprehensive information about the types, properties, methods, and other components of your data model.

Read more about the Metadata layer

Model Layer

Coalesce generates TypeScript interfaces for each of your exposed C# data model types. These interfaces are pure data representations and have no functionality of their own. These model interfaces are generated in models.g.ts, with each one containing all the Properties of that type, as well as a $metadata property that references the metadata object for that type. Enums and Data Sources are also generated here.

Read more about the Model layer

API Client Layer

Coalesce's generated TypeScript API clients provide a straightforward, stateless, strongly-typed interface for making HTTP requests to your backend APIs. The API clients are generated in api-clients.g.ts and export a class for each API-exposed type in your data model. These classes provide one method for each API endpoint, including both the standard set of endpoints created for CRUD Models, as well as any custom Methods on the aforementioned types, as well as any methods on your Services.

Read more about the API Client layer

ViewModel Layer

Coalesce's generated TypeScript ViewModels provide rich, stateful wrappers around your CRUD Models and Services that handle common UI concerns like loading, saving, validation, and auto-save functionality. They serve as the primary interface between your Vue components and your backend APIs, offering features like automatic dirty tracking on property changes, API callers with loading/error states, and transactional bulk save operations.

Read more about the ViewModel layer

Vue Components

The Vue stack for Coalesce provides a set of components based on Vuetify, packaged up in an NPM package coalesce-vue-vuetify3. These components are driven primarily by the Metadata Layer, and include both low level input and display components like c-input and c-display that are highly reusable in the custom pages you'll build in your application, as well as high-level components like c-admin-table-page and c-admin-editor-page that constitute entire pages.

Read more about the Vuetify Components here.

Admin Views

The Vue.js stack for Coalesce provides high-level components that provide functionality of whole pages like c-admin-table-page and c-admin-editor-page.

The Coalesce project template comes with routes already in place for these page-level components. For example, /admin/Person for a table, /admin/Person/edit to create a new Person, and /admin/Person/edit/:id to edit a Person.

For comprehensive information about the admin pages, see Admin Pages.