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.
Table of Index
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 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.
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 –
How to Install Vuejs using Vue CLI
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-
You will see the latest version installed in your system as shown below-
If you have already installed it, you can make sure to update Vue CLI to its latest version by running the following command-
npm update -g @vue/cli
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-
Vue 3 Typescript Project: Steps to Build Todo App with Vue 3 Typescript using Vue CLI
1. Create and Set up Vue 3 Typescript Project
Create a todo app using this command-
vue create todo-app
We will use Vue CLI to set up our Vue Typescript project.
You will see something like this. Select Manually select features
Set up your todo-app with these configurations-
Navigate to the application-
2. Run project
npm run serve
After running the above commands, hit the localhost in your browser, and you’ll see your VueJS application’s default view.
Let’s start coding of building to do app with Vue 3 Typescript!
The below-mentioned image will be our project structure –
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 store)
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:
Now I’ll take one module at a time and start editing its files. You can replace these with your files.
Routing enables applications to display components on their respective URLs.So, let’s get our hands on Vue router.
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.
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.
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.
We will import Task.ts in AddTask.ts to define the type of the variable.
Moving towards pages – AddTask and Home
The .html covers the UI part for Adding Task page.
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.
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.
The .html part covers the UI part for Home page where we will display tasks in the list and take further action.
It comprises all 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.
Now, it’s time to configure Vuex Store.
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.
So, these were 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 mentioned above, then definitely your small application would be running as desired.
You might have heard about another feature of Vue 3 i.e Vue Composition API. Visit How to Build To-do App using Vue Composition API and Vuex 4 to explore and learn more about Composition APIs.
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.