Fixing the Vue SpaTemplate for Internet Explorer

2017-12-19 // By LRS Education Services
Category: .NET

The last several years have seen the rise of JavaScript client-side frameworks for building weeb-based Single Page Applications (SPA’s): AngularJS, React, Aurelia, and Vue being some that are currently popular.

In order to accomodate the development of these kinds of web applications in Visual Studio and related tools (Visual Studio Code), Microsoft has developed a set of features that can be added to projects called JavaScriptServices (here’s the GitHub location). One of the items in JavaScriptServices is a NuGet package called Microsoft.AspNetCore.SpaTemplates, which let’s you generate boilerplate projects based on the different SPA frameworks for use in Visual Studio and Visual Studio Code. The problem is, if you use the option to create a project based on the Vue SPA framework, it doesn’t work in Internet Explorer 9 and later. This article will show you how to fix that problem.

For reference, here are the software version numbers against which this article is written.

  • Visual Studio 2017 Version 15.5.2
  • Node.js Version 9.3.0
  • DotNet Version 2.1.2 (should be included in Visual Studio 2017 installation)

Assuming you have the software installed, let’s generate a project that uses Vue.

Open a command prompt window on your computer and install the SpaTemplates packages if needed. Then create a new directory with an appropriate name like VueDemo. Inside this directory, type the command to create a new Vue boilerplate project. Here are example commands.

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
mkdir VueDemo
cd VueDemo
dotnet new vue

Once that is done, there should be a VueDemo.csproj file. Fire up Visual Studio 2017 and open that file to load the project. But don’t run it yet. There are some fixes we have to apply first. If you run it now, the application will run beautifully in Google Chrome, but the link in the application named “Fetch data” will not work in Internet Explorer.

To fix that, we need to make changes in two files. Open the package.json file and insert the following at line 14 (move subsequent lines down), then save and close the file (note: don’t forget the comma at the end of the line):

"es6-promise": "^4.1.1",

Next, open the file ClientApp\boot.ts, and insert the following lines at line 3 (move subsequent lines down), then save and close the file:

import { polyfill } from 'es6-promise';
polyfill();
import 'isomorphic-fetch';

That should do it. You should be able to build and run the application, and it should run both in Google Chrome and Internet Explorer 9 and later.

If you were an eager beaver and had built the project before making the above changes, right-click on the Dependencies/npm folder in Visual Studio’s Solution Explorer window and select ‘Restore Packages’ from the context menu before building and running the project.

If you want to extend the functionality of this sample application, I recommend this article, which shows how to add ToDo list functionality to the application.

Interested in training with us? We’d love to have you in our courses!

More Posts