DEV Community

Cover image for Building a Vue 3 component with Typescript

Building a Vue 3 component with Typescript

Lorenzo Millucci on March 09, 2020

The alpha version of Vue 3 has been available for some time now! While I’m writing this post the alpha 8 version has just been released. The new v...
Collapse
 
koehr profile image
Norman

Thank you so much for this little head start. I was quite frustrated with Vue2 + vue-class-components and this was the last little spark I needed to finally try this setup. I failed with setting up the vue3 example with TS before because I didn't get the shims file right. Thanks for helping with this!

Just a little nag: Because I had experience with it, it was obvious for me, but your article doesn't obviously state where to put the shims file when it introduces it. This is fixed with the little file tree later but you might want to improve the wording around the shims file part as well.

Collapse
 
lmillucci profile image
Lorenzo Millucci

Changed! Tank you for the feedback :)

Collapse
 
vutran6853 profile image
Vu Tran • Edited

I don't understand. You are writing TS in script tag. But I don't see you are using TS inside your setup function. You can write this without add typescript and just use setup(). So what is this blog about?

Collapse
 
lmillucci profile image
Lorenzo Millucci

It is a very very simple example, it's true that I'm not using any specific Typescript code inside the setup function but I could have use it because the project is configured to transpile typescript.
This article was about configuring the environment to create a very easy component to try composition API through Typescript. It's clear that you can easily remove all the TS setup and go with the vanilla JS ;)

PS: if I had used only JS I would have defined a the component with export default { setup(){} } and not with export default defineComponent({ .. })

Collapse
 
vutran6853 profile image
Vu Tran

I see. Thank you for clearly that up for me. Good reading too.

Collapse
 
cmcdragonkai profile image
Roger Qiu

What is needed to enable the ability to write styles/css into the App.vue file so that webpack properly extracts it? Is there a css loader of some sort that needs to be applied?

Collapse
 
lmillucci profile image
Lorenzo Millucci

vue-loader should do the trick

Collapse
 
cmcdragonkai profile image
Roger Qiu

We did have vue-loader, but no, it required other things like css-loader and file-loader for images too.

Collapse
 
chiubaca profile image
Alex Chiu

This weird, I forgot to wrap my setup() logic in a defineComponent and TS was still working ok in my Vue 3 code. Any ideas why that is?

Collapse
 
jonasgroendahl profile image
Jonas Grøndahl

this also seems useful:
v3.vuejs.org/guide/typescript-supp...

Collapse
 
vongsi profile image
Vongsi

Clear explanation.

Thanks for sharing.

Collapse
 
avxkim profile image
Alexander Kim

When Vuex and Router would be fully rewritten in TS, only then it would be ready for production with TS. Now it's useless.

Collapse
 
rogerjohn0 profile image
Roger John

Typescript is not JavaScript.