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.
- Register Axios in
nuxt.config.js
.
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 v-if="query" 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 thequery
state.articles
to update the result.
getters
return the state
.
← Vuex