Vue.js With TypeScript A Beginners Guide

[@ProgramWithErik]

🚨 IMPORTANT: I have the ultimate Vue course! If you're interested in it click here and get a free Vue cheat sheet! www.vuecourse.tech/

[@Kempriol]

Vue LP based on react@16 ahaha

[@JulienReszka]

Please create the video tutorial to add typescript to an existing vue.js project

[@saraivasquezmarinez949]

You just type "vue add typescript" inside of the vue project; there are different configs but are still VERY similar to the ones in this video

[@yackawaytube]

Awesome. Just started my journey of Vue today. Thanks.

[@ProgramWithErik]

Good luck!

[@IanGem1121]

At 9:31 what is the difference between msg and erik? What does @Prop do?

[@gideonking3667]

The typing should be "string" the primitive type rather than "String" which is an object (i.e. an object with String.prototype in its prototype chain). In virtually all cases it will not cause a problem with compiling, but "string' is technically correct.

[@ProgramWithErik]

Good catch!

[@kalyszhek5296]

Hello! As a professional, purely your opinion, what do you think is right, a class component or a functional component? and I'm use: import { defineComponent } from 'vue'; import HelloI18nVue from './HelloI18n.vue'; export default defineComponent({ components: { HelloI18nVue }, setup() { } }) do you think this is right? P.s. I'm a beginner Vue3+TS DeV.

[@collinslagat3458]

Vetur intellisense plugin doesn't play well with the template portion in Class Based Components. It doesn't autocomplete or give suggestions on properties defined in the component. But other than that, the class based component is pretty good.

[@Xenon77x]

I think this make it similar to angular which is goooooood, OOP

[@johnm8358]

Happy new year erik

[@ProgramWithErik]

Thanks!

[@alanhunt3772]

Coming from React I can see the benefits of Vue, but it seems Vue as a whole involves a lot less actual JS than React, thus almost downplaying the need for TS. Vue gets the award for simplicity with binding but I personally think React is a bit more readable and I still enjoy declaring variables rather then appending to a data() object. That's just my two cents from watching this video.

[@ProgramWithErik]

That's a good point. But with Vue 3, it's a good combination

[@rakeshmallem4418]

Hi Eric, could you tell me to set up an existing vuejs project and run it. Thanks in advance!

[@heyyy4987]

Happy new year erik. .I hope more complete series using vue and typescript and vuex. Some nice too is vue-nativescrit series. thanks

[@Herclia]

Hello can you say what is you theme in editor ? Look very nice !!!

[@hasiburrahman9392]

Hey Erik, I love your video

[@huckfaters]

Hey Erik! Are you using vscode's vim plugin?

[@scr4932]

Apparently they've addressed the issue with the non-class method being unable to determine the type of "this". I've just tried it myself and it worked - setting this.test to a number results in a compilation error both in the IDE and when building. I'd still go with the class-based format, though.

[@PureAlbania]

Wasn't the Vue Class Component dropped in favor of Composition API?

[@kalebercanbrack8857]

The current RFC for the Composition API doesn't mention dropping any support for the Class API, but it seems that the two butt heads with each other.

[@ProgramWithErik]

Yes, but you can still use the Vue class component API, just as a seperate library. They were thinking of making it the default, but the composition API won out.

[@DelPieroJoga10]

​@@ProgramWithErik can I use composition API on vue 2?

[@goodbrainwork]

anyone know what the name of this color theme is?

[@alexcubed4270]

Thank you this was very helpful :D

[@ck.hannel]

If it can't catch the type when using "this", I think it's done.

[@Spinnerpor]

fact

[@viraj_singh]

@@Spinnerpor also ts support inside template is very less.

[@другМаша]

thank you so much

[@MasharipovSaidbek]

Super, Amazing!

[@Yakimych51]

Great video! I've noticed you still get a runtime error when you make a typo at kzbin.info/www/bejne/eYKkgp5-qtqfirc (preventing which is one of the big selling points of TypeScript). Is there any way to avoid this? Also, do you know if TypeScript support is going to improve in Vue 3 (that is actually written in TypeScript itself)?

