ASP.NET Core, Webpack and Vue.js playground

This repo contains demos showing various ways of configuring webpack and vue.js with ASP.NET Core projects.

Running the samples

> npm run build-dev or npm run build-prod
> dotnet run

Demos

The master branch is currently using .NET Core 2.2, ASP.NET Core 2.2, Vue.js 2.6.8, Vue CLI 3.5.1, webpack 4.29.6 and TypeScript 3.3.3

• Demo 1 - Loads Vue & SignalR from CDNs. No webpack. JavaScript in page.

• Demo 2 - Loads JavaScript dependencies from NPM. Webpack bundling with TypeScript transpiling JavaScript to ES2015. Defines vue.js global component with external template.

• Demo 3 - Loads JavaScript dependencies from NPM. Webpack bundling with TypeScript transpiling to ES2015. Defines vue.js global component with external template and class decorators.

• Demo 4 - Loads JavaScript dependencies from NPM. Webpack bundling with TypeScript transpiling to ES2015. Custom vue.js component using single file component with .vue extension.

• Demo 5 - NPM for JavaScript. Webpack bundling with TypeScript transpiling to ES2015. Async vue.js component (SFC). RxJS 6 w/ SignalR stream adapter.

• Demo 6 - NPM for JavaScript. Webpack bundling with TypeScript transpiling. Async vue.js component (SFC) + vuex state management. RxJS 6 w/ SignalR stream adapter.

• Demo 7 - NPM for JavaScript. Webpack bundling with TypeScript transpiling. Async vue.js component (SFC) + vuex state management + experimental SignalR VueJS plugin. RxJS 6 w/ SignalR stream adapter.

• Demo 8 - Simple client side validation using Razor Pages, VueJS and Vee-Validate. Converts data-val-* into Vee-Validate rules

• Demo 9 - Attempt at (somewhat) unobstrusive validation using Razor Pages, VueJS, Vee-Validate. Converts data-val-* into Vee-Validate rules. Uses a custom ValidationAttribute and a custom Vee-Validate rule to add client side validation to the input elements. Also does remote validation.

• Demo 10 - Same as demo 9, but built using the .NET CLI and the Vue.js CLI.

• Demo 11 - Vue CLI w/ VueCliMiddleware for development interaction with the Vue cli.

Useful tools

• Visual Studio Code
• Vue.js devtools for Firefox
• Vetur - Vue tooling for VS Code
• Vue VSCode Snippets