How to Use Axios in a Nuxt Project demo repo

Vuex (opens new window) is a state management pattern and library for Vue.js applications.

Axios (opens new window) is a promise based HTTP client for the browser and node.js.

This tutorial uses Wikipedia's Opensearch API (opens new window).

# 👣 Steps

Create a Nuxt project and install Axios.

npx create-nuxt-app nuxt-demo
cd nuxt-demo
npm i @nuxtjs/axios

INFO

Vuex is already included in Nuxt so there is no need to install it.

export default {
  modules: ["@nuxtjs/axios"]
};

Create a template, e.g. in pages/vuex-axios.vue.

<template>
  <div>
    <h1>Vuex Demo with Axios</h1>

    <b-form-input
      v-model="query"
      autofocus
      class="mb-4"
      placeholder="Search from Wikipedia"
      type="text"
      @input="getArticles"
    />

    <b-list-group class="list-unstyled">
      <b-list-group-item
        v-show="item.title"
        v-for="(item, index) in articles"
        :key="index"
        :href="item.url"
        target="_blank"
      >
        <h1>{{ item.title }}</h1>

        <p>{{ item.snippet }}</p>
      </b-list-group-item>
    </b-list-group>
  </div>
</template>

Create a module, e.g. store/wikipedia.js.

export const state = () => ({ query: "", articles: [] });

export const actions = {
  async getArticles({ state, commit }) {
    const url = `https://en.wikipedia.org/w/api.php?action=opensearch&search=${state.query}&origin=*`;

    const response = await this.$axios.get(url);

    const articles = [];

    for (let i = 0, j = response.data[i].length; i < j; i++) {
      articles[i] = {
        title: response.data[1][i],
        snippet: response.data[2][i],
        url: response.data[3][i]
      };
    }

    commit("articles", articles);
  }
};

export const mutations = {
  updateQuery(state, query) {
    state.query = query;
  },
  articles(state, articles) {
    state.articles = articles;
  }
};

export const getters = {
  query: state => {
    return state.query;
  },
  articles: state => {
    return state.articles;
  }
};

Use Vuex to complete the template, i.e. in pages/vuex-axios.vue.

<template>
  <div>
    <h1>Vuex Demo with Axios</h1>

    <b-form-input
      v-model="query"
      autofocus
      class="mb-4"
      placeholder="Search from Wikipedia"
      type="text"
      @input="getArticles"
    />

    <b-list-group class="list-unstyled">
      <b-list-group-item
        v-for="(item, index) in articles"
        v-show="item.title"
        :key="index"
        :href="item.url"
        target="_blank"
      >
        <h1>{{ item.title }}</h1>

        <p>{{ item.snippet }}</p>
      </b-list-group-item>
    </b-list-group>
  </div>
</template>

<script>
export default {
  computed: {
    query: {
      get() {
        return this.$store.getters["wikipedia/query"];
      },
      set(value) {
        this.$store.commit("wikipedia/updateQuery", value);
      }
    },
    articles() {
      return this.$store.getters["wikipedia/articles"];
    }
  },
  methods: {
    getArticles() {
      if (this.query) {
        this.$store.dispatch("wikipedia/getArticles");
      }
    }
  }
};
</script>

# 📖 Explanation

# Template

@input="getArticles" means that when query changes, the getArticles method will be executed.

The articles will be placed inside ul under the input.

The input is bound to the query in the computed part. When there is an input, the set part will commit the changes. The get part is what the input will show.

Finally, the methods contain the getArticles method. If the search bar is not empty, this method dispatches the getArticles action.

# Store

Initially, the query and articles array are empty.

Pass the query from state to the url. Use axios.get(url) to use Axios.

Process the response to a better format to consume, then commit that. The first articles in commit("articles", articles); corresponds to the item in mutations. The second one is the result to be passed.

There are 2 items in mutations:

updateQuery to change the query state.
articles to update the result.

getters return the state.

← Vuex