๐จ Nuxt.js + WP REST API ใง้็ใตใคใใใใซใใใ้ใฎๅใใผใธใธใฎใใผใฟๅใๆธกใๆนๆณ
Nuxt.js + WordPress ใง้็ใตใคใใๆง็ฏใใ้ใใใผใใชใณใฏใซ slug ใไฝฟใใใๅ ดๅใจ id ใไฝฟใใใๅ ดๅใใใใจๆใใฎใงใใใ nuxt.config.js
ใซๆธใ generate
ใจๅใใผใธใฎ asyncData
้จๅใจใงใใผใฟใๅใๆธกใใใ่จ่ฟฐใใฉใๆธใๅใใใใใใฎใใกใใฃใจ่ฟทใฃใฆใใพใฃใใฎใงใกใขใ
nuxt.config.js:
//...
generate: {
interval: 1000,
async routes() {
const baseURL = "https://<site-url>";
const [posts, pages] = await Promise.all([
axios
.get(`${baseURL}/wp-json/wp/v2/posts`)
.then(response => {
return response.data;
})
.catch(error => {
return { error: error };
}),
axios
.get(`${baseURL}/wp-json/wp/v2/pages`)
.then(response => {
return response.data;
})
.catch(error => {
return { error: error };
})
]);
let post_routes = posts.map(page => {
return {
route: "/posts/" + page.id,
payload: { page }
};
});
let page_routes = pages.map(page => {
return {
route: "/" + encodeURI(page.slug),
payload: { page }
};
});
return [...post_routes, ...page_routes];
}
}
//...
payload
ใงใใผใฟใๆธกใใฆใใ้จๅใฏใๅ็ใชใใผใธไธใงใฏไปฅไธใฟใใใชๆใ่จ่ฟฐใใฆใใใจใyarn dev
ใง้็บไธญใฎๆใจใyarn generate
ใงใใซใใใๆใจใงใใใใ่ฏใใใใซใใผใฟใ่ชญใใงใใใพใใ
/posts/_id.html
async asyncData ({ $axios, params, error, payload }) {
if (payload) return { post: payload }
const baseURL = "https://<site-url>";
const endpoint = `${baseURL}/wp-json/wp/v2/posts/${params.id}`;
return await $axios
.get(endpoint)
.then(response => {
return { post: response.data };
})
.catch(error => {
return { error: error };
});
}
/_slug.html
async asyncData ({ $axios, params, error, payload }) {
if (payload) return { post: payload }
const baseURL = "https://<site-url>";
const endpoint = `${baseURL}/wp-json/wp/v2/?slug=${encodeURI(params.slag)}`;
return await $axios
.get(endpoint)
.then(response => {
return { post: response.data };
})
.catch(error => {
return { error: error };
});
}
baseURL
ใฏไธใงใฏใใใใใใใใใซ asyncData
ใซๅ
ฅใใฆๆธใใใฎใงใใใๅฎ้ใซใฏ /plugin/axios.js
ใจใใซไปฅไธใฟใใใชๆใใงๆธใใฆใใใพใ๏ผacf ใ่ชๅใฎ api ใๅผใถไบใใใใจๆใใฎใงใ/wp-json/wp/v2/
ใจใใพใงใฏๅ
ฅใ็กใใฎใ่ฏใใใ๏ผใ
export default function ({ $axios }) {
$axios.defaults.baseURL = "https://<site-url>";
}