Vue + Typescript = 🔥

So, I wrote an article about Vue using Typescript on Medium link, so thought to write about it here.

I am a huge fan of Vue and recently I joined as an intern at an organisation where they're using Vue + Typescript so after a week of hustle, I finally have an idea how to get started.

So Vue + typescript works on class-based components, and use decorators to add functionality in class, to get started let's build a simple component.

	<template>
	<div>
	<p>Hi this is test template</p>
	</div>
	</template>
	<script lang="ts">
	import Vue from 'vue';
	import { Component} from 'vue-property-decorator';
	@Component({
	name:'Test component'
	})
	export default class TestComponent extends Vue {
	}
	</script>

view raw Test-new.vue hosted with ❤ by GitHub

We used Component decorative from 'vue-property-decorator' and used it over the class which extends Vue and exported it.

What about the state, well we can add an attribute and it will work as an state property.

Now let's add props and a child component.

	<template>
	<div>
	<p>Hi this is test template</p>
	</div>
	</template>
	<script lang="ts">
	import Vue from 'vue';
	import { Component, Prop} from 'vue-property-decorator';
	@Component({
	name:'Test component'
	})
	export default class TestComponent extends Vue {
	@Prop({default: 'default value})
	myProp : string | { isObject : true } | any
	}
	</script>

view raw Test-with-props.vue hosted with ❤ by GitHub

Here, we used Prop decorator and simply added to an attribute in the component, and with the power of typescript's static typing, I can add datatype as well.

	<template>
	<div>
	<p>Hi this is test template</p>
	</div>
	</template>
	<script lang="ts">
	import Vue from 'vue';
	import { Component, Prop} from 'vue-property-decorator';
	import AnotherComponent from './another-component.vue'
	@Component({
	components: {
	// We've added custom name for the component, else it can be simply adding component here
	'another-one': AnotherComponent,
	},
	name:'Test component'
	})
	export default class TestComponent extends Vue {
	//In typescript you have to declare type of a variable and | means or here.
	@Prop({default: 'default value'})
	myProp : string | { isObject : true } | any
	}
	</script>

view raw Test-with-child-components.vue hosted with ❤ by GitHub

Now, in the component decorator, we can add components property where child components can be registered.

I talked briefly talked over other decorators over my medium article, and here I'm adding a link for a practice project I build using vue + typescript. Link.