cecilphillip / aspnetcore-webpack-vue-sandbox

Playground for trying out ASP.NET Core setups with Webpack and Vue.js

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