vue-services

A AngularJS inspired Vue.Js services manager

Usage no npm install needed!

<script type="module">
  import vueServices from 'https://cdn.skypack.dev/vue-services';
</script>

README

VueServices

Is a AngularJS inspired Vue.js services manager. VueServices gives you the plausibility to create and maintain services at ease.

Example

Vue.use(VueServices);

Vue.service("time", function() {
  return new Date();
});

Vue.component("theTime", {
  created: function() {
    let time = this.$services("time")();
  }
})

Getting started

To get started with VueServices, simply including the plugin via the 'use' method.

Vue.use(VueServices);

Creating a service

To create a service that do we have to call the Vue 'service' method. The first argument is the name of the service and the second one is the service variable. The variable of a service can be anything but the API of VueServices enables you to do more.

Vue.service("firstname", "John");

Vue.service("lastname", function() {
  return "Doe";
});

Service variable

VueServices has a couple of tricks up it's sleeve that can help you create better services.

Include other services

You can include other services in your service by passing a Array with as the last object the callback function. The included services are then passed to the callback function as arguments.

Vue.service("fullname", ["firstname", "lastname", function(firstname, lastname) {
  console.log(`${firstname} ${lastname()}`);
}]);

Getter

If you need a getter like function that executes every time the before service is included, do you need to pass a object with the callback function nested.

Vue.service("lastname", {
  function() {
    return "Doe";
  }
});

Note: the example shown above works only in ES6, if you want to use this API in ES5 or lower do you need to place the callback function in the 'function' key .

Vue.service("lastname", {
  function: function() {
    return "Doe";
  }
});

Now every time the service 'lastname' is included will it first be executed before being returned.

Accessing a service

You can access a service by calling the '$service' instance or the 'services' global method.

Vue.services("firstname");

this.$services("firstname");

To include multiple services at the same time can you pass a array containing the services to the instance or global method.

let [firstname, lastname] = Vue.services(["firstname", "lastname"]);

A Array containing the services is returned back in the same order as requested.

License

MIT