Skip to content

Latest commit

 

History

History
44 lines (25 loc) · 2.8 KB

README.MD

File metadata and controls

44 lines (25 loc) · 2.8 KB
Raw

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