Made withVue.jsClip

Vue 3 with TypeScript Tutorial #1 - Intro & Setup

N

Net Ninja

Creator on the Vue.js channel

Watch on YouTube ↗

229K viewsMay 3, 20218:54 runtime

Learn how to set up and configure a Vue 3 project with TypeScript from scratch. This tutorial covers the benefits of using TypeScript with Vue, such as static typing for better error catching and code readability. You'll walk through creating a new project using the Vue CLI…

Chapters

#vuejs#clip#frontend

Key Concepts: Vue 3 with TypeScript Setup

This video provides a comprehensive guide to initializing a Vue 3 project with TypeScript and cleaning up the initial boilerplate.

Why Use TypeScript with Vue?

Using TypeScript offers several advantages for Vue development, especially as projects grow in complexity:

Static Typing: Specify the exact types of data for variables, functions, and props.
Early Error Detection: Type errors are caught by the compiler before runtime, saving development time.
Enhanced Editor Support: IDEs like VS Code provide better code auto-completion and intelligence.
Improved Readability & Maintainability: Makes it easier for developers to understand how different parts of the code should work together.
Better Developer Experience: Simplifies debugging and refactoring.

Note
Prerequisites: A basic understanding of both Vue 3 (Composition API) and the fundamentals of TypeScript is assumed for this tutorial series.

Project Setup via Vue CLI

To create a new Vue 3 project with TypeScript, use the Vue CLI with a manual feature selection.

Run the create command: vue create your-project-name
Select features: Choose Manually select features.
Choose options:
- Enable TypeScript.
- Choose Vue Version 3.x.
- Say No to Use class-style component syntax?.
- Enable Babel.
- Select your preferred Linter / Formatter configuration.

TypeScript Project Structure

A Vue project with TypeScript has a few key differences from a standard JavaScript one:

main.ts: The application's entry point file now has a .ts extension.
shims-vue.d.ts: A declaration file that helps TypeScript understand .vue single-file components.
tsconfig.json: The configuration file for the TypeScript compiler, defining rules for how TypeScript should be compiled to JavaScript.
Component Script Block: In .vue files, the script tag must have the lang="ts" attribute: <script lang="ts">.
defineComponent: Components are now defined by wrapping the component object in the defineComponent function imported from Vue. This provides better type inference and checking within the component. import { defineComponent } from 'vue';

Tip
Recommended VS Code Extension: Install the Vetur extension for enhanced Vue.js tooling, including syntax highlighting, snippets, and error checking within your editor.

Initial Project Cleanup

After setup, the project is cleaned for a fresh start:

Delete the default HelloWorld.vue component.
Remove the Vue logo from the assets folder.
Clean App.vue by removing the imported component, clearing the template, and deleting default styles.
Create a global.css file for base styles and import it into main.ts to apply it globally: import './assets/global.css';

Why Use TypeScript with Vue?

Hey there gang and welcome to your very first Vue and TypeScript tutorial.

All right then, so in this tutorial I'm going to show you how to get up and running with TypeScript in your Vue 3 projects. But before we start the how, let's quickly talk about the why.

So why would you want to use TypeScript to create your view projects? Well TypeScript builds on JavaScript by adding static type definitions to the language, meaning that we can specify the exact types of data that our variables should be holding. And this leads to several benefits when we're programming.

First of all, type errors can be caught prior to runtime by the compiler, which can save a bit of time during development. Secondly, code editors like VS Code offer additional help when working with TypeScript, for example, code auto completion. Thirdly, as your project gets bigger, using TypeScript can make your code much more readable. It becomes easier for all the developers viewing your code to understand how all of your functions and data should be working together. And finally, it offers an all-round better developer experience, especially when it comes to debugging and refactoring code. So there are many reasons you might want to use TypeScript in your project and it can help significantly, especially as your code base gets much bigger and more complex. And we're going to see some of these benefits in action as we go through the course.

Prerequisites and Project Overview

Now before we start, I'm assuming you already understand the basics of using Vue, in particular Vue three. If not, definitely check out my Vue 3 course for beginners first of all. I'm also banking on you knowing at least the basic building blocks of TypeScript before you start as well. And again, if not, definitely check out my TypeScript tutorial first of all. The link to both of these courses is going to be down below the video. But now, assuming you know the basics of both of these things, let's crack on and see how to use them together.

So in this series, we're going to be creating a new Vue 3 project from scratch using TypeScript, and the project is going to look something like this. Just a simple jobs board site called Hyrule Jobs which, by the way, is a nod to the Legend of Zelda game for those wondering about the title. I'm not just making up weird site names here, it does have meaning. But anyway, it's a very simple site which basically just lists out a bunch of data, and it allows you to reorder the data based on these criteria right here. And although this is a very simple project in nature, it's going to allow us to see how we can use TypeScript to easily create a Vue 3 project.

