ASP.NET Core Vue Starter

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

Features

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

Used Technology Stack

ASP.NET Core 2.2:

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.

Prerequisites

.NET Core
NodeJS >= 8.9
Vue CLI >= 3.0
Your favourite editor (I prefer VS Code), or VS 2017/19

Getting started

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 the starter with default configuration

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

or you can use .NET Core CLI templates:

Install the template from NuGet repository: dotnet new -i SoftwareAteliers.AspNetCoreVueStarter
Initialize the project: dotnet new vue -o MyProject

Scaffold Vue.js app with custom configuration

If you prefer to overwrite default Vue client app with custom settings, take the following steps:

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.

Run the application

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.

1. Using the command line

Run the .NET application using dotnet run

2. Using the built-in run command

Run the application in VSCode or Visual Studio 2017 by hitting F5

It will take some time during the first run to download all client side dependencies.

View your application running

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

Recommended plugin for debugging Vue

Get Chrome DevTools for Vue.js here

Issues and Contribution

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

Contributors

Special thanks to everyone who helped and contributed to this project!

@jdebarochez

License

Where to find me

Medium: Software Ateliers | Twitter: @SAteliers

hnviradiya / asp-net-core-vue-starter