Building your first Vue.js App with ASP.NET Core and Vuetify | LimeLight Marketing

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

  • This field is for validation purposes and should be left unchanged.

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. 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/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 style 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.

You can also find the sample code from this post here.

Covid’s Impact on Online Shopping: How Ecommerce Brands Can Survive 2021

Covid’s Impact on Online Shopping: How Ecommerce Brands Can Survive 2021

5 Reasons You’re Losing Website Traffic

5 Reasons You’re Losing Website Traffic

How To Blog For Your Business

How To Blog For Your Business

Why Having a Word Of Mouth Marketing Strategy Is So Important

Why Having a Word Of Mouth Marketing Strategy Is So Important

Why Blogging Is Important For Your Business

Why Blogging Is Important For Your Business

How To Align Your Website With Google

How To Align Your Website With Google