Latest Code Tutorials

How to Use TypeScript with Vue Tutorial

Vue.js is already providing typescript support. The static type system can help prevent many potential runtime errors, especially as applications grow. For developing Vue applications with TypeScript, we strongly recommend using Visual Studio Code, which provides great out-of-the-box support for TypeScript.

If you are new to vue.js then check out my Vuejs Tutorial With Example  So we will use TypeScript as a Language, and it compiles into JavaScript. First, we need to install Vue.js. Go to the terminal and hit the following command.

TypeScript with Vue js

We will start this example by installing the Vue.js in the local.

Step 1: Install Vue.js.

Type the following.

vue init webpack vue-typescript-template

After installing, go into that folder. We need to create the tsconfig.json file.

Step 2: Create the tsconfig.json file.

  "compilerOptions": {
    "lib": ["dom", "es5", "es2015"],
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true

To run typescript in our file, we need to create a tsconfig.json file. It will set up the configurations for us. If you have worked on Angular before then, you are familiar with that file.

Step 3: Install the TypeScript dependencies.

Go to your root and hit the following command.

npm install typescript ts-loader --save-dev
Note: If you find any error then Install ts-loader 3.5.0 if you’re not using webpack 4. 

Now, we need to configure the build  >>  webpack.base.conf.js file. Just add the following code.

module: {
    rules: [
        test: /\.ts$/,
        exclude: /node_modules|vue\/src/,
        loader: "ts-loader",
        options: {
          appendTsSuffixTo: [/\.vue$/]

In there, rename the entry to .ts and add it to the extensions.

entry: {
  app: './src/main.ts'
resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],

Now, Add es-module: true to build/vue-loader.conf.js.

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  esModule: true,

Step 4: Start the server.

Type the command to start the server.

npm run dev

If you have done all the configurations correct then you can able to run the project.

Step 5: Write class-based components.

First, we need to install the following packages to declare class-based components.

npm install vue-class-component vue-property-decorator --save-dev

Now, we need to add two properties inside the tsconfig.json file.

"experimentalDecorators": true,
"allowJs": true,

It will help us to remove the errors.

Now, in our project, there is already one component called HelloWorld.vue component. I am now writing this whole component in class-based syntax.

    <p>Class based component</p>

<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'

  components: { HelloWorld }
export default class HelloWorld extends Vue {


You can see here, I have used Component decorator inside the vue component. Also, this syntax is almost familiar with Angular Component.

So now go to the http://localhost:8080. You can see that it is working exactly fine. So you can use TypeScript decorator and class in the Vue.js application. This is how you can integrate TypeScript with Vue js.

1 Comment
  1. Chetan says

    You should mention the first step to install vue-cli. There are some users who are starting new.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.