Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

TypeScript is a powerful JavaScript superset which brings you first-class static type-checking along with latest ECMA Script features. Vue is one of the most modern libraries for managing the view layer.

Angular has fully adopted TypeScript as its language, and React has broad support for it. But, what about Vue?

This course will show how to take full advantage of TypeScript static typing on Vue apps by using class based components, typing directives and using decorators.

Writing **Vue** components as plain objects has very limited capabilities for TypeScript’s **IntelliSense**. This lesson will show you how to write components as classes to take full potential of TypeScript static typing by using [vue-class-component](https://github.com/vuejs/vue-class-component).

Write a Vue Component as a Class in TypeScript

This lesson shows how you can extend and reuse logic in Vue components using TypeScript inheritance. It will take you through extending a component, its properties and methods, and how hooks are triggered along the inheritance tree.

Extend Vue Components in TypeScript

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

Use Vue Router in TypeScript

Directives allow us to apply DOM manipulations as side effects. We’ll show you how you can create your own **Vue** directive to change a component’s colors and type-safe it with **TypeScript**.

We’ll additionally show how you can pass objects to your directives and make them more flexible! 

Create Type-Safe Vue Directives in TypeScript

With properties we can follow a one-way parent→child flow communication between components. This lesson shows you how you can pass down properties to class based **Vue** components by using the **@Prop** decorator from [vue-property-decorator](https://github.com/kaorun343/vue-property-decorator). 

We’ll also see how we can set types and even default properties on **@Prop**!


Use Properties in Vue Components Using @Prop Decorator with TypeScript

**Vue** models, **v-model**, allow us to use two-way data binding, which is useful in some cases such as forms. This lesson shows how to use it by creating a custom checkbox component using the **@Model** decorator in **TypeScript**.

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

**Vue** watchers allow to perform async updates as a side effect of a property change. This lesson shows you how you can watch properties on your class based component and how to use the **@Watch** decorator for it. 

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

**Vue 2.2** introduced a simple dependency injection system, allowing you to use provide and inject in your component options. This lesson shows you how to use them using the **@Inject** and **@Provide** decorators in tandem!

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

We’ve used **@Watch**, **@Inject** and more decorators from [vue-property-decorator](https://github.com/kaorun343/vue-property-decorator). In this lesson however we will guide you through creating your own decorators in order to add common functionality to your **Vue** components using **TypeScript**.

Create your own Decorators in Vue with TypeScript

Aspect Oriented Programming, **AOP**, allows to reuse logic across an entire app in a very neat way, decoupling it from the business logic. [Kaop-ts](https://github.com/k1r0s/kaop-ts) bring us decorators in order to apply **AOP**. This lesson will show you how you can move cache and exception handling out of your business logic using **TypeScript** and **Kaop-ts**

Use AOP in Vue Components with TypeScript and Kaop-ts

Using Object Oriented Programming, **OOP**, style allows us to apply Inversion of Control, **IoC**, and more patterns. An **IoC** container helps decoupling dependencies by using a class constructor or properties to identify and inject its dependencies. This lesson will show you how can you create and use an **IoC** container to decouple an http client and users service dependencies in a **Vue** component with **TypeScript** and [InversifyJS](https://github.com/inversify/InversifyJS).

Use TypeScript to Develop Vue.js Web Applications

Alex Jover Morales

Course Content