[@ProgramWithErik]

I believe with Vue 3, and the composition API it will work a bit bettter.

[@miklosnemeth8566]

Excellent point Kyrylo, a modern programming environment should detect a type at 11:52. Since Vue doesn't support TypeScrip in the template part, I wouldn't call Vue ready for TypeScript at all.

[@aleksandrippatev1268]

Thanks!

[@foniko123]

Can you share the css you used for Synthwave 84 ?? :)

[@ProgramWithErik]

It's default

[@mel-182]

does vuetify support vue ts?

[@mel-182]

I just saw its supported. :D can you make a video implementing Vue TS to Vuetify or Quasar. :D

[@ProgramWithErik]

Good idea! I'll add it to the list

[@mel-182]

@@ProgramWithErik Great! Thanks! :D

[@kevyyar]

What keyboard do you use? It sounds awesome

[@ProgramWithErik]

Ha! It's very clicky. it's a corsair

[@skewty]

clicky usually means cherry blue switches. You should look for keyboards with these switches if you like clicky keyboards. :)

[@kevyyar]

@@ProgramWithErik very vague answer but ok. i apologize for asking lol

[@Pretence404]

not getting "vue-property-decorator" in package.json,,, please help

[@etymology_]

Can you do a video on how to use a js library/ npm package in a vue component

[@ProgramWithErik]

What sort of library did you have in mind? There really isn't much to it, you just import it in the component and use it.

[@etymology_]

@@ProgramWithErik I have been trying to use hover-effect, cant get it to work, it uses gsap & three.js, when you npm install it, they are included with the package, but hover-effect & pixie.js are more complex libraries than for example using moment....

[@etymology_]

@@ProgramWithErik Can I pay you like 30 bucks to show me how to do this in vue...paypal or cashapp.?.I cant find anything on stack overflow.

[@RianY2K]

Thanks for tutorial :) . And what vs code theme that you're using ?

[@ProgramWithErik]

Thanks Synthwave 84!

[@adamtak3128]

@@ProgramWithErik Looks way cooler on youtube than it does in vscode =/ It's not as dark as I had hoped. I'm using one called Moxer that's pretty dope.

[@tajeddinealaoui445]

Hi, can you please make a video about nuxt + nodemailer, i really need to make a contact form with nuxt.

[@ProgramWithErik]

I'll add it to the list!

[@existentialchild698]

what's the name of the theme you're using in Atom?

[@ProgramWithErik]

VSCode Synthwave 84

[@existentialchild698]

@@ProgramWithErik thanks!

[@vinceramces]

Intellisense is good all in all. But vue with typescript configuration is one of a hell setup. Even using on Nuxt or Vuex configuration just to make the intellisense work

[@ProgramWithErik]

On Nuxt it's harder for sure!

[@bastilavarias7885]

Yeah sure.

[@petecapecod]

Thanks Erik great video!! Even React was all classed based up until version 16.8, so it's pretty familiar coming from there too 😎👏

[@ProgramWithErik]

You are welcome!

[@lostlost60]

Thanks for tutorial :-)

[@PhoenixRisingLoL]

Commenting for the algorithm :D

[@Shinwe]

OMG for one second though that I was watching linus's tech channel.

[@MattDuarte11]

I use it with the class syntax. It’s better. I think the whole data and methods object is unnecessary code

[@ProgramWithErik]

Nice!

[@sahandsepidar4089]

awesome

[@aseemlalfakawma5084]

Great video, but my OCD is killing me with the way you are declaring and assigning those class properties. lol

[@GlitchClaw]

Just use angular

[@GlitchClaw]

With webstorm

[@mclotos]

Hell from TS (Freudian slip =) )

[@anzefajfar3072]

Steve Buscemi

[@classicguy7813]

Please next time start from sky not from decorators which is really really easy

[@valeriikuzivanov6832]

No god please no :)