New in Vue 3.2: Custom Elements with Mark Noonan

[INTRODUCTION]

[00:00:00] AR: This episode is super-powered by you, our loyal listeners.

[00:00:07] T: Hi, listeners. Are you enjoying the show? Tell us more. Visit the link in the show notes to fill out a listener survey and let us know what you enjoy, what you want to hear more about and who you want us to bring on the show. Thanks, and continue to Enjoy the Vue.

[EPISODE]

[00:00:38] AR: Hey, everybody. Welcome to Enjoy the Vue. I'm Alex. Today on our panel, we have Tessa.

[00:00:44] T: Hiyah.

[00:00:45] AR: And special guest panelist, Mark Noonan.

[00:00:49] MN: Hey, everybody.

[00:00:50] AR: Mark, would you like to introduce yourself briefly?

[00:00:53] MN: Sure. I am a front-end developer and based in Atlanta. I work at a company called NexTraq and writing Vue there. I used to work with Alex for a while.

[00:01:03] AR: Yes. Roundtable question for everybody today is, who here uses RSS to check on their favorite websites and interesting news?

[00:01:15] T: Nerd.

[00:01:17] AR: Just a little bit. Tessa?

[00:01:19] T: Not me, obviously. I'm cool.

[00:01:22] AR: How about you, Mark?

[00:01:23] MN: I do not use an RSS list these days. I remember using them in the past, but not anymore.

[00:01:31] AR: Yeah. I was very upset and distraught when Google Reader died. I've got a different feed reader, and I keep up with them. One of the ones that I keep up with is the Vue changelog.

[00:01:44] T: Wait. Before we continue, would you say that it could also be called a feed catcher?

[00:01:51] AR: It could be called a feed catcher, I suppose. That is a very good term for it. I'm going to start using that.

[00:01:57] T: What have I done?

[00:01:58] AR: In my feed catcher, one of the things that I keep track of is releases of Vue.js. Recently, I've been seeing some notices about the upcoming version of Vue 3.2. The changelog for this version seems extremely interesting.

[00:02:16] T: I misspoke. I thought I didn't have an RSS feed. It turns out, I do get those updates about 3.2 on a regular basis. The feed that I use is Evan’s Twitter. Thanks for coming to my TED Talk.

[00:02:31] AR: Yes. That's also a very reliable and useful way of being able to find out about upcoming versions of Vue. One of the things that I noticed in this upcoming version of Vue, however, that I find fascinating is, there is now a define a custom element function. Do either of you use custom elements in any of your work, or play?

[00:02:55] MN: I do not, but I'm excited about them. I'm glad that they exist. I keep wanting to learn more about them. One of the objections of seeing sometimes is that you don't have all the tooling and stuff that surrounds a framework that helps you make stuff easily, so your custom elements are out there loose, and not part of the modern development flow of a lot of single-page apps and stuff like that. I'm interested in them. It's nice that they're included in this change in Vue.

[00:03:27] T: I'm a little bit upset at the way you said work and play. I can't put my finger on what about it is off-putting. That aside, I have used customized elements, like an element, IO element, or an element that I've added CSS on. You were talking about making my own native HTML elements, right? Or DOM elements?

[00:03:50] AR: Yeah. In a recent version of the ECMAScript specification, they've introduced a way to be able to add custom elements to HTML, so you can define your own HTML elements that can be used anywhere in your application. You don't have to instantiate any framework, or have a create app call of any sort. All you have to do is use the element in your HTML. This function allows you to create elements using Vue and have all of the nice reactivity and ways of handling data that you're used to in Vue, but you're able to use them as custom elements in any HTML. That's really nice. I think that it's going to make creating things in Vue a lot more interesting going forward, for sure.

[00:04:50] T: I would say that the closest I've come to that is when Vue 2 released the ability to output components as web components. I tried that out for a component library spike, but that's probably the closest I’ve gotten to using custom elements with Vue. I’m definitely curious to hear more about using the Vue methods to be able to fall in love with custom web components.

[00:05:14] MN: It seems really useful for cases, especially some codebases I used to work in, where we would only really want one part of the page to be a tiny Vue app to handle some complicated form state or something. It seems, like, it's a good way to package up the functionality of something that is custom, but does not belong in a full single-page app. Yeah, curious about using it to make things that can be consumed by bigger non-Vue projects.

