ASP.NET Core 2 and Vue.js

Inheriting from a base component

Now that we have our base component in place, let's look at how to make use of it. We'll start with the most commonly used FormInput.vue component, which belongs in the ClientApp/components/shared folder. Start by giving it the following template section:

<template>  <form-input-base :label="label">     // inheriting component content will go here...  </form-input-base></template>

This is our workaround for the fact that templates aren't inherited by subcomponents that extend a base component. Instead, we declare the base component as a child of the subcomponent, then render it as part of the template, as we've done here. This only works because we included a slot component as part of the base component's own ...