Building your first Vue.js App with ASP.NET Core 2 and Vuetify

by John Kuefler • January 24, 2018

Vue.js (https://vuejs.org/) is a great front-end framework, especially for beginners. There are several single page application templates available from Microsoft through their “Microsoft.AspNetCore.SpaTemplates” package, including a template for Vue.js. This template works OK out of the box, but with a few small updates we can include some great material design components provided by Vuetify (https://vuetifyjs.com/) and hit the ground running.

Prerequisites

We’ll use Visual Studio 2017 in this example. You could also do this in Visual Studio Code if that is your preferred IDE. You need to be sure to have NodeJS/NPM installed as well (https://nodejs.org/en/download/). Finally, The “Vue.js Pack 2017” extension for Visual Studio offers better Vue snippets and intellisense: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.VuejsPack-18329

Get the SPA Templates

EDIT: Apparently Microsoft has ended support for their Microsoft.AspNetCore.SpaTemplates pack, which includes the vue template and is very disappointing. While it appears the dotnet new –install commands below still work, they may not forever. You can grab the vue template from our github here https://github.com/Dev-Squared/DotnetCoreVueSPATemplate and use it to complete the steps after this one. It appears MS also still has the template available in their ASPNet template repository: https://github.com/aspnet/templating/tree/dev/src/Microsoft.AspNetCore.SpaTemplates/content/Vue-CSharp. You can find more info here: https://github.com/aspnet/Announcements/issues/289

The first thing you need to do is grab the SPA templates for ASP.NET Core 2. There are several great starter templates in here, including templates for React and Angular as well. To get the templates, open your favorite shell (I use Git Bash) and run the following:

dotnet new –install Microsoft.AspNetCore.SpaTemplates::*

This will result in all of the following templates being downloaded:

Now we’re ready to set up our sample Vue.js project. Navigate to where you want to store the project and create a folder for it. Then, from inside that folder, run the following command:

dotnet new vue

Just like that, you have a new ASP.NET Core 2/Vue.js application that you can open in Visual Studio.

Exploring the Template

The template creates a clean looking application with 3 navigation items in a navbar on the left:

The template uses Bootstrap 3 at the time of this writing. One of the things we will do later is update the template to use Vuetify components, which are Bootstrap 4 based.

One of the other nice things the template does for you is generate a webpack.config.json file. Webpack is kind of yucky, so this takes a lot of the work out of it for you. We won’t focus on how this functions in this post, but we will have to make one small tweak to it later to make Vuetify work. One of the nice things about the way this is set up though is that it does hot swapping – meaning the moment you change your Vue components, you can see that reflected on the page.

Finally, you can find the actual Vue components in the ClientApp –> components folder. There’s a separate folder for each component created as part of the template with a Vue html file and a TypeScript file:

Adding Vuetify

Step 1: Add/update npm packages

There are several steps needed to get Vuetify up and running.

First, open up the package.json file and add the following packages:

“vuetify”: “^0.17.6”, “stylus”: “^0.54.5”, “stylus-loader”: “^3.0.1”

Here we add Vuetify, as well as stylus and stylus loader since Vuetify uses stylus.

Also, update the Vue package to the latest version (2.5.13 at the time of writing this), as Vuetify requires newer versions of Vue to work:

“vue”: “^2.5.13”,

Now, from your projects directory do an “npm install” to install the packages.

Step 2: Add style references and update webpack config

Next, we need to add a stylus file required by Vuetify. In the ClientApp folder, add a “stylus” folder. Inside of that folder, create a “main.styl” file. This file simply imports the main stylus from Vuetify for your app to use – you just need one line in the file:

@import ‘~vuetify/src/stylus/main’

Now, we need to modify the webpack config to use the stylus loader. In the webpack.config.js file at the root of the project, update the following from this:

To this:

Now we can properly compile the stylus elements of Vuetify.

We need to update the boot.ts file (the main typescript file for the Vue app) to use Vuetify and to point to the right styl file. Add the following to this file:

import ‘./stylus/main.styl’; import Vuetify from ‘vuetify’; Vue.use(Vuetify);

You can also remove the ‘import bootstrap’ line, since Vuetify is based on Bootstrap 4.

Finally, if you want to use the material icons built into Vuetify, add the following link to the top of your Views–>Home–>index.cshtml:

<link href=’https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons’ rel=”stylesheet”>

Now if you run the app, everything should work but look the same still. Next, we’ll add some of our fancy new components.

Step 3: Add Vuetify components

Before we can use any Vuetify components, we need to wrap our main app container in <v-app> tags. Navigate to ClientApp–>components–>app–>app.vue.html and put <v-app> tags inside the app-root div:

Now we can add Vuetify components to our other pages. The “Counter” page is a simple component that increments a counter when a button is clicked:

Adding a few Vuetify components to this page might spice it up:

Above we’ve added a v-alert component around the counter, as well as set the button’s class to “btn”. This results in the following:

This provides a great starting point to continue to add functionality to our SPA with the help of a great component library. There are lots of Vuetify components available – you can check them out here: https://vuetifyjs.com/components/alerts

You can also find the sample code from this post here: https://github.com/Dev-Squared/VuetifyDotnetCore2Sample

Are you using the right password manager for your agency?

ElePass is a password management solution built for agencies – developed by DevSquared. With security as the backbone, we built ElePass to drive agencies towards a more secure environment and to ensure your clients can trust you with their accounts. Check out some of the features of ElePass and give it a try today!