[00:05:43] AR: I think, also, a nice benefit of this is that since you'd be able to write things in Vue.js and use them anywhere, this also opens up the ability to use them in React, to be able to use them in Svelte, to be able to use them in any other web framework that you'd want to. Anywhere that you can use a custom element, you would be able to use it, even though it's written with Vue backing it.

[00:06:12] T: Yes. I'm not sure that the reason that people use frameworks other than Vue, or libraries other than Vue is solely for the purpose of being able to use Vue components inside those other frameworks and libraries. Alex, have you faced any headaches at work that you feel this new feature could help mitigate?

[00:06:33] AR: Currently, I'm updating some stuff at work. We're doing some documentation, and we're integrating on a site that is separate from our codebase. We don't control everything. We're going to put this documentation and this information into that site. One of the things that I'm running into is being able to override styles and control the content in a way that I want to be able to control it. Using a custom element on the page would actually be extremely beneficial as with custom elements. They use Shadow DOM in order to control the scope of things. This would allow us to have a independently scoped application running on the page that outside styles won't affect.

[00:07:26] MN: Now, let's imagine that there's somebody on this panel who remembers learning about Shadow DOM, but quite a while ago, and basically, completely forgot most of what it means. You had to explain to that person, what is a Shadow DOM and how is it useful for that?

[00:07:45] AR: Shadow DOM is a concept that's been introduced, that allows you to have your own private document object model that you can manipulate. This has actually been in use by browsers for years, but now they've exposed it to JavaScript developers to be able to use it themselves. For instance, imagine a file input. If you have an input of type file, you can add a file to a form that you want to upload.

However, inside of that input, there is a button, there's some text, there's some information. All of that is Shadow DOM that's implemented by the browser. You may not be able to access it directly, but it is definitely there. Similarly, now you can make your own components that allow you to say, “Hey, I have a button and it's going to look like this. Don't allow anything to affect it.” Your button will always have an icon. It has slots, similar to how Vue has slots. A lot of the way that Vue is implemented slots is based on the concept of how web components are implemented, how custom elements are implemented.

You can just make whatever you want to that way. It's super handy and helpful. I'm excited, because I think that it's really fun technology. I look forward to seeing how people are going to go about implementing things.

[00:09:29] MN: Cool. That's an awesome explanation.

[00:09:31] AR: Another thing that's actually also coming out in version 3.2 is the script setup tag is going to now not have experimental status. It is now officially part of Vue, that you'll be able to use in your Vue single-file components.

[00:09:52] T: I think, we had an episode explaining what script setup is, if I'm remembering correctly.

[00:09:56] AR: Yeah. I believe that we had Lachlan Miller on to talk about that with us. We had a lovely conversation. We'll be sure to link to that in the show notes below.

[00:10:07] MN: I will have to check that out. One of the things for me with Vue 3 is I work at a place that is maintaining an application that depends on some other stuff, like Vuetify, that is still on Vue 2. When Vue 3 was first coming out, I remember getting really into it for a few weeks and looking at some stuff, even that you were writing, Alex, about how to do certain things in Vue 3 and what the changes would be. Then, it's taken a long time for it to become super relevant at work. Some of that knowledge is atrophied, and might even be out of date, compared to some of these things that are moving out of RFC and becoming official parts of it. Do you think it's a good time to dive back in and experiment again? Do you think a lot of things are still changing with it?

[00:10:56] AR: The Vue 3, the APIs and everything for Vue 3 are very, very stable now. We're on the cusp of having the ecosystem catch up. I know that Nuxt is about to have a big release, where you'll be able to use Vue 3. I know that Vuetify is coming out, hopefully, by quarter three with their version three that will use the new composition API features in Vue 3. I think, now, if you haven't had a chance to play with Vue 3 and start building things in Vue 3, now is an excellent time to go ahead and start doing that.

There are packages out there that can absolutely help you to do that. For instance, there is the Vue composition API package, if you're on Vue 2, that allows you to use many features of the setup functionality of composition API. There is also the package called Vue-demi, that allows you to use the features of Vue 3 in Vue 2. Or if you need to support both Vue 2 and Vue 3, it will pull in the appropriate packages and help make the appropriate builds based on which version of Vue you want to use. It's a very easy way to progressively upgrade your codebase over time, rather than trying to do it all at once. You can progressively add it and then once enough things have Vue 3 support, you just turn it over to Vue 3, and it should all just work.

