Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

tzookb's avatar

Vue add a "service" to the app or component

I want to create a dedicated js service for handling http requests, instead of dirtying my components with:

this.$http.get

stuff, I would us this with a dedicated service, and the components will use it instead, any ideas how do I implement that?

in angular it was called "services" for example...

0 likes
5 replies
Francismori7's avatar

You can still create normal ES5-6 classes. You can use that.

tzookb's avatar

Yes of course, bu t how do I insert them in to the component?

Do I make them global?

2serve's avatar
2serve
Best Answer
Level 7

I've done this, from an old project:

UserService.js

import Vue from 'vue'
export default {
    getUsers(succes, error) {
        Vue.http.get('user').then(
            (response) => {
                succes(response.data)
            },
            (response) => {
                error(response)
            }
        )
    },
...
}

my views/components:

import UserService from '../../services/UserService'
export default {
    ready() {
        getUsers() {
                UserService.getUsers((data) => {
                    this.users = data
                }, (response) => {
                    toastr.error("Oops, " + response.status + " " + response.statusText, "Users", toastrOptions);
                })
            },
        ...
    }
}

Hope this is something for you..

2 likes
2serve's avatar

Hi,

nice i could help, but may i suggest to take a look at vuex? not only for the global accesable stores, but also for the clean syntax to do ajax calls..

Login.vue

<template>

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form @submit.prevent="getToken(creds)">
                <input v-model="creds.email" class="form-control" name="email" placeholder="Email Address"></input>
                <input v-model="creds.password" class="form-control" name="password" placeholder="Password"></input>
                <button type="submit" class="btn btn-primary">Login</button>
            </form>
        </div>
    </div>
</div>
</template>

<script>
import { getToken } from '../vuex/actions/auth'
export default {
    data() {
        return {
            creds: {
                email: '',
                password: ''
            }
        }
    },
    vuex: {
        actions: {
            getToken
        }
    }
}
</script>

nice and clean huh? :)

vikkio88's avatar

I made this class recently because I had the same problem: https://github.com/vikkio88/vue-services Basically you can install it with npm and easily create a service that will have already everthing configured to make the call. I am going to create a Service pool helper plugin, to register all the service and call them within the components, rather than including all the time the service file.

Please or to participate in this conversation.