Here’s a comprehensive step-by-step tutorial on how to get started with Vue Typescript. Let’s understand building To-do application combining Vue 3 + Typescript.

1. How to Build
ToDo App
with Vue 3 +
TypeScript
www.bacancytechnology.com

2. I always like to code with defining types
and maintaining strictness, and that’s why
TypeScript has fascinated me. Being a
JavaScript developer, you indeed have
encountered this error – Cannot read
property ‘x’ of undefined.
For getting rid of such an error, you should
either verify all the possible use-cases of the
error or give TypeScript a fair shot. I
preferred the latter one, and I’m super
satisfied and happy with my code quality
now.

3. That’s why when VueJS came up with
support for TypeScript, I made up my mind
for trying Vue 3 + TypeScript. Believe me;
the struggle was real and worth it! Vuejs
and TypeScript is a perfect combination- it
gives you flexibility of Javascript and
strictness of TypeScript. I referred to VueJs
official documentation and a few other
blogs/tutorials for the starters. As nothing
was available in one place, I had to juggle
between blogs to build a demo application.
That’s when, I decided to write a blog post
for helping fellow VueJS developers. Here
are the topics which I will cover in this Vue
3 + TypeScript.

4. Table of Index
1. Introduction
2. Goal
3. Installing VueJS
4. Steps to Build Todo App with Vue 3 +
TypeScript
5. Conclusion

5. Introduction

6. VueJS framework is undoubtedly one of the
best JS frameworks. Its progressive take on
the coding part helps developers to build
lightweight and excellent applications.
Unlike AngularJS, VueJS didn’t provide
prominent support for TypeScript in its
older versions. That’s why we have rarely
heard of Vue TypeScript. But, we can
quickly build large-scale front-end apps
with Vue 3 and TypeScript from scratch
with the help of Vue CLI. Still, there’s a
drawback for full-fledged application
development; one might need to install
different third-party packages for
decorators and features. Let’s see what’s the
goal of this blog post.

7. Goal

8. Here’s a step-by-step tutorial on how to
build a simple Todo application with Vue 3 +
TypeScript.
Link of the source code – Github
Repository.
We will build something like this –
Video URL:
https://www.bacancytechnology.com/blog/
wp-content/uploads/2021/03/Todo-
app.mp4?_=1

9. How to Install
Vuejs

10. Open your terminal and follow these steps
to install VueJS in your system if you are
new to VueJS.
npm install -g @vue/cli
Check the version-
vue --version
You will see the latest version installed in
your system as shown below-
In this blogpost we won’t going to discuss
regarding TypeScript Vue, Vue CLI with
typescript and Vue.js typescript
individually. This blogpost is written to
build Todo app, setting up Vue 3 using
TypeScript. Though you can check these
below-mentioned links for basic
understanding-

11. Vue 3 Complete Guide
Vue 3 Youtube Tutorial
For VueJS:
For TypeScript:
Up and Running with TypeScript
TypeScript Github Repository
TypeScript in 5 mins

12. Steps to build
Todo app with
Vue 3 +
TypeScript

13. Create a todo app using this command-
vue create todo-app
You will see something like this. Select
Manually select features
1. Create and Set up Project

14. Set up your todo-app with these
configurations-
cd todo-app

15. npm run serve
After running the above commands, hit the
localhost in your browser, and you’ll see
your VueJS application’s default view.
2. Run project

16. Let’s start coding of building to do app with
Vue 3 + TypeScript!
The below-mentioned image will be our
project structure –

17. SCSS – Handles design part.
Models – For managing the type of tasks in
the to-do app.
Router – Handles routing of the
components.
Store – Managing central state (Vuex)
Views – Consists of pages that will be
displayed. It will have two folders –
AddTask and Home. Each of them consists
of four files, as shown below:

18. Now I’ll take one module at a time
and start editing its files. You can
replace these with your files.
router/index.js
Routing enables applications to display
components on their respective URLs.
Here, ‘/ and /add_task’ will render Home
and AddTask component respectively. You
can visit here to learn more about Vue 3
Router and Vue 3 composition API the way
it works.

19. import { createRouter, createWebHistory,
RouteRecordRaw } from "vue-router";
import Home from
"@/views/Home/Home.vue";
import AddTask from
"@/views/AddTask/AddTask.vue";
const routes: Array = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/add_task",
name: "AddTask",
component: AddTask
}
];
const router = createRouter({
history:

20. createWebHistory(process.env.BASE_URL),
routes
});
export default router;