[00:12:45] MN: That sounds like a pretty good idea. Vuetify incidentally, is one project whose release notes I do read. I get Vuetify release notes and I get Cypress release notes. I'm always excited about both, because I'm looking for the new stuff that we can now start to do. That's also really cool when you see some tiny bug that really nobody cares about, where you're like, “Oh, that one thing in that data table is fixed now, that made us do a work around something so small, I wouldn't even bother reporting it.” It's nice to look over the changelogs and see how big project like that is moving along, and especially how they're communicating the changes and stuff.

[00:13:23] T: Going back to migrating, why would somebody choose to use Vue-demi over something like the migration build?

[00:13:31] AR: Vue-demi allows you to stay in your Vue 2 codebase, where if you're using packages to rely on Vue 2, they will continue to work. It will also go ahead and fold in some of the composition API features of Vue 3. As you write things to use Vue-demi, it will continue to support Vue 2. Once you're ready, you're able to move things over to Vue 3 by changing a couple of dependencies here and there, and your code will continue to work and you can slowly pull a Vue-demi out of it. The migration build is super helpful for stuff.

[00:14:13] T: Wow.

[00:14:15] AR: Yeah.

[00:14:16] T: Wow. Especially, because Vue-demi sounds like its purpose is ephemeral. That makes me want there to be a third.

[00:14:25] MN: Like a Vue-hemi-demi?

[00:14:27] T: More like, how we have Vue mastery, and we have Vue school, and there could be a third school called Vue-demi.

[00:14:34] AR: That’s right.

[00:14:36] T: What do we think would be some negatives, or pitfalls, or functionality that we have to give up in choosing to make a custom element, instead of using a Vue component?

[00:14:49] AR: The primary thing that you cannot do with a custom element that you can do in Vue with a proper Vue component is scoped slots, which is our favorite topic on this podcast.

[00:15:05] T: Love it.

[00:15:07] AR: Being able to pass information into a slot is not supported by web components. That is a straight up loss that you will not have by utilizing Vue as a web component.

[00:15:25] T: That's interesting. Because I remember hearing a couple years ago that the HTML spec was considering adopting something similar to slots, like maybe a portal application. That's why Vue 3 went with the name Teleport, which is a slot, right? To preemptively avoid conflicting with native portals. Alex is shaking his head very vigorously.

[00:15:52] AR: The portal element was suggested by Chrome. I believe that it has an experimental version of it behind some flags. Portal as an HTML element is different from teleport and Vue Portal in Vue components. The portal element in HTML is designed more like an interactive iframe link.

[00:16:22] T: I was going to say, maybe we're getting spicy here, but why do we need portals only have iframes?

[00:16:28] AR: Yes. The idea behind portals is that you would want to be able to have a preview of the site that you're going to. When you click on it, it just magically transitions to that page. It could also alleviate and help with certain page transitions, allowing you to do sideswipes, or growing from small to big, or various other things. You could probably make it a star shape even, and do one of those fantastic fades between scenes, just like in a really bad movie.

[00:17:03] T: We love a good star wipe. Everyone is nodding vigorously.

[00:17:08] MN: Yeah, it's probably the greatest wipe that I'm aware of.

[00:17:12] AR: Yes. The way that that portal element works is slightly different than Teleport and portal Vue, in that you want to be able to put something in a different place on the page. This is, you want to show a page within a page, but also be able to go to that page when you click on it.

[00:17:34] T: I'm sure that we will not have a, “Yo, dawg. I heard you like pages and your page name, coming up, Alex.”

[00:17:42] AR: I'm positive.

[00:17:43] MN: That sounded pretty cool, the way you said it.

[00:17:45] T: Yeah. The way you describe it, these new potential portals that sounds very extra.

[00:17:52] AR: There are a few accessibility concerns with it, but we won't go into those right now. It sounds like, there's a couple of extra types that they're adding in for TypeScript users, that allows you to have better type hinting and type support, regarding emitters and props for all of your components. This will make it better when defining props and when trying to do very TypeScripty things.

