> For the complete documentation index, see [llms.txt](https://devworkshops.gitbook.io/masteringvuejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://devworkshops.gitbook.io/masteringvuejs/beyond-the-basics/services.md).

# Services

## Mock API

Before we can even start talking about services and how to talk to APIs, we need to have an API up and running. There are several places and ways for you to create and host an API, but this is definitely not the focus of this workshop and because of that we're going to use a very cool method to mock our API and a full Restful API to our disposal running locally based on a JSON file. I've recorded a video on how to use, but I'll run through the steps here anyway.

{% embed url="<https://www.youtube.com/watch?v=nwtGhyomKCY>" %}

First we need to install **json-server**

```bash
npm install json-server
```

Second we're going to create a **db.json** in the root folder of our application to host our whole mock database content. You can copy the content of our highly confidential database here

{% file src="/files/-LXFwLZhhACaxDiWvEdz" %}
db.json
{% endfile %}

We're going to update the **package.json** file to include a new script

{% code title="package.json" %}

```javascript
...
"mock-api": "json-server db.json --watch"
...
```

{% endcode %}

And to run you can

```bash
npm run mock-api
```

## Creating service

Now that we have our mock API up and running, we need to create a service to talk to it, and for this service, we're going to need to install a dependency called **axios**. You can either install it using the command line `npm i axios --save` or you use the UI for it.

![](/files/-LW4_809D_iuEvQqdO33)

Let's now create a **services** folder under **src** and create **NorthwindService.js** file. There's nothing too complicated here, we're importing **axios**, creating a new instance of it with a **baseURL** then creating a **SupplierService** with a few methods using the **apiClient** to call the endpoints we're going to use.

{% code title="NorthwindService.js" %}

```javascript
import axios from 'axios'

const apiClient = axios.create({
    baseURL: `//localhost:3000`,
    withCredentials: false, // This is the default
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
    }
})

export const SuppliersService = {
    getAll() {
        return apiClient.get('/suppliers')
    },
    get(id) {
        return apiClient.get('/suppliers/' + id)
    },
    update(supplier) {
        return apiClient.put('/suppliers/' + supplier.id, supplier)
    },
    create(supplier) {
        return apiClient.post('/suppliers', supplier)
    }
}
```

{% endcode %}

## Updating SupplierList.vue

Let's update the **SupplierList.vue** to get the suppliers from the API instead of going through a static list.

{% code title="SupplierList.vue" %}

```markup
<script>
import { SuppliersService } from '@/services/NorthwindService.js'

export default {
    data() {
        return {
            fields: ['companyName', 'contactName', 'contactTitle', 'actions'],
            suppliers: []
        }
    },
    created() {
        SuppliersService.getAll()
            .then(r => (this.suppliers = r.data))
            .catch(err => console.error(err))
    }
}
</script>
```

{% endcode %}

The list of suppliers looks way more realistic now.

![](/files/-Lftf7eRKsIpE_QAurnG)

## Updating SupplierEdit.vue

We now have the SuppliersService, so let's update the **SupplierEdit.vue** file to use the update method and save any update from the user. First we're going to create a **save** button to invoke a **save** method.

{% code title="SupplierEdit.vue" %}

```markup
<button @click="save()" class="btn btn-primary" id="saveButton">Save</button>
```

{% endcode %}

In our **SupplierEdit** component, we're going to make a few changes. We're going to add a model to data. We're going to hook up the **created** life-cycle hook to get the full details from the API and finally create a **save** method to update the supplier and navigate back to the supplier list.

{% code title="SupplierEdit.vue" %}

```markup
<script>
import { SuppliersService } from '@/services/NorthwindService.js'
export default {
    props: {
        id: String,
        supplier: Object
    },
    data() {
        return {
            model: Object
        }
    },
    created() {
        this.model = this.supplier || {}
        if (this.id && !this.supplier) {
            SuppliersService.get(this.id).then(r => (this.model = r.data))
        }
    },
    methods: {
        save() {
            if (this.id) {
                SuppliersService.update(this.model)
                    .then(r => this.navigateBack())
                    .catch(err => console.error(err))
            } else {
                SuppliersService.create(this.model)
                    .then(r => this.navigateBack())
                    .catch(err => console.error(err))
            }
        },
        navigateBack() {
            this.$router.push('/suppliers')
        }
    }
}
</script>
```

{% endcode %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://devworkshops.gitbook.io/masteringvuejs/beyond-the-basics/services.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.