JSFoo: VueDay 2019

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

Creating a highly reusable VueJS Component library and publishing on NPM using @vue/cli 3.0

Submitted by Divyam Rastogi (@divyam) on May 3, 2019

Section: Tutorial Technical level: Intermediate Status: Confirmed & Scheduled


This talk is going to be about creating highly reusable components using Vue.js, the good practices one must keep in mind when creating a component library and some design patterns we could use.
The audience will learn how to create their own libraries of extensible components and how easy it is to publish it on NPM to encourage reusability of code.


  1. Things to keep in mind while creating components.
  2. The different options available in Vue CLI 3 on creating a component library.
  3. Use cases of different design patterns.
  4. Publishing on NPM.
  5. Example usage of library component that we created.

This is an old article that might expand upon the content. I will be coming up with more content after reading the new features that have been added in the documentation.


Laptop with Node and NPM installed, internet.

Speaker bio

I am Divyam Rastogi, a Frontend Developer at Flock. I have about six years of experience in Frontend development, and I’ve worked upon a variety of JS frameworks like Backbone, AngularJS, Angular, React and Vue. I’m a Vue fanboy and don’t shy away from admitting it.

Profile: https://javascriptbit.com/profile/





  • Abhishek Balaji (@booleanbalaji) a year ago

    Hi Divyam,

    Thank you for submitting a proposal. We need to see detailed slides and a preview video to evaluate your proposal. Your slides must cover the following:

    • Problem statement/context, which the audience can relate to and understand. The problem statement has to be a problem (based on this context) that can be generalized for all.
    • What were the tools/frameworks available in the market to solve this problem? How did you evaluate these, and what metrics did you use for the evaluation? Why did you pick the option that you did?
    • Explain how the situation was before the solution you picked/built and how it changed after implementing the solution you picked and built? Show before-after scenario comparisons & metrics.
    • What compromises/trade-offs did you have to make in this process?
    • What is the one takeaway that you want participants to go back with at the end of this talk? What is it that participants should learn/be cautious about when solving similar problems?

    We need your updated slides and preview video by 27 May to evaluate your proposal. If we do not receive an update, we’d be moving your proposal for evaluation under a future event.

  • Chirag Jain (@chiragj) 11 months ago

    Hi Divyam,

    This would be a great talk for the audience we are expecting to show up at the event.
    We would need to see the slides to finalize the proposal, you can attach a rough draft so we can get started.

    Some suggestions on the slides:
    - Talk about the pain point this initiative solved
    - One important thing I would like you to mention is, in which situation it doesn’t make sense to do this and what’s the alternative.
    - We want to see some code but we’re mostly interested in the tradeoffs and tools (lerna / yarn etc) involved.
    - Try to avoid stating abvious things that the attendees can read from the docs.
    - Do mention common pitfalls to look out for
    - Also talk a bit about the maintainance story (versioning, impact etc.)

Login to leave a comment