๐Ÿ’จ Nuxt.js + WP REST API ใง้™็š„ใ‚ตใ‚คใƒˆใ‚’ใƒ“ใƒซใƒ‰ใ™ใ‚‹้š›ใฎๅ„ใƒšใƒผใ‚ธใธใฎใƒ‡ใƒผใ‚ฟๅ—ใ‘ๆธกใ—ๆ–นๆณ•

2020-12-30 #Development

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>";
}
comments powered by Disqus
Profile
๐Ÿ˜›

็ŸณๅŽŸใ€€ๆ‚  / Yu Ishihara

ใƒ‡ใ‚ถใ‚คใƒณใจใƒ—ใƒญใ‚ฐใƒฉใƒŸใƒณใ‚ฐใจใƒจใƒผใ‚ฐใƒซใƒˆไฝœใ‚ŠใŒๅฅฝใใงใ™ใ€‚