nuxt-fetch

0.1.3 • Public • Published

Nuxt Fetch

A Nuxt.js module which brings in the Fetch API to both client and server.

Usage

This module injects the instance method this.$fetcher to the Vue instance and is available in context as $fetcher on the Nuxt context.

nuxt.config.js

module.exports = {
  modules: ["nuxt-fetch"],
};

Example

pages/index.vue

export default {
  name: "Home",
  async asyncData({ $fetcher }) {
    const result = await $fetcher("/api/posts/1").then((res) => res.json());
    console.log(result); // { id: 1, title: "Hello world!", description: "..." }
  },
  methods: {
    async postSomething() {
      await this.$fetcher("/api/create/", {
        method: "post",
        headers: {
          "content-type": "application/json",
        },
        body: JSON.stringify({
          id: "2",
          title: "New Post",
          description: "...",
        }),
      });
    },
  },
};

Options

By default fetch works with relative URLs on the server too by checking the environment. So you can request something like /api everywhere. The following options are currently available:

nuxt.config.js

module.exports = {
  // Construct a different baseURL e.g. http://0.0.0.0:5000
  fetch: {
    host: "0.0.0.0",
    port: "5000",
  },
};

Readme

Keywords

Package Sidebar

Install

npm i nuxt-fetch

Weekly Downloads

1

Version

0.1.3

License

MIT

Unpacked Size

3.41 kB

Total Files

4

Last publish

Collaborators

  • eckidevs