Multi-page .NET Core with Vue.js, TypeScript, Vuex, Vue router, Bulma, Sass, Jest and Webpack 4

5 min readNov 28, 2018

TL;DR Writing SPA’s is perfectly fine! Writing multi-page applications is perfectly fine! Sometimes, you need a multi-page app with a taste of a SPA(multiple mini spa’s), and that is also perfectly fine and what this article is about.

Why

If you look at big companies around the world you can notice that very few of them are actually using Single page applications. I am heavily using Vue CLI on my personal and business projects but I have noticed that a lot of people around me still like this approach, whether they’re using React, Vue, jQuery os something else. It all boils down to the type of product you’re building.

What

If you’re building a service-oriented product you’re better off splitting your API from your UI and use Vue CLI for the UI part. This is not it, this is a standard multipage application with the ability to use the whole Vue ecosystem within multiple pages, nothing more. If not Vue, in its place there would be jQuery or even Vue imported directly with the script tag. This tutorial will show you how to use Vue as a multi-page(multiple mini SPA’s) application to enhance your UI or simply use plain .cshtml and razor if you don’t need Vue on a particular page.

Quickstart

If you don’t feel like going through this you can simply take a look at the code on Github or create a new project using NuGet package.

Install the NuGet package with the following command.

dotnet new -i AspNetCore.Vue.TypeScript.Template

Create a new project by invoking dotnet new vuetypescript command.

dotnet new vuetypescript --name TestProject.Web

After that, you can simply run the project from the Visual Studio or by running the dotnet run command.

Template features Vue, Vuex, Vue router, TypeScript, Bulma, Sass, Webpack 4 and Jest as a test engine.

Structuring the project

At this point, you are aware that we are gonna somehow need to use Controllers, Views and Vue working together. Regarding the .NET part, nothing changes, you can build and do it is as you always have. So the way we add Vue to the project is by creating so-called modules(mini spa’s) and reference its bundles in .cshtml files. Inside .NET Core solution you can create a folder, I call it VueApp but you can call it ClientApp or whatever you like. So it would look something like this.

You can notice that we have TemplateController, Template view and Template folder inside the VueApp. So, template controller just serves Index.cshtml inside which we include Vue bundle that will control the mini spa application.

So, what does a Vue module(mini spa), in this case, template, looks like?

You can make it as complex or as simple as you need it to be. For instance, if you don’t need Vuex or maybe not even Vue router simply don’t add it and don’t use it. The point here is that if you want, you can tailor this mini spa to the needs of a particular feature or page. Also, if you don’t need Vue on a particular page simply use Razor and .NET. This template has 2 modules or mini spa’s named template and iceandfire. Those two modules are accompanied by a common and __test__ folders where you can put your common reusable components and write tests.

Referencing Vue bundle files

For bundling and as a build tool I am using Webpack but it can, of course, be done with for instance Parcel. Purpose of webpack in this story is to take the Vue entry point file and output it’s javascript and CSS files as a bundle. After bundling, you end up with the following structure.

What is left to do is to reference those files in the Index.cshtml under the Template folder.

So what happens is that request comes to the server, the .NET application serves Index page with the Vue.js bundle files and after that Vue takes over and renders the components and application under the #app element.

What does the code look like

TypeScript can be overwhelming and slow for smaller projects but for bigger ones and working in a team can have huge advantages. It’s up to you to decide whether you need it or not. You can use it if you want to but you don’t have to. I wrote this template to use the full set of technologies and showcase how does, for instance, Vuex store function with TypeScript.

What does the application look like

The application consists of 2 mini spa’s, one showcases Vuex store with TypeScript and using third party libraries(template) while other is just fetching some data from the Game of Thrones API(iceandfire).

Vue CLI 3

Vue CLI is a great tool and I use it on every project. If there’s any interest in how to build and connect Vue CLI app with .NET Core MVC I can also publish a sample project/template on how to set up those. However, you should strongly consider splitting your API and UI projects in that case. If your product is service oriented you are way more flexible with those two projects separated. If needed, you can scale only your API if it encounters performance issues while you leave your UI untouched. You can also swap out UI part with something else without touching the API.

Source code

Full source code with webpack, typescript and other configuration files is available on GitHub.

Contributing and improving

I made this template for a local meetup here in a small European country called Croatia but have seen that it has a good application. If you feel like contributing or improving this solution you can do so on GitHub. I intend to further improve it, add features and keep up with package changes.