How to Install TypeScript in Vue 3

In this tutorial you will see how to install typescript in vue js 3. TypeScript is simplifies JavaScript code, as it adds the readability and writability and makes easier to debug. You can also use modern JavaScript ES6+ code with the help of typescript you can avoid painful bugs. For this tutorial we will setup vue 3 project with typescript with the help of vue cli and vue cli gui.

1) Setup Vue 3 TypeScript Project with Vue CLI

Create vue 3 Project

To create a new project, run:

vue create vue3-ts 

Then select manually features option and hit Enter button.

Vue CLI v4.5.15
? Please pick a preset: 
 s ([Vue 3] babel, router, eslint) 
 Default ([Vue 2] babel, eslint) 
 Default (Vue 3) ([Vue 3] babel, eslint) 
❯ Manually select features 

Next, you need to select TypeScript and you can also select router,vuex for your project requirements. Then hit Enter button.

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Choose Vue version
 ◉ Babel
❯◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Simply select vue version 3.x and hit Enter button.

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 
 2.x 
❯ 3.x 

Now choose your configuration and move to project directory and run project.

cd vue3-ts
npm run serve 

http://localhost:3000/

Finally your vue 3 with typescript project is done.

Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src

export default defineComponent({
  name: 'Home',
  components: {
    HelloWorld
  }
})
</script>

typescript image

2) Setup Vue 3 TypeScript Project with Vue CLI GUI

To create a new project, run:

vue ui

After run vue ui vue project manger will show.

🚀  Starting GUI...
🌠  Ready on http://localhost:8000

Click Create tab button to create project.

install vue 3 typescript step 1

After it will show Details tab give your project and click next button.

install vue 3 typescript step 2

Then you will see presets section select Manual and go next section.

install vue 3 typescript step 3

Next, you need to on TypeScript features you can also select router vuex etc.

install vue 3 typescript step 4

In Configuration tab you need to select vue 3 and pick a linker formatter config. Then click create project.

install vue 3 typescript step 5

Next, you can simply choose without saving.

install vue 3 typescript step 6

Now Finally your vue 3 project with typescript is ready. just click run task.

install vue 3 typescript step 7

Run in browser

http://localhost:8080/

or you can run

npm run serve

Note: If you have the latest version of vue cli you can simply install vue 3 with typescript.

vue create project

Choose second option.

Vue CLI v4.5.15
? Please pick a preset: 
 s ([Vue 3] babel, router, eslint) 
❯ a ([Vue 3] babel, typescript, router, vuex, eslint) 
 Default ([Vue 2] babel, eslint) 
 Default (Vue 3) ([Vue 3] babel, eslint) 
 Manually select features