How to create a Web Component in Vue

hello friends and welcome to a shot of code today we're going to be looking at creating a web component in one of the popular frameworks but in fact I'd like to have a little series here of three episodes or more whereby we try and create a web component using one of you react angular and maybe some others today I'm gonna try with you and we'll see how easy or how hard it is to add to put one together so got Visual Studio code open here let's jump in and have a look okay so the first thing we're gonna do here is get view installed so let's do an NPM and again in it like so and then let's do an NPM install of view come in pretty quick okay right now with that installed we'll come into the vs code and you're going to make a single file component that's literally just going to put up some text and a property for us so let's create a new file in here and we'll call it my component we'll put a hyphen and name because web components need to have that - there so if we create a template here then and a div and then let's just put a header in and say this is a web component created in view all right and then underneath we'll say have just another div and we can say let's just say my name is here just sort of can show the use of attributes within a component alright so that should be it so there and if we just have a script now and we declare our props in view we can declare our name property here and we can say it's a type string and we'll give it a default value and we'll just say mark in there okay so that should be good for our component now we'll test this as a standalone view component just to start with so I should just be able to do you serve here and get this coming up I think you serve my component of view okay so on 8080 okay just push this over here alright so we can see our text coming up and then it's also displaying property with its default value okay now to use this as a web component we need to build it using the view CLI so if you haven't got the few CLI installed you need to an NPM install global and then just view CLI I've already got it on there but that gives us the command I just used for you so it also gives us view so he's a little bigger also gives us view build and we can say we're gonna target a web component and we want my component to be what we're building and maximize it so you can see it okay so if I kick that off and it's gonna say it's building that and just bring this up here and you'll notice it created a dist folder here for us and in there we've got our component wrapped with a view wrapper that turns it into a web component so it will able do a few things for us it will place our content into the shadow Dom it will create the correct events for us provide synchronization between our attributes and properties and it will give us sky style scoping now I'll try and show that in this demo as well okay so illness let's just um let's try and use that now in another application so normally you would probably publish this to NPM once you've created a component you publish it to NPM and people will consume it from there I'm not going to put it out to empty on today but I'm just go to an NPM link actually first I'm just going to change the package of JSON just so that we point to our components so it's dist my component J yes and it will do an NPM link and that should allow us now to just pull this in without pushing the up to NPM itself all right so let's come back into here we'll go and create a new directory now called using view web components which have also you've already done before and so let's try using vwc using CWC okay all right so in here let's do an MP edits as well and then we we're still gonna need to have view but not gonna install is such I'm just gonna pull in from the CDN so our our component still uses view internally so we will still need to include you and it doesn't embed it in the bundle because you might be using multiple versions the amalgam multiple review web components you see don't know duplicate it in there so if I've come to the wrong one let's go using WC open up code there okay so now we've got a blank one right but let's pull that in so if we do NPM or link and view WC that should give us access to the component you see it created node modules here and it's a shortcut denoted by that there back to our component so we're going to try and pull in this file here our my component J s okay so I'm gonna bring it there I creates an index dot HTML here and just put some boilerplate code on okay so we'll have a script and the first thing we'll do is pull in the view itself and we'll get that from an package.com and view so you can install this with NPM or we can just use the CDN here for this this this example and then we'll pull it in our component which is in node modules view WC it's in the dist folder and we use the minified one and then we should just be able to use my component down here like so I'll just put a little header above it hello okay alright so let's give that alright if I do that open live server on that okay so there's our text jamar that we typed in here in that h5 just gonna make that a bit bigger just so we can see things okay and then here is the web component that we saw earlier so this maximized that's open on dev tools a minute so if we click on this now and we look into the elements we can see my component has got a shadow root so it's let's turn it into a web component for us and then in there we'll see our actual component right so what else can we do just a check that it's working as we'd expect a web component - and one thing we can do that in is let's set some style on it so it's using a div in here for the name section you know if I set up a style here and I said right I'm just gonna set for all divs today I'm gonna set a border pixel black and hopefully this is gonna show the encapsulation for us because if you did that style anywhere else in an app in a web app it's gonna affect everything so if I rebuild that just bring this up just so you can see okay so we give that a rebuild with this new style incorporated and then if I come back to my page here and just refresh we can see we've got a border around the divs of our component but we haven't got anything around this one and we shouldn't because that's a header so let me put a div in here so we're back in our web pages using our component now and if I say this should not not a border and I say that off we flip back we can see there's no border and there so the the div style is only affecting our web component and this is one of the great things about web components is that style encapsulation so the view wrapper is is doing its job correctly there and then so just one more thing just to I'm sure that it's working correctly I'll go into our component and let's let's specify the name is actually now James and hopefully that should then get synced to our property on the component and I should now come up in here so it's about this because it's got a live refresh it's already got my name is James on there and so those are things we can do to show that it's a operate as a weapon department but I think that's you know that's pretty good and that was incredibly easy as well if I come back in here now and let's have a little check as well in Explorer if we look at this and look at these sizes the minified one is 8k so you know pretty good you know it'll probably only get smaller and if we look actually what it would be gzipped I come into here we looked at what it would be we you know once it's gzip this component will be down to 3.2 we've still got view on top of that but we'd only have one view for for all of those components so there you go that's how to create a web component in view and the same took a few of these I'm going to try and do a react one and an angular one and it maybe some others as well see how easy harder is in those as well thanks very much for watching if you want to see those and want an alert then click on that subscribe button and give us a thumbs up thumbs down and I'll see you next time thanks bye [Music] you you

Channel: A shot of code

Views: 7,578

Keywords: tutorial, javascript, vue, web components, shadow dom, properties, custom elements, vue cli, vue-cli, vue target wc, component, custom element

Id: w2Woat-LxCM

Length: 14min 0sec (840 seconds)

Published: Tue Dec 04 2018