DEV Community

Enjoy the Vue

Episode 73: New in Vue 3.2: Custom Elements with Mark Noonan

Be sure to fill out our listener survey here!

In today’s episode, we discuss the pending update Vue 3.2 with special guest panelist Mark Noonan, a web developer from Tipperary, Ireland who now lives in Atlanta, Georgia, and currently works at NexTraq as a front-end developer. We kick off the conversation by discussing RSS feeds and how to keep abreast of your favorite websites, interesting news, and Vue developments. Our panel discusses the custom element function and why they’re excited for it to be included in the latest Vue update. Tuning in you’ll hear our definition of shadow DOM and why it’s so useful for developers. The script setup tag will also be losing its experimental status in Vue 3.2 making it an official part of Vue, giving you much more freedom in Vue single-file components. Later, our panel discusses some of the disadvantages to making a custom element, instead of using a Vue component. They also ruminate on the role of portals and how they benefit the user. We round off the episode with our usual panel picks which range from tasty pretzel and cream cheese snacks to nostalgic video games to joining a supportive online community. For all this and much more, tune in today! 

Key Points From This Episode:

  • Introducing today’s guest panelist Mark Noonan.
  • Ways to use RSS to check on your favorite websites, news, and Vue developments.
  • The upcoming version of Vue 3.2 and the developments for its changelog.
  • Using the define custom element function in the upcoming version of Vue.
  • The upcoming benefit of being able to write in Vue.js and being able to transfer it to the web framework of your choice, like React or Svelte.
  • The concept of Shadow DOM and why it’s so useful for developers.
  • The script setup tag will lose its experimental status in Vue 3.2.
  • Why now is a good time to start experimenting in Vue 3.
  • Some of the reasons for using Vue-demi over something like migration build.
  • Some of the disadvantages to making a custom element, instead of using a Vue component.
  • How portals work and how they benefit the user.
  • Why it’s useful to keep abreast of recent upgrades.
  • Hear our panel picks for the week, including tasty pretzel snacks, nostalgic games, and more. 

Tweetables:

“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.” — @halftes6 [0:02:12]

“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.” — @fimion [0:07:40]

“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.” — @fimion [0:12:33]

“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.” — @marktnoonan [0:12:45]

“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.” — @fimion [0:14:45]

“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.” — @fimion [0:21:08]

Links Mentioned in Today’s Episode:

Special Guest: Mark Noonan.

Episode source