TypeScript has become very popular these days, and I’m sure there are some of you who’d prefer using it while creating Vue components. In this tutorial, I’ll show you how to use TypeScript—along with vue-class-component, Browserify, and Vueify—to create a simple Vue 2.x component.
Note that we won’t be using any starter templates in this tutorial. In fact, we won’t be using Vue CLI at all. Instead, we’ll install everything we need manually, and also build our project manually. Why? Well, to gain a better understanding of how things work.
Let’s start by creating a new directory for our project.
We can now generate a package.json file for our project using
To be able to use the TypeScript transpiler from the command-line, install it globally.
And now, install Vue and vue-class-component, a TypeScript decorator for Vue components, as your project’s dependencies.
Additionally, you must install TypeScript definitions for
Let us now create a simple component. We’ll do so by creating two files:
As you might expect, dog.ts is going to contain our component’s TypeScript code, and Dog.vue will contain the layout.
First, open dog.ts using your favorite code editor.
Inside it, import both
And now, create a new class called Dog, which extends
Vue. Additionally, use the
@Component decoration to specify the properties of the component.
You must also mention the same properties as member variables of the class.
Any additional member variable you add will become the
data of the component.
In the above code, you can see that
owner are properties. And
description is part of the
data. Lastly, the
mounted() lifecycle method is being used to initialize the
description using the values of the
That’s all you need to add. Our component’s TypeScript code is ready. It was easy, wasn’t it?
Now, in the command-line, transpile the TypeScript file using
--experimentalDecorators flag to the command.
If there are no errors, at this point, you’ll have a dog.js file.
Let us now define our component’s layout inside the .vue file. So, open Dog.vue.
Inside it, we’ll add some very basic HTML code. We’ll also use the mustache syntax to display some of our component’s properties and data.
Additionally, to link the layout to our code, we must use a
<script> tag. For now, point it to the generated dog.js file.
Our component is now ready. To be able to use it, create a new file called start.js and import both
Dog.vue inside it.
Next, use the constructor of
Vue to render a new
Dog element. You can use
props to specify the values of its properties.
Accordingly, add the following code to start.js:
Note that the
Dog element will be added to an HTML element whose id is
my-component-container. So, let us now create a new HTML page having it. I’m going to call the page start.html.
You can see that the page is using a new script file called build.js. We won’t be creating the file. Instead, we’ll be generating it by converting start.js using Browserify and Vueify.
browserify globally, and
vueify as a dev dependency.
You can now pass start.js to
vueify to convert it into build.js.
If you open start.html using a browser, you should be able to see your component working.
So, create a new file called vue.config.js. Inside it, add the following code:
As you can see, the above code adds a custom compiler for
<script> tags whose
transpileModule() method to do so. The return value of the
transpileModule() method is a JSON object containing two fields:
At this point, you can reopen Dog.vue and change its
<script> tag to point to dog.ts directly. Alternatively, you can copy all the contents of dog.ts and paste them inside the tag.
Lastly, run the following command to be able to use the TypeScript Compiler API in the project. Alternatively, you can install TypeScript as a dev dependency.
And that’s all there is to it. You can run
browserify again, and you’ll see that the component still works just fine.
In this tutorial, you learned how to use
vue-class-component, TypeScript, Vueify, and Browserify in your Vue projects. You might think that’s a lot of work. But, I hope you now have a better understanding of how all of them work together.