Step-by-Step Guide to Setup Typescript with Vue 3

If you’re planning to use Vue3 with Typescript, there are a few steps you need to follow to set up your project. In this blog post, we’ll guide you through the process of setting up Typescript with Vue3 using Vite.

Prerequisites

Before we begin, make sure you have the following installed on your system:

• Node.js
• NPM or Yarn

Step 1: Create a new project

First, create a new Vue3 project using Vite by running the following command in your terminal:

npm init vite@latest my-project --template vue-ts

This will create a new project named “my-project” with Typescript support.

Step 2: Install dependencies

Once the project is created, navigate to the project directory and install the dependencies using the following command:

npm install

Step 3: Configure Typescript

To configure Typescript, create a tsconfig.json file in the root of your project and add the following content:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx", "typings/**/*.d.ts"]
}

This will configure Typescript to target the latest version of ECMAScript, enable strict mode, and allow importing of JSON files.

Step 4: Update Vue3 component files

To update Vue3 component files to use Typescript, change the file extension from .vue to .vue.ts and update the file content to include Typescript syntax. For example, if you have a HelloWorld.vue component file, rename it to HelloWorld.vue.ts and update its content as follows:

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  }
})
</script>

Step 5: Start the development server

To start the development server, run the following command:

npm run dev

This will launch the development server and open your app in your default browser.

That’s it! You have successfully set up Typescript with Vue3 using Vite. Happy coding!

Setup Typescript with an Existing Vue3 Vite Project

If you already have an existing Vue3 project set up with Vite and you want to add Typescript support, follow these steps:

Prerequisites

Before we begin, make sure you have the following installed on your system:

• Node.js
• NPM or Yarn

Step 1: Install Typescript

First, install typescript and @vue/compiler-sfc as dev dependencies using the following command:

npm install --save-dev typescript @vue/compiler-sfc

Step 2: Configure Typescript

Next, create a tsconfig.json file in the root of your project and add the following content:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx", "typings/**/*.d.ts"]
}

This will configure Typescript to target the latest version of ECMAScript, enable strict mode, and allow importing of JSON files.

Step 3: Update Vue3 component files

To update Vue3 component files to use Typescript, change the file extension from .vue to .vue.ts and update the file content to include Typescript syntax. For example, if you have a HelloWorld.vue component file, rename it to HelloWorld.vue.ts and update its content as follows:

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  }
})
</script>

Step 4: Update Vite configuration

Update your vite.config.ts file to include Typescript support. Add the following code to the plugins array:

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    vue(),
    {
      apply: 'build',
      ...require('vite-plugin-typescript2')({
        useTsconfigDeclarationDir: true,
        tsconfig: './tsconfig.json'
      })
    }
  ]
})

This will add support for Typescript and update your Vite configuration to include Typescript.

Step 5: Start the development server

To start the development server, run the following command:

 npm run dev

This will launch the development server and open your app in your default browser.

That’s it! You have successfully added Typescript support to your existing Vue3 project set up with Vite. Happy coding!

Creating a Greeting Component with Props using Vue3 and Typescript

In this tutorial, we will create a simple greeting component with props using Vue3 and Typescript.

Before we begin, make sure you have the following installed on your system

Next, create a new component file in the src/components directory named Greeting.vue.ts and add the following content:

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

<script lang="ts">
import { defineComponent, PropType } from 'vue'

export default defineComponent({
  name: 'Greeting',
  props: {
    message: {
      type: String as PropType<string>,
      required: true
    }
  }
})
</script>

In this component, we are defining a message prop of type String and making it required. We are also using the defineComponent function to create a new Vue3 component.

Step 3: Use the component

To use the component, open the App.vue file in the src directory and update its content to include the Greetingcomponent:

<template>
  <div>
    <Greeting :message="'Hello, World!'"/>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Greeting from './components/Greeting.vue'

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

In this code, we are importing the Greeting component and registering it locally with the components option. We are also passing a message prop to the Greeting component.

Step 4: Start the development server

To start the development server, run the following command:

 
 npm run dev

This will launch the development server and open your app in your default browser.

That’s it! You have successfully created a greeting component with props using Vue3 and Typescript. Happy coding!