Write a Vue Component as a Class in TypeScript

Extend Vue Components in TypeScript

Use Vue Router in TypeScript

Create Type-Safe Vue Directives in TypeScript

Use Properties in Vue Components Using @Prop Decorator with TypeScript

Use Two-Way Binding in Vue Using @Model Decorator with TypeScript 

Watch for Changes in Vue Using the @Watch Decorator with TypeScript

Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript

Create your own Decorators in Vue with TypeScript

Use AOP in Vue Components with TypeScript and Kaop-ts

Decouple Dependencies Using IoC Containers in Vue with TypeScript and InversifyJS

Use TypeScript to Develop Vue.js Web Applications

**vue-router** introduces new hooks into the component. In this lesson we’ll show you how to use these new hooks in your class based **Vue** components in **TypeScript**.  We’ll also go over how we can create and use routes in **Vue**. 

https://app.egghead.io/api/v1/lessons/vue-js-use-vue-router-in-typescript/subtitles

[00:00] In order to do the routing, we need to create another component. Let's call it hello TS. Let's write the template, so hello TS. Now, write the component itself. First, we need to import Vue and component from vue-class-component. Then we need to use the component decorator, and export the class as usual.

[00:31] Now, let's write a created hook, and say hello TS created there, so we can see which component is loaded. Now, we need to add the route. Let's open the router index TS. First, let's import the new component up there, hello TS.

[00:57] Next, we need to create the route for hello TS. Let's name it under /hello-ts. We still need to create some way of navigation between routes. For that, we can use the router link component, which is given by vue-router.

[01:20] Let's link to hello TS from the hello component, and the same the other way around. From hello TS, let's link to hello component. Let's put this under one route element. Now, if we click hello TS, we go to hello TS, and the other way around.

[01:51] We can see the logs in the console, but the created hook is not the ideal one if we want to check when we entered our route. For that, vue-router give us some additional routes, like before route enter. That's use that one in the hello component.

[02:06] If we try this again, we don't see it logging in the console. That's because vue-class-component doesn't know about any additional hooks. We need to register new hooks. Let's create a hooks.ts file. In there, we need to import component from vue-class-component, and we have to call the register hooks method.

[02:32] It dispatch an array of strings with the routes that we want to register. Let's write before route enter, and before route leave. It's important that we call this file before creating the Vue instance. Go to main.ts file, and import the hooks file in there at the beginning.

[02:56] Now, we see that something is wrong. There is something not working with our code. What is happening is that the router hooks are asynchronous. They expect to, from, and next as arguments of the hook method.

[03:10] Let's write a console log there, and let's call next to tell the route to continue. Now, we see enter in the console, so that's working.

Use Vue Router in TypeScript

Share this video with your friends

Course

Use TypeScript to Develop Vue.js Web Applications