Vue.js is a progressive framework for building user interfaces. It is lightweight, flexible, and easy to use. TypeScript, on the other hand, is a statically typed superset of JavaScript that helps catch errors during development. Together, they form a powerful combination that can help you build scalable, maintainable, and high-performing web applications. In this tutorial, we will explore how to build web applications with TypeScript and Vue.js.


Prerequisites

Before we get started, there are a few prerequisites that you should be familiar with:

  • Basic knowledge of HTML, CSS, and JavaScript
  • Familiarity with TypeScript and Vue.js
  • Node.js and npm installed on your machine


Step 1: Setting up the Project

To get started, let's create a new project directory and initialize it with npm.

mkdir my-app
cd my-app
npm init -y

Next, we need to install the necessary dependencies.

npm install vue typescript vue-class-component vue-property-decorator --save
npm install @types/node @types/vue @types/vue-router @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-vue vue-template-compiler --save-dev

We will be using vue-class-component and vue-property-decorator to write class-based components, which is a popular way of writing Vue.js components. @types/* packages are used for TypeScript type definitions. eslint, @typescript-eslint/eslint-plugin, and eslint-plugin-vue are used for linting the code. vue-template-compiler is used to compile Vue.js templates.


Step 2: Configuring TypeScript

Create a tsconfig.json file in the root directory of the project and add the following configuration.

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

This configuration sets the target to es5, enables strict mode, and allows us to use decorators. It also specifies the paths for the src directory and includes TypeScript files from the src directory.


Step 3: Creating Vue.js Components

Let's create a simple Vue.js component in the src/components directory. Create a new file named HelloWorld.vue and add the following code.

<template>
  <div>
    <h1>{{ greeting }}</h1>
  </div>
</template>

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

@Component
export default class HelloWorld extends Vue {
  greeting: string = 'Hello, World!';
}
</script>

This code defines a Vue.js component that displays a greeting message. We are using the @Component decorator from vue-class-component to define the component and the Vue class from vue-property-decorator to extend the component.


Step 4: Registering Vue.js Components

To use the HelloWorld component, we need to register it with Vue.js. Create a new file named main.ts in the src directory and add the following code.

import Vue from 'vue';
import HelloWorld from './components/HelloWorld.vue';

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  components: {
    HelloWorld,
  },
  template: '<HelloWorld/>',
});

This code creates a new Vue instance and registers the HelloWorld component with Vue.js. We are using the el property to specify the root element for the application and the components property to register the HelloWorld component. Finally, we are using the template property to render the component.


Step 5: Running the Application

To run the application, we need to compile the TypeScript code and start a development server. Add the following scripts to the package.json file.

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

The serve script starts a development server, and the build script builds the application for production.

Run the following command to start the development server. 

npm run serve

This will start the development server on http://localhost:8080/. Navigate to this URL in your browser to see the application running.


Conclusion

In this tutorial, we explored how to build web applications with TypeScript and Vue.js. We started by setting up the project and configuring TypeScript. We then created a simple Vue.js component and registered it with Vue.js. Finally, we ran the application using a development server. With TypeScript and Vue.js, you can build powerful and scalable web applications that are easy to maintain and test.