[00:18:26] T: Are you talking about how they want to create a public props type, so you can test the props that a component has in Vue test utils, and how they're also adding a component props and component listeners type to allow you to extract the props and event handlers that a component has?

[00:18:47] AR: Yeah. That is exactly what I am talking about.

[00:18:50] T: Wow. It's like, I'm psychic or something.

[00:18:53] AR: It is like you’re psychic or something.

[00:18:56] T: Yeah. I don't use TypeScript right now. I don't really have much more to say on this subject, besides magically plucking those features out of your head.

[00:19:05] AR: I'm sure that it will help enable better IDE type hinting. As you're typing your Vue components up, you will get more help from your editor, assuming that it has any form of TypeScript support.

[00:19:22] MN: Those are things that help people, whether they're actually using TypeScript in their project themselves or not. Those hints are still useful. It does seem like TypeScript is continuing to get a little bit more popular, and seen as something to move towards, even if people aren't there yet. That every now and then, having types you've created for yourself and your own project does make it way easier when you come back to something that you haven't looked at for a while, and you're trying to debug in one file and you want to understand what a certain function expects for its arguments, or something like that. Having had someone do the work to put types on things makes that process a lot easier.

[00:20:03] T: “The code is self-documenting.”

[00:20:08] AR: As a caveat, you do still need to write tests. I don't care how many types you put in there. You do need to still write tests.

[00:20:18] T: And documentation, and code comments.

[00:20:22] AR: And documentation.

[00:20:24] T: Put your script tag at the top.

[00:20:26] MN: I would agree with all of that.

[00:20:27] T: Yeah. It looks like, they're also adding support for the Vue TypeScript definition to allow capturing events, which seems like, it could be useful as well. And for emitting events. I guess, there's a lot of work to be done on the TypeScript side of event handling in Vue in general. Why are we doing this? Why are we going through the changelog and the Kanban board? Why do you subject yourself to this every morning, Alex?

[00:20:57] AR: Well, one, I enjoy waking my brain up with a nice hot cup of coffee and some notes about Vue. Also, it's good to stay on top of these things, and at least be aware of various options that you have in the ecosystem. Knowing what's coming up in newer versions is always better for everyone. As maybe finally, that thing that you want fixed has been fixed.

[00:21:34] MN: It's also nice to have a positive reason to upgrade something you depend on. Without reading some of the release notes from things that I typically look at, so Vuetify especially, and often, Cypress, because we do a lot of testing and they're putting out new stuff. Reading those tells me good new things that make me want to upgrade. I end up upgrading in smaller increments for a positive reason, rather than waiting until something breaks, and I don't actually want to upgrade at all, but I have to, because there's some mismatch in versioning, or whatever.

I really like being able to make a ticket and say, upgrade this package and research the new features as something that is a positive that we can include when we're excited about some new thing we want to use. Not something that ends up blocking us from delivering a feature on time, because all of a sudden, we realize we need a new version, and we're not ready for it. Changelogs, even skimming them can make you go, “Okay, I want to do this extra effort today. Not at the last minute.”

[00:22:39] T: Before we continue on, I just want to acknowledge that Alex says, he likes to wake up every morning and Enjoy the Vue. Here's a question. This goes out to all of those Angular.js 1 to 1.X developers out there. If you don't need to changelogs every day, or let's say, it doesn't even matter if you do, because you can't use the latest stuff, does that make you a bad developer?

[00:23:05] AR: Of course not. Everybody who develops can be considered a good developer. I say that – No, I take that back. I've seen some bad developers. Everybody who –

[00:23:18] T: Everyone can develop.

[00:23:20] AR: Everyone can develop. It doesn't matter if you're stuck on an old version, or if you're using the latest and greatest. You don't have to use the latest and greatest and you don't have to keep up with it. The fact that you're listening to this podcast right now means you're trying, and that's enough. It's okay.

[00:23:41] T: Ratatouille, but make it Ratavueille. Everyone can Vue. We've established that you don't have to see what the latest is in Vue news every single day. Are there times that you think it is maybe critical to catch up on some big new item, or big new release, regardless of whether you can immediately use it or not?

[00:24:08] MN: It might be important if you are looking to contribute to some open source projects, or do some work like that, where the version might be different from the main one you use. Possibly, also, if you like to create content and write about things, or do presenting and stuff like that, new features are really good fodder for writing blog posts and making videos, or making presentations. Keeping up with them, if you're trying to get into that is useful, because everybody's learning them. Beginner level posts of, how do I use the composition API, are really interesting, even to experience people in that feature, because it's new.

