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 Webpack, Vue CLI, 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 Getting Started with Vue if you haven't already to learn how to get a new Coalesce Vue project up and running.

TypeScript Layers

https://img.shields.io/npm/v/coalesce-vue/dev?color=42b883&label=coalesce-vue@dev

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 metadata layer, generated as metadata.g.ts, contains a minimal set of metadata to represent your data model on the front-end. Because Vue applications are typically compiled into a set of static assets, it is necessary for the frontend code to have a representation of your data model as an analog to the ReflectionRepository available at runtime to Knockout apps that utilize .cshtml files.

Read more about the Metadata layer

Model Layer

The model layer, generated as models.g.ts, contains a set of TypeScript interfaces that represent each client-exposed type in your data model. Each interface declares 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 represented in the model layer.

Read more about the Model layer

API Client Layer

The API client layer, generated as api-clients.g.ts, exports a class for each API controller that was generated for your data model. These classes are stateless and provide one method for each API endpoint. This includes both the standard set of endpoints created for EF Entity Models and Custom DTOs, as well as any custom Methods.

Read more about the API Client layer

ViewModel Layer

The ViewModel layer, generated as viewmodels.g.ts, exports a ViewModel class for each API-backed type in your data model (EF Entity Models, Custom DTOs, and Services). It also exports an additional ListViewModel type for EF Entity Models, Custom DTOs.

These ViewModels contain the majority of functionality that you will use on a day-to-day basis as you build applications with the Coalesce Vue stack. They are all valid implementations of their corresponding model interface, and as such can be used in any place where a model could be used.

Read more about the ViewModel layer

Vue Components

https://img.shields.io/npm/v/coalesce-vue-vuetify/dev?color=42b883&label=coalesce-vue-vuetify@dev

The Vue stack for Coalesce provides a set of components based on Vuetify, packaged up in an NPM package coalesce-vue-vuetify. 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 stack for Coalesce does not generate any admin views for you like the Knockout stack does. Instead, it provides some high level components that provide functionality of whole pages like c-admin-table-page and c-admin-editor-page - these are the analogues of the generated admin Table and CreateEdit views in the Knockout stack.

These components are driven off of the generated layers described above rather than being statically generated like the Knockout admin pages - this allows us to keep bundle size to a minimum.

The template described in Getting Started with Vue 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.

Read more about the Vuetify Components here.