# Getting Started with Vue.js This integration guide is following the [Getting started guide](../getting-started/quick-start.html). We assume that you have completed [Step 8](../getting-started/quick-start.html#_8-consume-the-content-type-s-api) and therefore can consume the API by browsing this [url](http://localhost:1337/restaurants). If you haven't gone through the getting started guide, the way you request a Strapi API with [Vue.js](https://vuejs.org/) remains the same except that you will not fetch the same content. ### Create a Vue.js app Create a basic Vue.js application using [Vue CLI](https://cli.vuejs.org). ```bash vue create vue-app ``` ### Use an HTTP client Many HTTP clients are available but in this documentation we'll use [Axios](https://github.com/axios/axios) and [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) :::: tabs ::: tab axios ```bash yarn add axios ``` ::: ::: tab fetch No installation needed ::: :::: ### GET Request your collection type Execute a GET request on the `restaurant` Collection Type in order to fetch all your restaurants. Be sure that you activated the `find` permission for the `restaurant` Collection Type. :::: tabs ::: tab axios *Request* ```js import axios from 'axios' axios.get('http://localhost:1337/restaurants') .then(response => { console.log(response); }) ``` ::: ::: tab fetch *Request* ```js fetch("http://localhost:1337/restaurants", { method: "GET", headers: { 'Content-Type': 'application/json' }, }).then(response => response.json()) .then(data => console.log(data)); ``` ::: *Response* ```json [{ "id": 1, "name": "Biscotte Restaurant", "description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.", "created_by": { "id": 1, "firstname": "Paul", "lastname": "Bocuse", "username": null }, "updated_by": { "id": 1, "firstname": "Paul", "lastname": "Bocuse", "username": null }, "created_at": "2020-07-31T11:37:16.964Z", "updated_at": "2020-07-31T11:37:16.975Z", "categories": [{ "id": 2, "name": "French Food", "created_by": 1, "updated_by": 1, "created_at": "2020-07-31T11:36:23.164Z", "updated_at": "2020-07-31T11:36:23.172Z" }] }] ``` :::: ### Example :::: tabs ::: tab axios `./src/App.vue` ```js ``` ::: ::: tab fetch `./src/App.vue` ```js ``` ::: :::: ### POST Request your collection type Execute a POST request on the `restaurant` Collection Type in order to create a restaurant. Be sure that you activated the `create` permission for the `restaurant` Collection Type and the `find` permission for the `category` Collection type. :::: tabs ::: tab axios *Request* ```js import axios from 'axios' axios.post('http://localhost:1337/restaurants', { name: 'Dolemon Sushi', description: 'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious', categories: [ 3 ] }) .then(response => { console.log(response); }) ``` ::: ::: tab fetch *Request* ```js fetch('http://localhost:1337/restaurants', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'Dolemon Sushi', description: 'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious', categories: [ 3 ] }) }).then(response => response.json()) .then(data => console.log(data)); ``` ::: *Response* ```json { "id": 2, "name": "Dolemon Sushi", "description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious", "created_by": null, "updated_by": null, "created_at": "2020-08-04T09:57:11.669Z", "updated_at": "2020-08-04T09:57:11.669Z", "categories": [{ "id": 3, "name": "Japanese", "created_by": 1, "updated_by": 1, "created_at": "2020-07-31T11:36:23.164Z", "updated_at": "2020-07-31T11:36:23.172Z" }] } ``` :::: ### Example :::: tabs ::: tab axios `./src/App.vue` ```js ``` ::: ::: tab fetch `./src/App.vue` ```js ``` ::: :::: ### PUT Request your collection type Execute a PUT request on the `restaurant` Collection Type in order to update the category of a restaurant. Be sure that you activated the `put` permission for the `restaurant` Collection Type. :::: tabs We consider that the id of your restaurant is `2` and the id of your category is `3` ::: tab axios *Request* ```js import axios from 'axios' axios.put('http://localhost:1337/restaurants/2', { categories: [ 3 ] }) .then(response => { console.log(response); }) ``` ::: ::: tab fetch *Request* ```js fetch('http://localhost:1337/restaurants/2', { method: "PUT", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ categories: [ 3 ] }) }) .then(response => response.json()) .then(data => { console.log(data); }) ``` ::: *Response* ```json { "id": 2, "name": "Dolemon Sushi", "description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious", "created_by": null, "updated_by": null, "created_at": "2020-08-04T10:21:30.219Z", "updated_at": "2020-08-04T10:21:30.219Z", "categories": [{ "id": 3, "name": "Japanese", "created_by": 1, "updated_by": 1, "created_at": "2020-08-04T10:24:26.901Z", "updated_at": "2020-08-04T10:24:26.911Z" }] } ``` :::: ## Conclusion Here is how to request your Collection Types in Strapi using Vue.js. When you create a Collection Type or a Single Type you will have a certain number of REST API endpoints available to interact with. We just used the GET, POST and PUT methods here but you can [get one entry](../content-api/api-endpoints.html#get-an-entry), [get how much entry you have](../content-api/api-endpoints.html#count-entries) and [delete](../content-api/api-endpoints.html#delete-an-entry) an entry too. Learn more about [API Endpoints](../content-api/api-endpoints.html#api-endpoints)