2 Way 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.

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>



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.


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


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


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


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


Next, you can simply choose without saving.

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

Run in browser

http://localhost:8080/

or you can run

npm run serve