21. App.vue

22. Consists entire application which will
server-side render on “app” Node. You can
open your developer tools and check the
very first parent < div > – It will consist of
id=app.
<template>
<div id="app">
<router-view />
<div class="bottom_bar">
<div class="row expanded">
<div class="sm-4 columns text-center">
<router-link to="/">
<i class="fa fa-home" aria-
hidden="true"></i>
<span>Home</span>
</router-link>
</div>

23. <div class="sm-4 columns text-center">
<router-link to="/create_task">
<i class="fa fa-plus" aria-hidden="true"
/>
<span>Add Tasks</span>
</router-link>
</div>
</div>
</div>
</div>
</template>
<style lang="scss"
src="./assets/scss/app.scss"></style>4

24. main.ts

25. import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
createApp(App)
.use(store)
.use(router)
.mount("#app");
Now, moving towards the Vue TypeScript
part. We will create two files – BaseModel.ts
and Task.ts for declaring the type of the
objects of each task.

26. BaseModel.ts

27. export class BaseModel {
constructor() {
this.createdAt = new Date();
this.updatedAt = new Date();
this.deletedAt = new Date();
}
createdAt: Date;
updatedAt: Date;
deletedAt: Date;
}
export default BaseModel;

28. Task.ts

29. import { BaseModel } from "./BaseModel";
export class Task extends BaseModel {
name: string;
completed: boolean;
constructor(name: string) {
super();
this.name = name;
this.completed = false;
}
}
export default Task;

30. We will import Task.ts in AddTask.ts to
define the type of the variable.
Moving towards pages – AddTask and
Home

31. AddTask Folder

32. AddTask.html
The .html covers the UI part for Adding
Task page.
<div class="create_task">
<div class="row">
<div class="small-12 text-center">
<h4>Add Tasks</h4>
</div>
</div>
<div class="row align-center">
<div class="small-12 medium-7 columns">
<div class="card">
<div class="card-section">
<div class="row expanded">
<div class="small-12 columns">
<Legend for="todoName">
<b>Add your next task-</b>
</Legend>
<input

33. id="todoName"
type="text"
v-model="taskName"
placeholder="Add your next task here"
@keyup.enter="addTask()"
>
</div>
</div>
<div class="row expanded">
<div class="small-12 columns text-right">
<button
@click="addTask()"
type="button"
class="button success btn-lg btn-
block">
Add
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

34. AddTask.scss

35. .create_task{
margin-top: 2rem;
h4{
font-family: 'Helvetica Neue', Helvetica, Arial, sans-
serif;
margin: 2rem 0;
}
.card{
background-color:#8080800d;
}
.card-section{
padding: 1.5rem;
Legend{
font-size: 20px;
}
input{
border-radius: 5px;
}
button{
border-radius: 5px;
font-size: 18px;
padding: 10px 20px;
}
}
}

36. AddTask.ts

37. import { defineComponent } from "vue";
import Task from "../../models/Task";
export default defineComponent({
name: "AddTask",
data() {
return {
taskName: ""
};
},
methods: {
addTask(): void {
if (this.taskName !== "") {
const newTask = new
Task(this.taskName);
this.$store.commit("setTask", newTask);
this.taskName = "";
this.$router.push("/");
}
}
}
});

38. AddTask.vue

39. It comprises all the three files. You can choose
not to separate code into different files and
rather write the code here in just one file. But,
this looks cleaner and neat, so I chose this.
<template src="./AddTask.html"></template>
<script lang="ts" src="./AddTask.ts"></script>
<style lang="scss" src="./AddTask.scss"
scoped></style>
Planning to create your own Vue component
library?
Hire Vue.js Experts from us to build large-
scale front-end apps leveraging custom
component libraries and Vuex store modules.
Build Now

40. Home Folder

41. The .html part covers the UI part for Home
page where we will display tasks in the list
and take further action.
<div class="home">
<div class="row">
<div class="small-12 text-center">
<h4>VueJS + TypeScript Todo
Application</h4>
</div>
</div>
<div class="row align-center">
<div class="small-12 medium-7 columns">
<table class="main-table">
<thead>
<tr>
<th>To-do List</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
Home.html

