The repository contains an ASP.​NET Core + Vue.js starter template. The template is created by Vue CLI 3.0 with a new plugin based architecture allowing developers to interactively scaffold a new project with just a one command.

Original article how to create the starter template is available here.

• Features
• Used Technology Stack
• Prerequisites
• Getting Started

• Hot module replacement
• Code-splitting
• Tree-shaking
• ES2017 transpilation
• Long term caching and so on

ASP.NET Core 2.1:

• Web.API
• JavaScript Services middleware to integrate with client app

Vue.js with CLI 3.0 supporting optional integrations:

• TypeScript
• Progressive Web App
• Vue Router & Vuex (State Store)
• Linting, unit testing, E2E testing
• 3rd party component frameworks (Vuetify, Vue Bootstrap etc.)
• publish your personal/enterprise plugin and so on...

For a full feature list, I suggest you to read the official CLI release statement by Evan You.

• .NET Core
• NodeJS >= 8.9
• Your favourite editor (I prefer VS Code), or VS 2017

There are two ways how to set up the project: one for people who want to create their own template and choose custom integrations and the other for developers who want to start with no configuration.

• Clone this repository git clone https://github.com/SoftwareAteliers/asp-net-core-vue-starter

• Remove all the contents of the folder /ClientApp

• Create a new Vue project by using Vue CLI: vue create client-app OR by using CLI graphical interface running vue ui

Unfortunately Vue CLI does not allow us to set a project name by C# standards using Upper Camel Case (Pascal Case) naming convention, so let's initiate app inside of client-app folder and then move the content to ClientApp.

• Move all the contents from the new folder /client-app to /ClientApp.

Now application is ready to run.

• Clone this repository git clone https://github.com/SoftwareAteliers/asp-net-core-vue-starter

• Restore client-side dependencies by running npm install in /ClientApp folder

You have two choices when it comes to how you prefer to run the app. You can either use the command line or the build-in run command.

Normally we would run dotnet run command to run ASP.NET application and Microsoft ASP.NET Core JavaScriptServices middleware would start a new process for client side application, but middleware does not support Vue CLI 3 out-of-the-box right now, there's a pull request waiting to be merged.

For now:

• Run the Vue app in /asp-net-core-vue-starter/ClientApp folder with npm run serve
• Run the .NET application using dotnet run

• Run the Vue app in /asp-net-core-vue-starter/ClientApp folder with npm run serve
• Run the application in VSCode or Visual Studio 2017 by hitting F5

Browse to http://localhost:5000 for ASP.​NET Core + Vue app or browse to http://localhost:8080 for Vue app only.

• Get Chrome DevTools for Vue.js here

Want to file a bug, contribute some code, or improve documentation? Excellent! Please make sure to check existing issues before opening a new one.

Copyright © 2018 Software Ateliers

Medium: Software Ateliers | Twitter: @SAteliers