Coding Shorts: Vue 3.2 - Create Your Own Web Components

welcome back to coding shorts my name is sean wildermuth in these videos i attempt to teach some small bit of programming specifically usually web programming or c-sharp programming or net i want them to be short and concise nothing as long as a course or even a talk of the user group want to be able to teach you something in your spare time if this is your first time or you've been a long time watcher without subscribing please go ahead and hit the subscribe button and click the bell for alerts it really really does help we've gone from just a couple of hundred followers to over 2000 now so i'm really excited but the more the merrier in this week's episode i'm going to be talking about view 3.2 new feature of creating custom elements this feature is going to allow you to package up a view component to be used directly on a website where you just have to include the javascript package and just use the custom element and i can imagine some great use cases here we might want to create a reusable component that you use inside your crm or you want to package them up for end users to use without having to know or understand or know how to build view it's another tool in the tool chest for us to build reusable pieces for other web developers let me show you how it works [Music] hi i want to show you a new feature of u32 called custom elements let's take a look so i have this beginning project and it's a simple app that has sort of a chat window just a simple ui that allows someone to type a message in and it shows up in this messages pretty simple a couple pieces of state the new message we're looking at and the message list and then a couple of functions here to add the new message and clear the value as well as to just check to see if they hit enter and if so add the message not rocket science a pretty simple component and like any simple view project i'm just creating that chat window and then mounting it as an app and in the browser it's pretty simple so if i say hello goodbye just shows it and would work and it should grow as we go right nothing really amazing about this but you can see it's sort of the start of something simple back in the code here i want to change this i want to use custom elements instead so let's erase this whole main and instead let's go ahead and erase the create app piece and i'm going to actually rename this to chat because what i want to do is i want to create an element by calling a view 3 2 feature called define custom element and this is going to take our chat object and return this custom element and let's see if we can just pull it out of view again this is a view function and once we have that custom element a wrapper around our component for something we can attach to the browser we then have to go to the dom and look at custom elements and we need to define it we're going to give it a name and i'm going to call it chat window now this dash in the middle is important and it's important because all custom elements have to have a dash in them and i think that's a security measure to make it clear that you don't have an element that is overriding a default element the password input or something like that and then here we're going to pass in our element so we're telling the dom hey if you see an object like this use our wrapped element to actually run it so over in our html page we're going to leave this this is still going to load vite will actually still work with it fine but instead of having a app div i'm gonna do chat window right this is the name we gave it over here in main chat window if we now go over we can see that it worked this is a functional web component i can say hello good bye and so we can use these on our page but you might notice it looks a little weird we look at the component again you'll note that we have this style section and because components can't just reference or build these css you have to have a way of taking these styles that are inside the component this isn't necessary if you don't want styles inside the component if you just wanted them globally or something and we need to stringify them so that they're emitted and the short way to do that is actually just call your file.ce instead this means a custom element and let's make sure the main change the name it did and with that change we can see our styling came back and so that was just a little change to allow us to do that still works right the same way now you might think why not just leave your spa as a mounted element well that does make a lot of sense but what we're really talking about is having the ability to have an element maybe package this up as just a symbol javascript which i'm not going to get to show you in this coding short but does work where someone could just bring in the javascript and then support these without having to think or know that their view at all so let's take this and i'm going to create a couple of copies of it to show that each instance of this is going to work on its own here we can see our first and our second and if we say hello goodbye i don't know why i keep wanting to type goodbye when i evidently cannot type it and bar box right they're working independently they're just their own instances of it but in fact they aren't really there's a single view runtime that's running both of them which means that they could communicate between them so how would we make that happen let's come over to our chat window and let's create a new let's say store.js now i'm not going to create a view x or anything i'm just going to create a really really simple store so export default object and i'm saying default objects so that we get the same instance right if this were a factory we wouldn't get the same instance and you can sort of control that but this is a shared instance anyone that imports this will get the same object back and so i'll call this messages i'll do what we did before which is put a reactive wrapper around an array and we'll need to bring in reactive so though that's our complicated store but over in our component let's take this messages and let's not use it at all instead we're going to import our store from store we're getting a bunch of weirdness here not sure why but you gotta love the way this works so in this case message just doesn't exist but store.message is super does and in that same way our messages object here could just be stored up messages right in this case we're talking about using a shared object and in an individual view instance this would be easy right you would have a shared instance you could share it between different components that's great but this extends to the way that this works let's come back over here we now have two and when i say foo here you notice because these are both using that shared instance we're getting the same object so whether we add it in one or we add it in another they can actually get these shared pieces of data because they're only using a single instance of you across them there are some ways that you can defeat that if that's what you want but this does allow you to have smaller components that might actually want to work together and i like this because the simplicity of using you know this idea of a chat window means that i could create something that might be useful in a cms and then have as people type just say go ahead and create this element here and you'll get that thing you want and then that same idea we come over to our view here i'm just going to change this to be let's just say color so we'll go ahead and bind to style equals color on color if it looks that okay and we can see nothing's really changed here we have the same but if we go over to index let's add that attribute here let's say purple and here we'll say color equals let's say just gray right here we can see we're getting that purple and gray assigning there and even the text in there obviously this isn't going to necessarily going to affect both but in this way we can pass arguments back and though i'm not going to do it in this demo we could do the same thing with events as well these are still first class html objects but also view components and they're both really mapped to each other in a really pretty terrific way a lot more you can see and read about this i hope this has given you a taste of using web components and exactly how they look at the bottom screen i'll put a little link to an awful awful version of this called a make it blink it's a component that brings back the blink tag in a really awful way but there you'll be able to see the entire thing including a build process of how to get a javascript file that you can just include on any page without needing to think about view itself my name is sean wildermuth thanks for joining me in this weird little world of custom elements in view see you next time in coding shorts and remember liking and subscribing really helps thanks again [Music] [Music] you

Channel: swildermuth

Views: 750

Keywords: JavaScript, Vue.js, Petite-Vue, Web Development, HTML, CSS

Id: 1w24B1f1Rmo

Length: 10min 40sec (640 seconds)

Published: Mon Oct 11 2021