In the previous post, we’ve briefly walked through how to build Vue.js application on ASP.NET Core. Like other modern JavaScript framework, VueJs also supports TypeScript out-of-the-box. If we can get full benefits from TypeScript to build a VueJs app, it would be awesome! There are many resources referring to the combination of VueJs and TypeScript. However, they are not using the basic template that VueJs provides, which brings about less confidence to those developers who just started using VueJs. Even worse, due to the recent version up of Webpack to 2.x, we might need a new tutorial to build a VueJs application using TypeScript. In this post, our goal will be:

  • To use the basic template provided by VueJs,
  • To use Webpack version 2.x, and
  • To run the app on ASP.NET Core.

The sample code used in this post can be found at here.


We have already built a VueJs application running on ASP.NET Core in the previous post. So we’re going to re-use that.

Update on March 6th, 2017: We updated the TypeScript version to 2.2.1 for this post.

Installing npm Packages


We can install TypeScript locally only for this application:

Or we can install it globally:

If TypeScript is installed globally, we should link it to this application:


ts-loader offers us to load .ts files to .js file without actually building them during the development time.

vue-class-component & vue-property-decorator

If we want to use .ts in our VueJs development, as the official document recommends, we should install the vue-class-component library for class decorators.

It may be necessary to install vue-property-decorator to extend vue-class-component. This is not relevant to this post, though.


TypeScript needs type definitions. vue-typescript-import-dts helps recognise .vue files as .ts.

All necessary npm packages are installed. Let’s move on.

Configurations for TypeScript


In order to use .ts, we firstly need tsconfig.json. In this post we just use the bare minimum settings to work. Further details about tsconfig.json can be found here.

Let me explain the configuration in-depth.

  • VueJs supports ECMAScript 5. Therefore, we need to target TypeScript to es5. It means that module should be CommonJs as well as lib should include dom, es2015 and es2015.promise.
  • types declares custom type definitions. As we’ve installed vue-typescript-import-dts, include it here so that the application can recognise .vue files as .ts files.
  • In order to use class decorators, we’ve installed vue-class-component. But this is not enough. We need to enable it by setting the experimentalDecorators value to be true.
  • Within the include property, we need to declare which directories are considered containing .ts files.

Update on March 6th, 2017 Due to the version update of VueJs to 2.2.x, tsconfig.json also needs to be updated. This is the recommended configuration from the official guide.

Also, please make sure that we create the template from vue-cli by running vue init webpack. It installs vue@2.2.1 and vue-router@2.2.0. If those versions are different, please update them.


While developing apps in TypeScript, .js files are automatically compiled and generated. But it’s not guaranteed those files comply to linting process. Therefore, we can’t be sure if those generated .js files are ESLint compliant or not. Therefore, to avoid linting errors from those generated .js files, we just turn it off by adding a line, src/**/*.js, to .eslintignore.
We just completed basic configurations for TypeScript compiling. Let’s move on.

Converting JavaScript to TypeScript

It’s time to convert existing .js files in the src directory to .ts ones situated. We’ll only look after both build and src directories.


As Webpack is the only service to refer this file, so it’s not necessary to change this to .ts. But we do need to modify it.
First of all, the entry point should be changed from main.js to main.ts:

Then we need to replace the babel-loader part with the ts-loader one:

Every .ts file is handled by this loader. Here’s an interesting option, appendTsSuffixTo. If we use this, .vue files can be treated as .ts ones. VueJs uses the Single File Component approach – all HTML section, JavaScript section, and CSS sections are put in one single file called .vue. Therefore we need to handle it to be a TypeScript file, particularly for the JavaScript section.
We’ve completed webpack configuration to enable TypeScript handling. Let’s really convert JavaScript files to TypeScript ones.


Change the existing JavaScript syntax to the one for TypeScript like:

Spot on the new Vue({ ... }) part. Instead of template and components, the render function is placed. Everything has been compiled before hitting this point, and each component needs more control by itself, so we just use the render function. For more details about the render function, please refer to the official document.

Updated on March 6th, 2017: Due to the version update of VueJs to 2.2.x, the import statements part needs to be updated like below:


We don’t have to worry about this. Just be cautious when using import ....

Updated on March 6th, 2017: Due to the version update of VueJs to 2.2.x, the import statements part needs to be updated like below:


Instead of using one single .vue file, we’re separating the TypeScript part from each .vue. Why are we doing this, by the way? We can still use .vue indeed. But for better maintainability, we’d better to create a separate .ts file. Let’s have a look how we can implement App.ts that is extracted from App.vue.

@Component decorator contains the name declaration so that the router can easily recognise it. The script part in the original App.vue can be altered like this:

Make sure that we should include lang="ts" as an attribute of the script tag.

Updated on March 6th, 2017: Due to the version update of VueJs to 2.2.x, the import statements part needs to be updated like below:


Now, we’re going to extract the script section from Hello.vue to Hello.ts. Let’s have a look.

Likewise, @Component contains the name declaration. Previously all two-way binding fields were defined within the data function. Using properties makes them more class-friendly. Functions became methods.

Maybe someone indicates a small change, comparing to the previous post. In order to use AJAX requests and responses, we used vue-resource. However, it’s changed to axios. According to the official VueJs blog post, vue-resource is no more supported as an official VueJs extension. Instead axios is recommended because of its richer features. In addition to this, axios provides TypeScript definitions, so there’s no reason not to use this. Its usage is almost identical to vue-resource.