[00:24:47] T: Yes. I'm also curious if the big, let's call it a to-do, around the announcement of the composition API, when the RSC first dropped, had an impact on the future development of Vue. That may have been missed. People were not reading the changelogs and the RFCs.

[00:25:11] MN: I mean, it's got to be one of the great requests for comments of all time, given the amount of comments received was very, very high. They got comments.

[00:25:21] AR: They requested comments, and they got exactly what they were asking for. Comments.

[00:25:27] MN: I do think it was interesting with that, and with some other proposals like that, where people who are not as familiar with the process, see the framing of a proposed change as a done deal. When in fact, it's the consultation. It's not super, perhaps, helped by calling it an RFC, which if you don't know what that stands for, you don't get where we are in the workflow. Maybe there is a little bit better communication that could happen around things like that, because it did – a lot of people did seem to react like, here is a permanent decision that ruins your life. It's over now.

Whereas, there was considerable room for gauging the reaction and deciding what to do, and figuring out how important it was going to be to maintain single-file components, and keep that as a part of Vue 3 functioning as well as possible. Not saying, you need to rewrite everything to move to Vue 3.

[00:26:29] T: Sounds like, you're making a request for communication.

[00:26:33] MN: There we go.

[00:26:35] T: Yeah, it's interesting. I feel like, there's a bit more of a spotlight on the core team and their contributions now than maybe there was back then. This might be just an apocryphal memory. I feel that impression might have also added to this idea that this change was set in stone and going to happen no matter what, when that wasn't the case. I remember talking to Dan Abramov, shortly before he made the announcement about React Hooks. He had a whole strategy for how they were going to ease into rolling out the change. First, there was going to be a talk and lots of written materials were pre-prepped to inform people about it before they released the RFC. It's interesting, because I didn't really track the response to the hooks announcement, beyond that there was a lot of happy excitement, and some anxious excitement.

[00:27:28] AR: Yeah. Different levels of excitement. The way that they rolled out hooks and the way that they announced it in phases, I think, made that process go a lot smoother than the similar attempt by the Vue.js core team.

[00:27:46] T: Oh, yes. I remember where I was going with this now. I feel like, with the changes to Vue router, and also Vue 3, the team was pretty transparent in their communication about that they were going to develop some ideas in private first, so they had something to give comments and feedback on. Even though they were upfront about it and explaining the reasons why, there was still some pushback that because this is open source, and possibly exacerbated by collecting money as an open source project, a lot of people felt like they had an obligation to do all of that work in public, even if it may not have made sense in the context of the project. Don't do open source, kids. Just kidding.

[00:28:33] MN: You get one month. You can do it for one month a year.

[00:28:36] T: Everybody gets one.

[00:28:37] AR: I think, some of why they did not develop it in the open specifically, was because they needed to be able to experiment and make things and they didn't want people using a pre-alpha version of this code in production before it was ready for anything. Because no JavaScript developer has ever done anything like that in the history of anything, ever.

[00:29:12] T: Yes. People don't use things that aren't recommended, which is why no code bases have an event bus in their Vue application.

[00:29:19] AR: Mark, where can people find you on the Internet?

[00:29:23] MN: People can find me on Twitter. My username is @marktnoonan. Noonan is spelled N-O-O-N-A-N, which is the Irish spelling, not the immediate spelling that comes to some people's minds.

[00:29:35] T: Which is?

[00:29:37] MN: A lot of people spell it N-E-W, like Newnan, which is a town in Georgia where I live. Or at least, I live in Georgia. The town is near me. I've been through there once or twice, and it's great. It's also how everybody around here will choose to spell my name. If you go there, you might find some other Mark Newnan, who could be great too. I haven't checked. This one's me.

[00:30:01] T: I never would guess.

[00:30:02] AR: All right, it's now time to move on to this week's picks. Tessa, would you like to go first?

[00:30:08] T: Yes. Since I am the only other regular panelist on the show, I shall go first. I have one pick today, brought to you by Cassidy Williams, AKA Cassido. She recommended that I try pretzels and cream cheese as a snack. Specifically, she recommended Snyder's of Hanover pretzels, the kind that look like little CSS grids. She usually gets the Philadelphia brand cream cheese, because that's what the store has, but that part is not as important.