42. <transition-group name="fade"
mode="out-in" tag="tbody">
<tr v-for="task in tasks"
:key="task.name">
<td width="75%" v-text="task.name"
class="line" :class='{"text-line-through":
task.completed}'>
</td>
<td width="10%" class="text-right">
<i class="fa fa-check" aria-
hidden="true"
@click="setTaskComplete(task)"></i>
</td>
<td width="10%" class="text-right">
<i class="fa fa-times" aria-
hidden="true"
@click.prevent="deleteTask(task)"></i>
</td>
<td width="10%"></td>
</tr>
</transition-group>
</table>
</div>
</div>
</div>

43. .home{
margin-top: 2rem;
h4{
font-family: 'Helvetica Neue', Helvetica,
Arial, sans-serif;
margin: 2rem 0;
}
tbody{
background-color:#8080800d;
}
thead{
background-color: #0000002e;
}
th{
font-family: 'Helvetica Neue', Helvetica,
Arial, sans-serif;
color: #0b0a0a
}
}
Home.scss

44. Home.ts

45. import { defineComponent } from "vue";
import Task from "../../models/Task";
export default defineComponent({
name: "Home",
data() {
return {
tasks: [] as Task[]
};
},
methods: {
setTaskComplete(task: Task): void {
this.$store.commit("completeTask", task);
},
deleteTask(task: Task) {
this.$store.commit("deleteTask", task);
}
},
mounted() {
this.tasks = this.$store.state.tasks;
}
});

46. Home.vue

47. It comprises all the three files. You can choose
not to separate code into different files and
rather write the code here in just one file. But,
this looks cleaner and neat, so I chose this.
<template src="./Home.html"></template>
<script lang="ts" src="./Home.ts"></script>
<style lang="scss" src="./Home.scss" scoped>
</style>
Now, we will configure store

48. store/index.ts

49. Here in this file we will have a state initiated
with static data to be displayed, mutations for
altering the state. Mutations are nothing but
functions which are used to add, edit, and
delete the values.
import { createStore } from "vuex";
import Task from "../models/Task";
import { findIndex } from "lodash";
export default createStore({
state: {
tasks: [
{
name: "Demo for VueJS and TS",
createdAt: new Date(),
updatedAt: new Date(),
completed: false
},
{

50. name: "UI design",
createdAt: new Date(),
updatedAt: new Date(),
completed: false
}
] as Task[]
},
mutations: {
setTask: (state, task) =>
state.tasks.push(task),
deleteTask(state, task) {
let taskIndex = findIndex(state.tasks, task);
state.tasks.splice(taskIndex, ++taskIndex);
},
completeTask(state, task) {
const taskIndex = findIndex(state.tasks,
task);
state.tasks[taskIndex].completed = true;
}
},
actions: {},
modules: {}
});

51. app.scss

52. $fa-font-path: "../../../node_modules/font-
awesome-sass/assets/fonts/font-awesome/";
@import "../../../node_modules/font-
awesome-sass/assets/stylesheets/font-
awesome";
@import "~foundation-
sites/scss/foundation";
@import "settings";
@include foundation-flex-classes;
@include foundation-flex-grid;
@include foundation-everything(true);
body{
font-family: 'Helvetica Neue', Helvetica, Arial,
sans-serif;
color: #4d4d4d;
font-size: 18px;
line-height: 1.4em;
}
.text-line-through {
text-decoration: line-through;
}
.button {
margin: 0;

53. }
.bottom_bar {
background-color: #0000002e;
font-size: 1.5rem;
position: fixed;
width: 100%;
bottom: 0;
padding: 1.5rem;
a {
color: #0b0a0ab0;
&.router-link-exact-active {
color: #0b0a0a;
}
i{
margin-right: 10px
}
}
}

54. .fade-enter-active, .fade-leave-active {
transition: all .2s ease;
}
.fade-enter, .fade-leave-active {
opacity: 0;
So, this was all the files that had to be changed
for developing a To-do app with Vue 3 +
TypeScript. If you have followed all the steps
as mentioned above, then definitely your
small application would be running as
desired.

55. This was just for your starter of building web
apps with Vue 3 and TypeScript. This
combination of Vue 3 + TypeScript is a very
vast concept to explore and learn. You can
manage your project efficiently with Vue 3
using TypeScript. In case, you need any
guidance for building a VueJS application
using TypeScript then without further ado,
contact Bacancy Technology and hire VueJS
developer. Our skilled team will dedicatedly
work to meet your requirements and
expectations.
Conclusion

56. Thank You
www.bacancytechnology.com