JSFoo: VueDay 2019

A day spent discussing Vue.js, developments in the Vue ecosystem and component architecture

Using Web components in Vue

Submitted by Karan Verma (@karanisverma) on May 9, 2019

Section: Full talk (40 mins) Technical level: Intermediate Status: Confirmed & Scheduled


In this talk, my goal is to demonstrate how web components can add value to a complex web application. We’ll discuss use cases where Web components can be a better choice over Vue component. We will also explore how we can convert existing Vue components to web components.


  1. Introduction for webcomponents.
  2. How can vue+webcomponents can work together.
  3. Usage and usecases of webcomponents in vue web app.
  4. Demo
  5. How to port existing vue components to web components.

Speaker bio

Karan is a Frontend Engineer. He is very excited about the future of the Web and JavaScript.




Preview video



  • Abhishek Balaji (@booleanbalaji) a year ago (edited a year ago)

    Hi Karan,

    We need your slides and preview video to evaluate your proposal. I see you’ve added the slides from a previous conference. Your slides currently are missing the information below, please add the following to the slide deck along with the preview video by editing it, on or before 21 May.

    Your slides need to cover the following:

    • Clear problem statement, about a challenge that is generally applicable and not a company specific problem.
    • Approach to solving the problem.
    • Deep dive.
    • One clear takeaway.
  • Chirag Jain (@chiragj) a year ago

    Hey Karan,

    Thanks for the proposal. This looks interesting. We could consider it if you can go a bit more in-depth like talking about challenges of inter-op between Vue and web components, style management and more.
    From you current slides and video it doesn’t look that Vue focused.

  • Zainab Bawa (@zainabbawa) Crew a year ago

    Hello Karan,

    As Chirag mentioned, Vue focus, based on your slides and the problem statement, is very low. We will need more details about the inter-op between web components and Vue to justify this proposal for VueDay.

    Send your revised slides by 5 August so that we can close the decision on your proposal.

  • Karan Verma (@karanisverma) Proposer a year ago

    Hi Chirag, Zainab
    I have updated the slides as per the feedback. Please have a look and let me know if there is anything else I can do.

    • Zainab Bawa (@zainabbawa) Crew a year ago

      Checking. Will get back with an update by tomorrow.

  • Chirag Jain (@chiragj) a year ago

    Hey Karan great work on simplifying the slides. The talk definitely seem more tight and coherent now.
    My suggestion is you can make it better by:
    - Adding pitfalls of web-components (talk about style management and other challenges)
    - Talk about best practices for improving the dev workflow. Example: Build and Deplyment pipeline, package management, maintainance and upgrade etc.
    - If you could showcase performance numbers and talk about browser support (especially for mobile) that would be great.

    • Karan Verma (@karanisverma) Proposer a year ago

      Hi Chirag,
      Thanks for the feedback, I will incorporate performance,caveats and best practices aspect to this talk. I would be able to do that over this weekend.

  • Abhishek Balaji (@booleanbalaji) 11 months ago

    Hi Karan,

    Thank you for going through the rehearsal process. Here’s the feedback from the call:

    • Time taken: ~20 mins
    • The presentation and slides are well structured, and the story is good, but the slides need some work in adding the sub topics and points you’d be discussing. Adding only titles is very distracting
    • The flow jumped from web components to shadow DOM, without much introduction to ShadowDOM. This needs to be added for more clarity through a graphical representation
    • Add more context when showing code in the demo. It’s not clear which part of the code shown should the audience focus on
    • Whenever explaining new concepts, show examples or graphical representations to solidify the point.
    • The problem statement is not very clear, and needs to be explained more.
    • Someone who has not used web components would feel lost in the presentaiton. Explain the code for web components better.
    • When coming to the modified search part, start off by explaining what the component does and what it is you’re using it for
    • Expected some performance metrics from a production app. Talk more about the build process as this would be useful for someone looking to use their Vue knowledge to build web components
    • Show performance metrics on what would happen if someone is converting each vue component to a web component. Useful for larger teams, dealing with heavy lifting apps

    Karan, based on the feedback above, do share your revised slides by 26 August, latest. We will review the updated slides and share more feedback if needed.

  • Karan Verma (@karanisverma) Proposer 11 months ago

    Hi Abhishek,

    I have incorporated the feedback changes on my slides, Since I have not used web components on production environment I coundn’t add performace metrics. Looking forward for your feedback on updated slides.

Login to leave a comment