2020-08-17 19:29:04 +02:00
# 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
2020-09-30 14:52:14 +02:00
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 ).
2020-08-17 19:29:04 +02:00
:::: tabs
::: tab axios
```bash
yarn add axios
```
:::
::: tab fetch
No installation needed
:::
::::
### GET Request your collection type
2020-09-30 14:52:14 +02:00
Execute a `GET` request on the `restaurant` Collection Type in order to fetch all your restaurants.
2020-08-17 19:29:04 +02:00
Be sure that you activated the `find` permission for the `restaurant` Collection Type.
:::: tabs
::: tab axios
2020-09-30 14:52:14 +02:00
_Request_
2020-08-17 19:29:04 +02:00
```js
2020-09-30 14:52:14 +02:00
import axios from 'axios';
2020-08-17 19:29:04 +02:00
2020-09-30 14:52:14 +02:00
axios.get('http://localhost:1337/restaurants').then(response => {
console.log(response);
});
2020-08-17 19:29:04 +02:00
```
:::
::: tab fetch
2020-09-30 14:52:14 +02:00
_Request_
2020-08-17 19:29:04 +02:00
```js
2020-09-30 14:52:14 +02:00
fetch('http://localhost:1337/restaurants', {
method: 'GET',
2020-08-17 19:29:04 +02:00
headers: {
2020-09-30 14:52:14 +02:00
'Content-Type': 'application/json',
2020-08-17 19:29:04 +02:00
},
2020-09-30 14:52:14 +02:00
})
.then(response => response.json())
2020-08-17 19:29:04 +02:00
.then(data => console.log(data));
```
:::
2020-09-30 14:52:14 +02:00
_Response_
2020-08-17 19:29:04 +02:00
```json
2020-09-30 14:52:14 +02:00
[
{
2020-08-17 19:29:04 +02:00
"id": 1,
2020-09-30 14:52:14 +02:00
"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": 1,
"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"
}
]
}
]
2020-08-17 19:29:04 +02:00
```
::::
### Example
:::: tabs
::: tab axios
`./src/App.vue`
```js
< template >
< div id = "app" >
< div v-if = "error" >
{{ error }}
< / div >
< ul v-else >
< li v-for = "restaurant in restaurants" :key = "restaurant.id" >
{{ restaurant.name }}
< / li >
< / ul >
< / div >
< / template >
< script >
import axios from 'axios'
export default {
name: 'App',
data () {
return {
restaurants: [],
error: null
}
},
async mounted () {
try {
const response = await axios.get('http://localhost:1337/restaurants')
this.restaurants = response.data
} catch (error) {
this.error = error;
}
}
}
< / script >
```
:::
::: tab fetch
`./src/App.vue`
```js
< template >
< div id = "app" >
< div v-if = "error" >
{{ error }}
< / div >
< ul v-else >
< li v-for = "restaurant in restaurants" :key = "restaurant.id" >
{{ restaurant.name }}
< / li >
< / ul >
< / div >
< / template >
< script >
export default {
name: 'App',
data () {
return {
restaurants: [],
error: null,
headers: {'Content-Type': 'application/json'}
}
},
methods: {
parseJSON: function (resp) {
return (resp.json ? resp.json() : resp);
},
checkStatus: function (resp) {
if (resp.status >= 200 & & resp.status < 300 ) {
return resp;
}
return this.parseJSON(resp).then((resp) => {
throw resp;
});
}
},
async mounted () {
try {
const response = await fetch("http://localhost:1337/restaurants", {
method: 'GET',
headers: this.headers,
}).then(this.checkStatus)
.then(this.parseJSON);
this.restaurants = response
} catch (error) {
this.error = error
}
}
}
< / script >
```
:::
::::
### POST Request your collection type
2020-09-30 14:52:14 +02:00
Execute a `POST` request on the `restaurant` Collection Type in order to create a restaurant.
2020-08-17 19:29:04 +02:00
Be sure that you activated the `create` permission for the `restaurant` Collection Type and the `find` permission for the `category` Collection type.
2020-09-30 14:52:14 +02:00
In this example a `japanese` category has been created which has the id: 3.
2020-08-17 19:29:04 +02:00
:::: tabs
::: tab axios
2020-09-30 14:52:14 +02:00
_Request_
2020-08-17 19:29:04 +02:00
```js
2020-09-30 14:52:14 +02:00
import axios from 'axios';
2020-08-17 19:29:04 +02:00
2020-09-30 14:52:14 +02:00
axios
.post('http://localhost:1337/restaurants', {
2020-08-17 19:29:04 +02:00
name: 'Dolemon Sushi',
description: 'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious',
2020-09-30 14:52:14 +02:00
categories: [3],
2020-08-17 19:29:04 +02:00
})
.then(response => {
console.log(response);
2020-09-30 14:52:14 +02:00
});
2020-08-17 19:29:04 +02:00
```
:::
::: tab fetch
2020-09-30 14:52:14 +02:00
_Request_
2020-08-17 19:29:04 +02:00
```js
fetch('http://localhost:1337/restaurants', {
2020-09-30 14:52:14 +02:00
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));
2020-08-17 19:29:04 +02:00
```
:::
2020-09-30 14:52:14 +02:00
_Response_
2020-08-17 19:29:04 +02:00
```json
{
2020-09-30 14:52:14 +02:00
"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": [
{
2020-08-17 19:29:04 +02:00
"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"
2020-09-30 14:52:14 +02:00
}
]
2020-08-17 19:29:04 +02:00
}
```
::::
### Example
:::: tabs
::: tab axios
`./src/App.vue`
```js
< template >
< div id = "app" >
< div v-if = "error" >
{{ error }}
< / div >
< form id = "form" v-on:submit = "handleSubmit" v-else >
< label for = "name" > Name< / label >
< input id = "name" v-model = "modifiedData.name" type = "text" name = "name" >
< label for = "description" > Description< / label >
< input id = "description" v-model = "modifiedData.description" type = "text" name = "description" >
< div >
< br / >
Select categories
< div v-for = "category in allCategories" :key = "category.id" >
< label > {{ category.name }}< / label >
< input
type="checkbox"
:value="category.id"
v-model="modifiedData.categories"
name="categories"
:id="category.id"
/>
< / div >
< / div >
< input type = "submit" value = "Submit" >
< / form >
< / div >
< / template >
< script >
import axios from 'axios'
export default {
name: 'App',
data() {
return {
allCategories: [],
modifiedData: {
name: '',
description: '',
categories: [],
},
error: null
}
},
async mounted() {
try {
const response = await axios.get('http://localhost:1337/categories')
this.allCategories = response.data;
} catch (error) {
this.error = error;
}
},
methods: {
handleSubmit: async function(e) {
e.preventDefault();
try {
const response = await axios.post('http://localhost:1337/restaurants', this.modifiedData)
console.log(response);
} catch(error) {
this.error = error;
}
}
}
}
< / script >
```
:::
::: tab fetch
`./src/App.vue`
```js
< template >
< div id = "app" >
< div v-if = "error" >
{{ error }}
< / div >
< form id = "form" v-on:submit = "handleSubmit" v-else >
< h3 > Restaurants< / h3 >
< br >
< label for = "name" > Name< / label >
< input id = "name" v-model = "modifiedData.name" type = "text" name = "name" >
< label for = "description" > Description< / label >
< input id = "description" v-model = "modifiedData.description" type = "text" name = "description" >
< div >
< br / >
< b > Select categories< / b >
< br >
< div v-for = "category in allCategories" :key = "category.id" >
< label > {{ category.name }}< / label >
< input
type="checkbox"
:value="category.id"
v-model="modifiedData.categories"
name="categories"
:id="category.id"
/>
< / div >
< / div >
< br >
< input type = "submit" value = "Submit" >
< / form >
< / div >
< / template >
< script >
export default {
name: 'App',
data() {
return {
allCategories: [],
modifiedData: {
name: '',
description: '',
categories: [],
},
error: null,
headers: {'Content-Type': 'application/json'}
}
},
async mounted() {
try {
const allCategories = await fetch("http://localhost:1337/categories", {
method: 'GET',
headers: this.headers,
}).then(this.checkStatus)
.then(this.parseJSON);
this.allCategories = allCategories
} catch (error) {
this.error = error
}
},
methods: {
parseJSON: function (resp) {
return (resp.json ? resp.json() : resp);
},
checkStatus: function (resp) {
if (resp.status >= 200 & & resp.status < 300 ) {
return resp;
}
return this.parseJSON(resp).then((resp) => {
throw resp;
});
},
handleSubmit: async function(e) {
e.preventDefault();
try {
const response = await fetch('http://localhost:1337/restaurants', {
method: 'POST',
headers: this.headers,
body: JSON.stringify(this.modifiedData)
}).then(this.checkStatus)
.then(this.parseJSON);
console.log(response);
} catch (error) {
this.error = error
}
}
}
}
< / script >
```
:::
::::
### PUT Request your collection type
2020-09-30 14:52:14 +02:00
Execute a `PUT` request on the `restaurant` Collection Type in order to update the category of a restaurant.
2020-08-17 19:29:04 +02:00
Be sure that you activated the `put` permission for the `restaurant` Collection Type.
:::: tabs
2020-09-30 14:52:14 +02:00
We consider that the id of your restaurant is `2` .
and the id of your category is `2` .
2020-08-17 19:29:04 +02:00
::: tab axios
2020-09-30 14:52:14 +02:00
_Request_
2020-08-17 19:29:04 +02:00
```js
2020-09-30 14:52:14 +02:00
import axios from 'axios';
2020-08-17 19:29:04 +02:00
2020-09-30 14:52:14 +02:00
axios
.put('http://localhost:1337/restaurants/2', {
categories: [2],
})
.then(response => {
console.log(response);
});
2020-08-17 19:29:04 +02:00
```
:::
::: tab fetch
2020-09-30 14:52:14 +02:00
_Request_
2020-08-17 19:29:04 +02:00
```js
fetch('http://localhost:1337/restaurants/2', {
2020-09-30 14:52:14 +02:00
method: 'PUT',
2020-08-17 19:29:04 +02:00
headers: {
2020-09-30 14:52:14 +02:00
'Content-Type': 'application/json',
2020-08-17 19:29:04 +02:00
},
body: JSON.stringify({
2020-09-30 14:52:14 +02:00
categories: [2],
}),
2020-08-17 19:29:04 +02:00
})
2020-09-30 14:52:14 +02:00
.then(response => response.json())
.then(data => {
console.log(data);
});
2020-08-17 19:29:04 +02:00
```
:::
2020-09-30 14:52:14 +02:00
_Response_
2020-08-17 19:29:04 +02:00
```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",
2020-09-30 14:52:14 +02:00
"categories": [
{
"id": 2,
"name": "Brunch",
"created_by": 1,
"updated_by": 1,
"created_at": "2020-08-04T10:24:26.901Z",
"updated_at": "2020-08-04T10:24:26.911Z"
}
]
2020-08-17 19:29:04 +02:00
}
```
::::
2020-09-30 14:52:14 +02:00
## Starter
- [Vue.js Blog starter ](https://github.com/strapi/strapi-starter-vue-blog )
2020-08-17 19:29:04 +02:00
## 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.
2020-09-30 14:52:14 +02:00
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 ).