Accessing Course Files

Now if you want to get access to any of the course files for this series, then just head on over to this repo right here, Vue with TypeScript. I'll leave the link to this down below the video. Now each lesson has its own branch because each lesson has its own code. So if you want to get the code for lesson four, for example, you'd select lesson four from the branch drop down. And then you can see all of the folders and code right here. If you want to download it, you can go to this button and then download a zip of lesson four.

Project Setup with Vue CLI

All right then, so let's kick this off by creating a new Vue project, and we're going to use the Vue CLI to do this. So I'm going to say vue create and then the name of the project, which is hyrule-jobs, and then this is going to ask us a series of questions about the new project. So first of all, we want to manually select the features of the project. We want to keep these checked, but also check the TypeScript box so that we're using TypeScript to create our Vue project. Press enter. We want to use version three. We don't want class style component syntax, so click on no for that. We do want to use Babel, and I'm going to go with ESLint with error prevention only, lint on save, and in a dedicated config file. I don't want to save the preset. So this is going to boilerplate our new Vue 3 project for us.

Exploring the TypeScript Project Structure

All right then. So now that's done, I can cd into the new project directory, which is hyrule-jobs, and then I want to open this up in Visual Studio Code. So I can type code ., press enter, and this opens up VS Code for this project. So this right here, my friends, is our starter project. Now, if you've ever seen a new Vue 3 site created this way before but using JavaScript, you'll recognize most of the files and folders over here. But there are a couple of changes. First of all, you can see this main.ts file, the file that kickstarts the application is a TypeScript file now. Everything inside it is the same, but it has a TypeScript extension. Secondly, you can see this shim-vue file right here as well. Now this is basically a file which tells TypeScript all about Vue files, so it can better understand single file components. You don't need to change any of this code, so just leave it be. And finally, we've now got a tsconfig file right here which is the configuration for the TypeScript compiler.

Changes in Vue Components

Now apart from that, everything looks pretty similar at first glance. However, if you go into a Vue component, for example, App.vue, you're going to notice a couple of changes here as well. First of all, this script tag has a lang attribute saying it's equal to ts for TypeScript. That's because we're using TypeScript inside it. And secondly, the way we create a component object now is slightly different. This time we're using this function called defineComponent which passes in an object to represent that component. Now this function is from Vue itself and it allows us to create a component that works well with TypeScript.

Cleaning Up the Boilerplate

Now we'll talk about components and using TypeScript inside them in the next lesson. To begin with now, I just want to tidy up this new project. So to begin with, I want to go into the components folder and we're going to get rid of this HelloWorld component right here because we don't need that anymore. So let me just delete that. And then also I want to go into assets and delete the logo, we don't need that. I also want to clean up a lot of the bum fluff from this file right here. So let me get rid of this template, we don't need that. We also don't need to import HelloWorld because we're not going to use that, and we can take it away from the components right here. And then finally we can get rid of this style down here. Now inside the template I'm just going to replace that with some simple text. So I'm going to do a div with the class of app first of all and then inside that I'll just say, 'Hello Hyrule'. All right, so let me save that. I also want to add in some global styles as well. Now to do that I'm going to create a file inside assets called global.css and I'm going to paste in just a couple of styles. So all we're doing is importing a font from Google Fonts which is Open Sans, then we're applying that font family to the body and giving it a background of a light gray color. So that's all there is to it.

Running the App and Recommended Tooling

So let me save that and now register this CSS file inside the main file so that it applies to our website. All we need to do is import it. So import, and then we want to go into the assets folder and then we want global.css. That's all there is to it. All right then, so now we've done that, let's try running this in a browser. To do that, open up a terminal and you want to type in npm run serve. This is going to spin up a local development server so we can preview the work in a browser. And I'm going to click on this URL right here, localhost, which has opened up on another screen. So this my friends is our project so far.

Now there's one more quick thing I want to show you before we finish up this video and that is a package I've got installed for VS Code called Vetur. I'm not sure that's how you pronounce it but it's this one right here and it comes with a load of different tooling for Vue applications such as syntax highlighting, snippets, etc. You can read more about it right here but I would definitely recommend installing this.

Course Information & Outro

In fact, we're going to be using this package a little bit later on in the course. So just search for Vetur in your extensions or packages section right here and install that first of all. Now if you want to watch this whole course right now without any YouTube adverts at all, you can do. I've uploaded the entire course onto Net Ninja Pro so you can either buy this course separately for two dollars or sign up for the monthly Net Ninja Pro membership, which is just nine dollars a month. And for that, you're going to get access to all of my courses without adverts as well as extra courses from Udemy and other premium courses as well. So I'll leave this link down below in case you want to grab it from here. Otherwise guys, don't forget to share, subscribe, and like, that really means a lot, and I'm going to see you in the very next video.