A Better Way To Create Vue Components With Props Using TypeScript

I had this interesting problem the other day when using defined props in view3 with the composition API and typescript and I wanted to walk through with you guys on it and show you kind of what I think is a better way to do props using view I went ahead and created a quick sample app to show this problem to you guys essentially it's a Hello World app I have a big button that says hello world world if I look at it I have this thing called The Core button and inside the core button I just have some Tailwind classes and just says hello world so I thought first I would kind of give you a quick refresher on how props work in case you guys have forgotten for one thing you can actually add props onto a button at any time if you do it actually the component will inherit those props and so you don't even need to Define them so in this example let's say I just wanted to change this class name and change one of these backgrounds to something else I can simply just put in class and then put background yellow I don't know 300 and you can see it automatically changes and this is a part of how view inherits the classes and it actually merges them into the existing classes here and this is really nice you don't need to use any Tailwind merged it just automatically works for you if for example let's say you have multiple root elements let's say I added a div div here that says Hi Well then you can see it doesn't work and if you look here you get a big warning that says that extraneous non-rop attributes class for passing component but cannot be automatically inherited because component renders fragments to get past that a real quick trick if you haven't if you don't know this you can do V bind here and do dollar sign adders and then there it go so you can actually bind the attributes directly onto any element if let's say you have multiple root element nodes on there there's also something called use adders if using next here which allows us or view which allows us to grab the attributes from it but let's say we actually wanted to pass in a prop into this button so something probably pretty common in a button is maybe we want to pass in the text for this button so I'm going to add in some d double curly brackets and add in a prop called text and to add this prop in I'm going to use Define props and there's a couple of ways to use these Define props and now we're using the composition API and if you come from the options API this will probably look familiar but I see a lot of people do using defined props this way so you kind of do Define props here and then you make an object and then this object allows you to add in the prop name in this case called text and then you can put in like what type it is let's say it's type string now you can see here that we actually haven't added in these this text prop here and it just doesn't look right so one thing you can do in this Define props is instead of defining it just as the type you can add some more things to it and this is what makes it very interesting in this text prop now I can add in default I can add in required I can add in type and a validator so type I can say hey it's type string I can also have some default text if I wanted to but let's say we want to make this required true if I do required true then I get this big view warning that I didn't pass anything in for this missing attribute text and then my vs code which I'm using the view language services in as an extension will give me an error that I haven't submitted the actual text in here so in that case I can just put text in Hi and then it works as you expect it and one really nice thing about this is if you want to you can actually add in a validator if you look here we have this validator this validator here takes in a value and then you can do something with it so let's say we want to return if val. length is greater than three and then what I do here is I do type string as well so this says okay it's a value if if it's long it has to be greater than length three and if I do this you see right away in my console if I bring this over I'm getting a big error that invalid prop custom valid check failed for prop text and it's a warning so this works okay now you'd actually don't see any errors in vs code if I put in the correct amount of I know length I no longer see the warning vs code still stays the same now the question I was having and some other people have asked is there's a different way to use Define props this works fine but what if you need to if you like typescript and you want to have it be a more typ scripty way of doing it so there is a different way to do Define props and the way you do it is you do Define props and then you define inside here this angle brackets what the types are so in this case I could be like text type string and then if I refresh the page here this is a valid typescript type here this type text it's also required so if I delete it from here you see right away my core button gives me this error that it's not there if I try to make it I don't know a number let's say I put in nine here I also get an error in my vs code that I passed in a number and it requires a string this all works as expected however if we come back over to the core button here there were some really nice things we had in Define props we had this required which we can but we also have this validator and then we have default values as well and I was trying to think and trying to ask someone was asking me about this is like why would I ever use this typescript way of defining props when I when it kind of takes away a few of these things that you can get with Define props using it as an object it's also worth mentioning that if you do have more complicated objects you can do something like this and do type object as prop type and then give it a specific type in side here let's say it's a a text with type string so if you have like more complicated objects you can do something like this but overall I really dislike using this Define props I really like using the kind of what I feel is normal typescript like this now to get around a few of these things a few things that's missing let's talk about it so let's take a look at how you would add in default values into here using this Define props and this type of pattern so there's a couple ways you can do it one is you use something called with defaults and what you do is you just surround your whole Define props of this with defaults and then you can put values with it I'm not a huge fan of this some people really like it but in this case I could put like text and put default value here and this is kind of what it looks like I like I said I don't really like adding this extra boiler plate I think it's a lot what I like better is inside my n config or in my vit config if I'm using a vit app you can actually turn on this experimental feature called props D structure and I've done this in a few videos in Nu's cases you have to kind of drill down from this vit but I actually go to V view script props structure if you're in a a v app it's just view script propy structure once you can turn this to true you can do something like this so first since we're assuming we want a default value this text would not be required just like every other typescript I can make it optional by using the question mark and then I can do const here and then I can grab the text out of it and then I can have it equal whatever I want let's say I want to have it equal High default value here and then once I save it let's go back into this index View and I'm not going to pass this hello in there any longer you see I don't have any errors in this vs code and it says hi default so now I've been able to destructure this out and add in a default value which is which is even better now one thing that so that covers pretty much our types requires are required but what about the validator so if you look at this example here and when I showed you earlier and you can do all sorts of validation on it but all it did was essentially just showed a warning in the console there's no vs code Plug-In or anything to do it so what you could do is you could just take this text here and then just check it if text length is greater than three or I guess it could be less than three then you can just do console. warn warning so let's say we have the same example again and I'm going to go back into my index View and I'll put a text here and I'll just put in high you can see here now I have this warning in the console that there's a problem and it still works obviously it's just a warning you would have to if you're a developer you would have to be checking your console but I think most developers are probably trying to make sure there's no warnings in their console before they go to production I could be wrong in that I was trying to think though this is kind of sloppy I don't really love doing this text. link is there a better way of doing this and that's where I really came across Zod Zod is really built for form validation any type of validations that you want and it has really nice things like this string validation I can Mark a string mark it as the maximum length minimum lengths I can have it check for email URLs U IDs it starts with end with IP so it has a whole bunch of really cool validations that I may actually want to use inside my app and you can get this working with view so let me show you example of that so I went to the Zod website Zod dodev and I followed the inst installation tips and all basically you do is do mpm install Zod and that will install it on your app uh and then I went ahead and copy and pasted this in here just to save a little bit time but what you can do is now I have a props and I still do the Define props I make it optional I guess I can make it required to now I can use that to check against a schema that I'm going to create in Zod in this case I'm creating an object in that object I have a type text it has to be a minimum of three characters long and if it's not it's going to give this warning message and not long enough and then I can use this props schema. parse I pass in that props dotex I could have destructured it here too but let's assume maybe that experimental feature is off and then if there's an error then I send the warning with the error message to the console so let's see what that looks like I'm going to save it if I come back over here you can see I have that not long enough warning in the console and the reason you may this is quite a few more lines of code but I could definitely see taking all the props validations that you want extracting them into their own utility file and then sharing them across multiple components in your app I think this is a lot cleaner way of doing this validation than the way you did it inside this Define props here it's also a lot more powerful has a lot more built-in tools to make it easier so that's definitely what I think I think this is a pretty powerful feature I'm really happy with using Zod what I'd also do if I was using this in production anytime I had any forms I would use Zod for the form validation there too so i' would use it for props and I would use it for form validation now if you got this far in this video you may be thinking like why can't you take this prop schema infer it and then add it directly into this type here so we have right here this Define props can I just pass in this Zod type in here well I tried it and I could not get it working there is a view. TS which allows you to add in more more complex typescript types into your defined props and no matter what I did I couldn't get it working if you got it working leave a a message below a comment let me know how you got it working that would be pretty neat uh either way though I think this this is fine because really this validator just gives warnings in the console and that's all we're doing here and it's it's really powerful so let me know what you think leave a comment below I appreciate it and if you made it all the way to this end of this video thank you so much I have in my description below a place where you can sign up for a mailing list and I also do one-on more oneon-one coaching and mentoring especially if you need help with view react angular I'll be your man thanks

Channel: Program With Erik

Views: 5,869

Keywords: Vue 3 props, Vue 3 turorial, Vue.js, Vue 3 defineProps, defineProps, Zod with defineProps, Web development, Program With Eric, Program With Erik, Erik Hanchett

Id: AovK5jedMHg

Length: 12min 39sec (759 seconds)

Published: Tue Feb 20 2024