mirror of https://github.com/strapi/strapi.git synced 2025-07-22 00:17:15 +00:00

* 5 new integrations

* More integrations

Signed-off-by: Maxime Castres <mcastres@student.42.fr>

* AUpdate Nuxt.js --amend --signoff

* Add 11ty

Signed-off-by: Maxime Castres <mcastres@student.42.fr>

* Correction after soupette's review

* Correct python file

* Alex review

* Alex review 2: replace console.error to log

2020-09-30 14:52:14 +02:00

15 KiB

Raw Blame History

Getting Started with Nuxt.js

This integration guide is following the Getting started guide. We assume that you have completed Step 8 and therefore can consume the API by browsing this url.

If you haven't gone through the getting started guide, the way you request a Strapi API with Nuxt.js remains the same except that you will not fetch the same content.

Create a Nuxt.js app

Create a basic Nuxt.js application with create-nuxt-app.

:::: tabs

::: tab yarn

yarn create nuxt-app nuxtjs-app

:::

::: tab npx

npx create-nuxt-app nuxtjs-app

:::

::::

Use an HTTP client

Many HTTP clients are available but in this documentation we'll use Axios and Fetch.

:::: tabs

::: tab @nuxtjs/strapi

For this example we are using the awesome @nuxt/strapi module.

yarn add @nuxtjs/strapi

Add @nuxtjs/strapi to the module section of nuxt.config.js with the following settings.

modules: ['@nuxtjs/strapi'],
strapi: {
  entities: ['restaurants', 'categories'],
  url: 'http://localhost:1337'
},

:::

::: tab axios

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 @nuxtjs/strapi

Request

try {
  await this.$strapi.find('restaurants');
} catch (error) {
  console.error(error);
}

:::

::: tab axios

Request

import axios from 'axios';

axios.get('http://localhost:1337/restaurants').then(response => {
  console.log(response);
});

:::

::: tab fetch

Request

fetch('http://localhost:1337/restaurants', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
  },
})
  .then(response => response.json())
  .then(data => console.log(data));

:::

Response

[
  {
    "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": 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"
      }
    ]
  }
]

::::

Example

:::: tabs

::: tab @nuxt/strapi

./pages/index.vue

<template>
  <div class="container">
    <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
    }
  },
  async mounted () {
    try {
      this.restaurants = await this.$strapi.$restaurants.find()
    } catch (error) {
      this.error = error
    }
  }
}
</script>

:::

::: tab axios

./pages/index.vue

<template>
  <div class="container">
    <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

./pages/index.vue

<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

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.

In this example a japanese category has been created which has the id: 3.

:::: tabs

::: tab @nuxtjs/strapi

try {
  await this.$strapi.create('restaurants', {
    name: 'Dolemon Sushi',
    description: 'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious',
    categories: [3],
  });
} catch (error) {
  this.error = error;
}

:::

::: tab axios

Request

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

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

{
  "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 @nuxtjs/strapi

./pages/index.vue

<template>
<div class="container">
  <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
    }
  },
  async mounted() {
    try {
      this.allCategories = await this.$strapi.$categories.find()
    } catch (error) {
      this.error = error
    }
  },
  methods: {
    handleSubmit: async function(e) {
      e.preventDefault();

      try {
        await this.$strapi.$restaurants.create(this.modifiedData)
      } catch (error) {
        this.error = error
      }
    }
  }
}
</script>

:::

::: tab axios

./pages/index.vue

<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

./pages/index.vue

<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

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 2.

::: tab @nuxtjs/strapi

try {
  await this.$strapi.update('restaurants', 2, {
    categories: [2],
  });
} catch (error) {
  this.error = error;
}

:::

::: tab axios

Request

import axios from 'axios';

axios
  .put('http://localhost:1337/restaurants/2', {
    categories: [2],
  })
  .then(response => {
    console.log(response);
  });

:::

::: tab fetch

Request

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

{
  "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": 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"
    }
  ]
}

::::

Starter

Conclusion

Here is how to request your Collection Types in Strapi using Nuxt.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, get how much entry you have and delete an entry too. Learn more about API Endpoints.

15 KiB Raw Blame History

Getting Started with Nuxt.js

Create a Nuxt.js app

Use an HTTP client

GET Request your collection type

Example

POST Request your collection type

Example

PUT Request your collection type

Starter

Conclusion

15 KiB

Raw Blame History