Vue3 Ts

Posted on  by admin

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’s 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.

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 the flexibility of Javascript and the 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 tutorial.

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 –.

Open your terminal and follow these steps to install VueJS in your system if you are new to VueJS.

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-. 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 Complete GuideVue 3 Youtube Tutorial. Up and Running with TypeScriptTypeScript Github RepositoryTypeScript in 5 mins.

Create a todo app using this command-. 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-. 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.