Getting Started with Vue

Creating a Project

The quickest and easiest way to create a new Coalesce Vue application is to use the dotnet new template. In your favorite shell:

mkdir MyCompany.MyProject
cd MyCompany.MyProject
dotnet new --install IntelliTect.Coalesce.Vue.Template
dotnet new coalescevue
cd *.Web
npm ci

NuGetView on GitHub

Project Structure

Important

The Vue template is based on Vue CLI. You are strongly encouraged to read through at least the first few pages of the Vue CLI Documentation before getting started on any development.

The structure of the Web project follows the conventions of both ASP.NET Core and Vue CLI. The Vue-specific folders are as follows:

  • /src - Files that should be compiled into your application. CSS/SCSS, TypeScript, Vue SFCs, and so on.
  • /public - Static assets that should be served as files. Includes index.html, the root document of the application.
  • /tests - Jest unit tests.
  • /wwwroot - Target for compiled output.

During development, no special tooling is required to build your frontend code. WebpackDevMiddleware in ASP.NET Core will take care of that automatically when the application starts.

Tip

If developing with Visual Studio, you are strongly encouraged to disable Visual Studio's built-in automatic NPM package restore functionality (Options > Projects and Solutions > Web Package Management > Package Restore).

This feature of Visual Studio fails to respect your package.lock.json file, and the version of NPM that Visual Studio comes with tends to be quite old and will behave differently from the npm on your system's $PATH.

You should manually restore your packages with npm ci (when you haven't tried to change any versions) or npm i (when installing new packages or upgrading versions).

Data Modeling

At this point, you can open up the newly-created solution in Visual Studio and run your application. However, your application won't do much without a data model, so you will probably want to do the following before running:

  • Create an initial Data Model by adding EF entity classes to the data project and the corresponding DbSet<> properties to AppDbContext. You will notice that the starter project includes a single model, ApplicationUser, to start with. Feel free to change this model or remove it entirely. Read EF Entity Models for more information about creating a data model.

  • Run dotnet ef migrations add Init (Init can be any name) in the data project to create an initial database migration.

  • Run Coalesce's code generation by either:

    • Running dotnet coalesce in the web project's root directory
    • Running the coalesce npm script (Vue) or gulp task (Knockout) in the Task Runner Explorer

You're now at a point where you can start creating your own pages!

Building Pages & Features

Lets say we've created a model called Person as follows, and we've ran code generation with dotnet coalesce:

namespace MyApplication.Data.Models
{
    public class Person
    {
        public int PersonId { get; set; }
        public string Name { get; set; }
        public DateTimeOffset? BirthDate { get; set; }
    }
}

We can create a details page for a Person by creating a Single File Component in MyApplication.Web/src/views/person-details.vue:

<template>
  <dl>
    <dt>Name</dt>
    <dd>
      <c-display :model="person" for="name" />
    </dd>

    <dt>Date of Birth</dt>
    <dd>
      <c-display :model="person" for="birthDate" format="M/d/yyyy" />
    </dd>
  </dl>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import { PersonViewModel } from "@/viewmodels.g";

@Component({})
export default class extends Vue {
  @Prop({ required: true, type: Number })
  id!: number;

  person = new PersonViewModel();

  created() {
    this.person.$load(this.id);
  }
}
</script>

Note

In the code above, c-display is a component that comes from the Vuetify Components for Coalesce.

For simple property types like string and number you can always use simple template interpolation syntax, but for more complex properties like dates, c-display is handy to use because it includes features like built-in date formatting.

Tip

The code above uses vue-class-component and vue-property-decorator to define the component.

These libraries provide an alternative to the default component declaration syntax in Vue. However, you must be aware of the Caveats if you want to use these tools to build your own class-style components.

We then need to add route to this new view. In MyApplication.Web/src/router.ts, add a new item to the routes array:

// At the top of the file, import the component:
import PersonDetails from '@/views/person-details.vue';
// In the `routes` array, add the following item:
{
  path: '/person/:id',
  name: 'person-details',
  component: PersonDetails,
  props: route => ({ id: +route.params.id }),
},

With these pieces in place, we now have a functioning page that will display details about a person. We can start up the application (or, if it was already running, refresh the page) and navigate to /person/1 (assuming a person with ID 1 exists - if not, navigate to /admin/Person and create one).

From this point, you can start adding more fields, more features, and more flair to the page. Check out all the other documentation in the sidebar to see what else Coalesce has to offer, including the Vue Overview.