SPA template built with ASP.NET Core 5.0 + Vue + Vuex + TypeScript + Hot Module Replacement (HMR)
This template is a SPA application built using ASP.NET Core 5.0 as the REST API server and Vue/Vuex/TypeScript as the web client (Bulma + SASS + vue-styled-components for UI styling). You can find a similar version using React + Redux (and associated libraries) here: aspnet-core-react-redux-playground-template
This template is vaguely based on the original Vue + TypeScript .NET Core SPA template that was offered in the past with earlier versions of the framework (Vue has been removed as an option from their starter templates for some reason). Using that as a base, this template greatly extends the functionality provided and also uses the latest versions of all referenced libraries/packages. Keep in mind that I use this project (or others like it) as a testing ground for varying libraries/packages and it is not meant to act as a stand-alone final solution - it is more of POC. For example, the login & logout processes are stubbed to simulate the actual process (no real authentication is happening, however, it is something I plan to add to this project in the near future). I plan on keeping this up to date, and the listed technology stack may be subject to change.
Vue CLI App
aspnetcore-vueclimiddleware
nuget package installed in order to execute the npm run serve
ClientApp script automatically when you run the .NET project (browser is also configured to automatically launch with IIS, so there is no need to manually run your Vue front-end every time).Server
aspnetcore-vueclimiddleware
/health-ui
(also, provide an option for viewing the raw JSON data that the UI package prettifies for you at /healthchecks-json
). Access this view in the application via the floating settings cog on right screen by clicking the "Health Checks" link./docs
& NSwag.MSBuild to handle automatic updates - so that when the project builds, the NSwag CLI will run and generate an updated API specification. Access this view in the application via the floating settings cog on right screen by clicking the "Swagger API" link.Client
Vue
Vuex
Vue-router
TypeScript
Webpack
for bundling of application assets and HMR (Hot Module Replacement)Bulma CSS
+ SASS
+ Font Awesome 5 (using fontawesome-svg-core)Axios
for REST endpoint requestsvue-svg-loader
for fetching and displaying SVG images inlinevue-styled-components
- this is the Vue.js implementation of the popular React.js styled-components. Write component-scoped CSS code in JavaScript via template literals - see example further down with the VCheckbox.render.tsx component.vuex-module-decorators
- a helpful package of decorators which allows you to write your vuex store modules in class-based syntax (inspired by vue-class-component). Also allows for easier namespacing and registration of modules into store at runtime after store is constructed - dynamic modules (I have all the modules configured this way in my project).vue-snotify
- a highly configurable toast notification library - comes hooked up to display login error & SignalR hub push notifications examples.Note: I wired up vue-styled-components
for this component as well to fully demonstrate the scope of React's influence over Vue's ecosystem (check out the source code for VCheckbox.render.tsx to see how styled-components are implemented in Vue.js).
import Vue, { VNode } from 'vue';
import styled from 'vue-styled-components';
import { Component, Prop } from 'vue-property-decorator';
const StyledSpan = styled.span`
padding-left: 1.5rem;
`;
const StyledLabelWrapper = styled.label`
display: flex;
user-select: none;
position: relative;
`;
const StyledInput = styled.input`
/* ...CSS CODE */
...
`;
const StyledCheckIcon = styled.i`
/* ...CSS CODE */
...
`;
@Component
export default class VCheckBox extends Vue {
@Prop({ default: null }) public readonly id: string;
@Prop({ default: null }) public readonly name: string;
@Prop({ default: null }) public readonly label: string;
@Prop({ default: false }) public readonly checked: boolean;
@Prop({ default: false }) public readonly disabled: boolean;
@Prop({ default: false }) public readonly readOnly: boolean;
public render(): VNode {
return (
<StyledLabelWrapper>
<StyledInput
id={this.id}
type='checkbox'
name={this.name}
value={this.checked}
checked={this.checked}
readOnly={this.readOnly}
disabled={this.disabled}
onChange={this.handleOnChange}
/>
<StyledCheckIcon />
{this.label && <StyledSpan>{this.label}</StyledSpan>}
</StyledLabelWrapper>
);
}
public handleOnChange(event: Event): void {
this.$emit('checked', (event.target as HTMLInputElement).checked);
}
}
npm run test:unit
to execute. Unit tests for components VCheckBox.render.tsx
and Spinner.vue
are included as examples..NET 5.0 SDK
npm install
should properly restore all packages and dependencies - if the vendor.js & vendor-manifest.json did not get installed, run npm run webpack
to execute the script added to accomplish this task.