Nanoprogrammed Penultimate Musicianship


    0.1.0 • Public • Published


    An extremely light-weight and flexible library for adding content on top of content; overlay, modal, dialog, lightbox, popup, slidein, etc.


    WARNING! vue-ontop is currently in Alpha - a lot is still needed for it to be usable conveniently in many scenarios.

    Albeit it's a little bit rough and unclear at the moment, I very much accept contributions - as long as they adhere to the vision and principles.


    • Add package.json - and secure vue-ontop as name in npm
    • Do everything required to add vue-ontop to awesome-vue and request it to be added. See for details.
    • Finalize planned features
    • Add more ready-made headers/styles for different tyopes of ontop-content (plain overlay, modal, dialog, lightbox, popup, slidein, etc.)
    • Add demo page using GitHub pages?
    • Add proper build and distribution pipeline (through local build)


    Provide base structure for any type of content dynamically shown on top of page content;

    • Modals
    • Popups
    • Dialogs
    • Toasts
    • Slide-ins
    • Side-panels
    • ...


    • Light-weight, no cruft
    • Simple and sane defaults, easily overriden
    • All styling and effects (transitions) customizable
    • Simple (and simple-to-use) API following common conventions and best practices
    • No/minimal programming in attributes, meaning no templating, no styling in attributes
    • No/minimal amount of dependencies


    • [x] Global default options
    • [x] Container and popovers (instances) decoupled (enables container to be placed in root while each popover can be placed where it belong, to be able to better follow the SRP)
    • [x] Container slots for global frame
    • [x] Everything over-rideable at popover level
    • [x] Esc => Close
    • [x] Click on overlay background => Close
    • [ ] Global and simple yet fully encompassing JS API (methods) for handling; events, methods; open, close, ...
      • [ ] Access to API via scoped slots
      • [ ] Events
    • [x] Transition between popover instances without re-animating close/open
    • [x] Fully SSR compatible
    • [x] Multiple container support (e.g. if having multiple types of popovers in the same app)
    • [ ] Possible to use as single component (popover as slot content directly in container)

    Future ideas

    • [ ] Library of ready-made styling sets for different types of popovers and styling
    • [ ] Library of ready-made components for creating different types of popovers - should go hand in hand with styling?


    • Global installer with global options overriding global defaults
    • Global container component where modal will actually show up in the code
    • Popover registration component, usable anywhere, for adding a popover which can be shown in the container


    For good and bad design, and features, virtually all libraries in awesome-vue in the overlay section


    npm i vue-ontop

    DownloadsWeekly Downloads






    Unpacked Size

    17.5 kB

    Total Files


    Last publish


    • cjblomqvist