A Tale of Two Vues - Tips for Developing VueJS Libraries

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • SonarQube - Static code analysis for 29 languages.
  • Scout APM - Less time debugging, more time building
  • TypeScript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    A few weeks ago, I ran into an interesting problem. At Superbet, we were attempting to extract some VueJS reactive code into a separate utility library, using TypeScript. I thought I knew what was waiting for us, and expected it to be a quick and simple thing. I was gravely mistaken. Vue reactivity broke, and investigating what happened was no easy task. However, it also involved a process of discovery that was interesting enough to write about!

  • webpack

    A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

    Luckily, the fix for that is straightforward enough - we just needed to tell the build tool to exclude those dependencies from the bundle. With Webpack, you can specify the externals field like so:

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

    A few weeks ago, I ran into an interesting problem. At Superbet, we were attempting to extract some VueJS reactive code into a separate utility library, using TypeScript. I thought I knew what was waiting for us, and expected it to be a quick and simple thing. I was gravely mistaken. Vue reactivity broke, and investigating what happened was no easy task. However, it also involved a process of discovery that was interesting enough to write about!

  • React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

    In this article, I'd like to introduce a development process for external libraries that rely on Vue as a peer dependency, warn you about the potential pitfalls, and share how it applies to other JavaScript ecosystems as well (such as ReactJS). I'll take you through the experiences we've had step by step, share the difficulties we've encountered, and help you avoid them.

  • lerna

    :dragon: A tool for managing JavaScript projects with multiple packages.

    That is to say, that would be it, unless you happen to be using peer dependencies and happen to be relying on a single instance of some object to exist in code, as happens to be the case with both VueJS and React. In this case, though the code would work fine if it were built and published, it will not resolve correctly with npm-link. There are a number of ways around it, some based on yarn, others specific to Webpack, or resolved by using Lerna. However, there are two fairly generic ways of handling it, as well.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts