Posted on

Moon – A minimal, blazing fast JavaScript library inspired by Vue.js

Moon is a minimal and fast library for building user interfaces. Its syntax is similar to Vue.js but it weighs in at only 6kb and reports 102 repaints/sec which is almost double Vue’s results.

Moon combines the positive aspects of popular libraries into one small package. It’s super lightweight and includes advanced optimizations to ensure fast render times. The API is small and intuitive, while still remaining powerful.

Moon differs from the existing solutions by providing a faster, yet compact library with a simple but powerful API. It uses a virtual DOM system similar to React, but includes advanced optimizations crafted specifically for Moon, similar to the Glimmer engine by the Ember team. In a variety of benchmarks, Moon has proven itself to be the fastest UI library out there.

Per the getting started guide here is a quick example of a simple Moon instance:

const app1 = new Moon({
  el: "#app1",
  data: {
    msg: "Hello Moon!"
  }
});


  
{{msg}}

I know there are tons of JavaScript utilities being released but I like that some are now starting to focus on the minimal side.

Posted on

Vue Loop – Infinite Content Looping for Vue.js

Vue Loop is a component for Vue.js that allows you to create an infinite content loop for your site. It features full page content looping, a contained content loop, and horizontal & vertical options.

Here is a demo of the component in action:

Getting started is simple. Just add it to your project via NPM:

npm install vue-loop --save

Then in your JavaScript:

import VueLoop from 'vue-loop'

new Vue({
    el: '#app',

    components: {
        VueLoop
    }
})

<vue-loop :full="true" :horizontal="false">
    

        1
    

    

        2
    

    

        3
    

    

        4
    

</vue-loop>

For more information on Vue Loop see the Github Project or the live demo.

Posted on

PortalVue – Render Vue.js components anywhere in the DOM

PortalVue, created by Thorsten Lünborg, is a portal component for Vuejs that allows you to render DOM elements outside of a component.

Typically when are working with things like tooltips, drop downs, and modals you need to rely on events to communicate between disconnected components. That can lead to complexity in your app and that is where PortalVue comes in.

Here is a simple example that is taken from the docs to highlight how it works:

<portal to="destination">
  <p>This slot content will be rendered wherever the <portal-target> with name 'destination'
    is located.
  </p>
</portal>

<portal-target name="destination">
  <!--
  This component can be located anwhere in your App.
  The slot content of the above portal component will be rendered here.
  -->
</portal-target>

You can even mount items outside of the Vue-App:

<body>
  

    
      

        PortalVue will dynamically mount an  instance of  in place of the Element
        with `id="widget"`, and this paragraph will be rendered inside of it.
      

    
  

  
    new Vue({el: '#app'})
  
  <aside id="widget" class="widget-sidebar">
    This Element is not controlled by our Vue-App, but we can create a <portal-target> there dynamically.
  </aside>
</body>

For more information on this component check out the Github Repo and the official documentation. It looks to be a great solution for keeping your code clean and manageable.

Posted on

VueUnit – Component testing utilities for Vue.js

VueUnit is a new library for Vue.js that makes it easier to create and unit test components. The project pages claims:

  • Easily test props, events, and slots (including named slots)
  • Optionally shallow render components
  • Simulate simple DOM events (click, input, etc.)
  • Use any test runner / assertion library

VueUnit renders all components in the DOM and needs to handle setup and tear down. VueUnit provides two helpers for this: beforeEachHooks() and afterEachHooks() when need to be called before and after each test, respectively.

The readme contains several examples in mocha, chai, sinon, and chai-jquery to get you started but it’s not limited to those. If you are interested in unit testing your Vue.js app, definitely check out this package.