Vue.js: define a service

From the Vue.js documentation.

Vue.js itself is not a full-blown framework - it is focused on the view layer only.

As a library focusing on the V out of MVC it does not provide things like services.

Are you using some kind of module loader like Browserify or Webpack?
Then you can leverage the module system of ES6 to create a service all by yourself.
All you have to do is to create a plain JavaScript class which is being exported by this new module.

An example could look like this:

export default class RestResource {  sendRequest() {    // Use vue-resource or any other http library to send your request  }}

Inside your vue component 1 and 2 you can use this service by importing the class.

import RestResource from './services/RestResource';const restResourceService = new RestResource();restResourceService.sendRequest();

From the Vue.js documentation on Building Large-Scale Apps.

The community has contributed the vue-resource plugin, which provides an easy way to work with RESTful APIs. You can also use any Ajax library you like, e.g. $.ajax or SuperAgent.

Vue doesn't require you to follow a specific architecture, since it only refers to the View layer in an MVC or MVVM architecture. As @Marc already said in his answer, a good practice is to use a module loader like Browserify or Webpack so you can create your "services" in separate files, importing they where you need. It's very easy to structure your app with a module loader using vue-cli.

Indeed, I personaly really like the Flux architecture for component based apps, then I recommend you to take a look at Vuex, a Flux-inspired application architecture that is designed specifically for managing state inside Vue.js apps.

This way, you can create Actions that use vue-resource to request your API, then you can dispatch Mutations when the data arrives, with all components that need that data already bound to the global State, reacting automatically. In other words, your components itself don't need to call the services, they just react to State changes dispatched by Mutations.

You can export the instance of a class for your service:

export default new class {   ...}

In your component, or any other place, you can import the instance and you will always get the same one. This way it behaves similar to an injected Angular service, but without using this.

import myService from '../services/myservice';Vue.component('my-component', {  ...  created: function() {    myService.oneFunction();  }  ...})