Now, I'm not the biggest fan of Snyder's, because at one point, I was in a place where they only had Snyder's chips and Snyder's chips are very greasy. That residual memory also colors my impression of their pretzel line. I do like Trader Joe's pretzels chips, and I buy their pretzel chip and hummus combo a lot. I decided to go with their pretzel chips and their in-house cream cheese brand. My thoughts on it is that it's edible. It's filling, because there's the cream cheese there. Yeah, that is a thing you can eat. I've tried it six times now and Alex keeps laughing, because of my review of the chips. I keep eating them. I don't know if it's because the chips that I bought have a bit of salt on them, so that overpowers the cream cheese. Yeah. That on that. Pretzels and cream cheese.

[00:31:38] AR: Thanks, Tessa. Mark.

[00:31:43] MN: All right, I have two picks. The first is Streets of Rage 4, which came out last year, but I only found out about relatively recently. The Streets of Rage was a game I played a lot on the Mega Drive when I was a kid and I was feeling nostalgic for it. I just mentioned on Twitter like, “Hey, where are the people who likes Streets of Rage? There's got to be a lot of us.” One of my friends was back, he's like, “You know, there's a new one.”

It is really, really perfect as an update that has the spirit of an old console game from the 90s. Sometimes when you go back to those games themselves, there's some gameplay that's a little more clunky or frustrating now. This manages to preserve the spirit, but improve the gameplay, add some new mechanics and bring all the graphics up to this cool hand-drawn style, that still really works with the nostalgia for the old game that a lot of people have. They just released some new downloadable content that's getting amazing reviews.

I'm a Switch person. There were some bugs with the software released to the Switch store. I've been hanging out for about a week not having this. I'm really excited for it to finally become available on the Switch. It adds a rogue-like dungeon part of it. That is one pick.

The other is a virtual coffee community at virtualcoffee.io. That's just been a really supportive place to hang out, especially working remotely. The developers there have all kinds of levels of experience, a lot of new people. Also, a lot of people who've been working for a long time. Just helping each other out, looking at various goals you might have as a developer, or support you might need to make community. They have two meetings a week. Once you go to one of those meetings, you can get access to the Slack community and see special internal talks people do for practice and stuff. I really enjoy Virtual Coffee and recommend people check it out.

[00:33:42] AR: Awesome. My pick this week is Dragon Age Inquisition. It is a video game. I have not played the other games in the Dragon Age series. However, this one, I had in my queue and I started playing it. It is a really great game. I'm having so much fun. It is exactly what I want to be doing in the morning. There's dragons. There's magic. There's stabby-stabby rogues. It's great. I cannot recommend it highly enough. Yeah, go play Dragon Age.

[00:34:22] T: You face in your queue. Does that mean that you cleared out all the other games that were in your queue first before starting Dragon Age?

[00:34:30] AR: No.

[00:34:32] T: I guess, reading the release notes every morning doesn't really make you a better developer. Sorry. I’m just kidding. I feel tempted to ask Mark about his headphones, since he's done it twice now.

[00:34:45] MN: You've brought it up, but I don't know what the question is.

[00:34:50] T: I guess, how do you like your headphones? What are they?

[00:34:53] MN: I like them pretty well. They're comfortable. I forget what they are. They are Audio Technica. Some form of Audio Technica studio monitoring headphones. It looks suspiciously like the ones Alex is wearing.

[00:35:07] T: Yes, but the one that Alex is wearing crushes his head.

[00:35:11] AR: Yeah. My ears get pinched a little bit.

[00:35:13] MN: I guess, I'm made of a sturdier head bone. I'm fine.

[00:35:17] T: Yes. We have weak heads and I have weak fingers. That's why my Audio Technicas are also on the shelf.

[END OF EPISODE]

[00:35:22] AR: That's all for this week's episode. If you aren't following us on Twitter, head on over and find us @enjoythevuecast. Be sure to subscribe to the show and if you have time and you like the show, leave a review.

Finally, remember, the first rule of Vue Club is be sure to tell at least five or six colleagues about Vue Club. Thanks for listening and until next time, Enjoy the Vue.

[END]