Once Hello.ts is extracted, the original Hello.vue should now be changed to:

Updated on March 6th, 2017: Due to the version update of VueJs to 2.2.x, the import statements part needs to be updated like below:

All done for conversion from JavaScript to TypeScript! It seems that we’ve done fairly massive conversion. The basic template is optimised to JavaScript, so what we’ve done so far is basically the conversion job. From now on, we can write all logic using TypeScript!
Press F5 key on your Visual Studio to run the application and see the result.

The right-hand side of the window on the picture above is Vue.js devtools, which is a Chrome extension. When we install it, we can use it right away through Chrome’s Developer Tools.

One More Thing …

So far, we’ve done the conversion of VueJs to TypeScript. As this is for local development environment, we need one last modification for deployment. Here’s the overall process of building applications for deployment:

  1. To compile .ts files and generate corresponding .js ones.
  2. To modularise and build bundles through webpack.
  3. To build ASP.NET Core libraries.
  4. To generate an artifact for deployment to Azure or IIS.
  5. To deploy.

By updating package.json and project.json we can easily achieve this goal.


Within package.json, the scripts was originally looking like:

We need to add another one for TypeScript compilation. Let’s change it like:

  • build:ts is to compile .ts files.
  • build:main is to be responsible for existing build.
  • build is to change to call both build:ts and build:main consecutively.
  • --no-deprecation flag may bring an attention. When compiling, ts-loader throws a deprecation warning. It’s OK but Visual Studio treats it as an error so build/deploy fails. By providing this flag will enable build/deploy through Visual Studio successfully.


Finally, open project.json to confirm the prepublish section.

All good now! After the deployment to Azure Web App, we can see the following screen:

Of course, if CI/CD is preferred, we can simply use dotnet publish feature.
We’ve so far had a quick look to write a VueJs application in TypeScript, bundle it on ASP.NET Core and deploy it to Azure. As mentioned earlier, the very first part is a bit complicating but it’s not that different from normal TypeScript development. Let’s build a real world application using VueJs and TypeScript!!

Application Development and Integration
, , ,

Join the conversation! 0 Comments

  1. […] front-end framework emerges and it supports Webpack, we can make it working like this approach. The Next post will discuss how to write VueJs apps in TypeScript, running on ASP.NET […]

  2. […] the previous post, we built an ASP.NET Core application using Vue.js and TypeScript. As a working example, […]

  3. Thanks for a great post! If you use the latest versions of vue (2.2), there are some slight modifications required, mentioned here:

  4. Thanks from Nantes (France) ! you rock !

    • @Michaut Thanks for your compliment!

      • @Justin yoo
        Sorry, but I have the same problem with my code and yours (git repo). My project built after your previous blog on asp core and vuejs. After this part it throw this error:
        “Uncaught TypeError: Router is not a constructor” do you have an idea?

      • @Michaut Seems that it’s because of the version issue. Here’s another one has the same problem.
        I suggest you to check two different places:
        1. `package.json`: I had no problem with `vue@2.2.1`, `typescript@2.2.1` and `vue-router@2.2.0`. Could you check out your package.json whether it’s using different version or not? The versions that I got is from `vue-cli` by typing `vue init webpack`.
        2. import statements: With vue@2.1.x, the import statement looks like `import * as Vue from “vue”;` as it follows `CommonJs` conventions. However, from vue@2.2.x, the import statement has changed to `import Vue from “vue”;` as it follows ES2015 conventions.
        I’m going to update this post soon to avoid confusions for both `vue@2.1.x` users and `vue@2.2.x` ones.

  5. @Justin thanks for your reply. that works
    vue router 2.3.0 -> 2.2.0
    vue 2.1.10 -> ^2.2.1
    typescript 2.1.6 -> ^2.2.1
    I will be able to continue on my project 🙂 !

  6. Thx for the great post. Would it be possible for you to add a tutorial how to implement server side rendering into the Typescript version? That would be great and big time saver 🙂

    • @Felix Thanks for your comment! I’ve also got that part in mind, too. Will try it out!

      • Justin,
        Fantastic article. I was wondering if you made any progress on SSR? I’ve been trying to integrate it following random guides (e.g. with no luck. Any insight would be greatly appreciated.

      • @aaron Thanks for your comment!
        I’ve been looking at the way how to implement SSR into ASP.NET Core apps. I’m still in doubt it’s really necessary because ASP.NET Core supports built-in Razor script that renders HTML from the server.
        If we build a Vue.js app with node.js backend, the SSR (or prerendering) might be necessary, but for ASP.NET Core, I don’t see a benefit using the SSR.
        Please correct me, if I’m wrong.

  7. Hi,
    Whenever I try to compile the project I get massive number of following errors: “TS2304 TypeScript Cannot find name ‘Promise'”, what may be the problem?

  8. After compilation I get blank page, no Vue.js page is displayed. What may be the reason?

  9. I started a new app with “vue init webpack temp” then followed your instructions above, but I get and error when I run “npm run dev”. It is:
    This relative module was not found:
    * ./router in ./src/main.ts
    Did I miss a step, or has the process changed again?

    • @Paulie Thanks for your comment. VueJs version used in this post is 2.2.x. What version of VueJs are you using? I noticed that 2.3+ has got many changes so it would be great if you do your own research to apply those changes.

  10. Nice post you had shared here.


Leave a Reply

Follow ...+

Kloud Blog - Follow

%d bloggers like this: