Editor’s note: This Vue.js and TypeScript tutorial was last updated on 30 April 2021. In this tutorial, we’ll demonstrate how to build a Vue.js app completely in TypeScript. We’ll highlight some of the benefits of using TypeScript with Vue by building a Vue + TypeScript example app with class-based components, Vuex for state management, lifecycle hooks, and more.
Here’s what we’ll cover during this walkthrough:. Vue.js is an amazing, lightweight, and progressive frontend framework.
Since Vue.js is flexible, users are not forced to use TypeScript. And unlike Angular, older versions of Vue did not have proper support for TypeScript.
New features shipped with Vue 3 include a built-in composition API, multiple root elements, and, crucially for this tutorial, improved TypeScript support.
- For a detailed guide on how to migrate your existing Vue.js projects to Vue 3, check out “Refactoring your Vue 2 apps to Vue 3.”.
- However, you still need some third-party packages with custom decorators and features to create a true, complete TypeScript application.
Using TypeScript mixins with Vue.js
To help paint a fuller picture, we’ll demonstrate how to build a new Vue and TypeScript application using Vue CLI.
- To add TypeScript to your Vue.js project, start with this line of code:.
- Choose manually select features and configure it as shown below:.
- Once the project is set up, run the project to test it:.
Open localhost:8080 (or the URL your console shows after starting the project), and we can see it running successfully.
Open the HelloWorld.vue file from the components directory.
Let’s get started! To use class-based components in TypeScript, enter the following:.
- To use TypeScript, we need to first set the lang attribute in the