TransWikia.com

Nuxt static site with headless wordpress - including images in generated build

Stack Overflow Asked by Zach G on November 16, 2021

I’ve used Gatbsy to build static sites with headless WordPress before, and even when it gets the images from wordpress (featured image or ACF field), the generated build contains those images…very cool.

In other words, once the site is generated, the live site no longer has to query the backend for the image.

I’m trying to do a similar thing with Nuxt. The problem is, that even in the generated build, it’s looking for the image source on the wordpress back end, which in this case is my local host. It’s still trying to grab the image from localhost:3080/wp-content/uploads/etc…

I want it to actually grab that image when the site is being generated and then include it in the build folder so it NEVER has to query the wordpress backend once the site is live.

It’s so dang simple with Gatsby that I never really even thought about it, but now with Nuxt I can’t seem to find any documentation around how to do this. Any one figure it out?

EDIT: Some code samples:

First, in my Vuex Store:

export const state = () => ({
  cards: [],
})

export const mutations = {
  SET_CARDS(state, cards) {
    state.cards = cards.reverse()
  }
}

export const actions = {
  async nuxtServerInit({ commit, dispatch }) {
    const loaded = await dispatch('loadApp')

    console.log('LOADED', 'loaded')
  },

  loadApp({ dispatch }) {
    return Promise.all([
      dispatch('getCards'),
    ])
  },


  async getCards({ commit, dispatch }) {
    return new Promise(async (resolve, reject) => {
      try {
        const cards = await this.$wp.cpt('CARD')
        commit('SET_CARDS', cards)
        resolve(cards)
      } catch (error) {
        console.log('error:', error)
      }
    })
  },

The "Cards" object get passed down into a Cards component. A v-if loops over each card in cards, passing each "Card" into a Card component. Inside of the card component:

<template>
  <div class="card">
    <img  :src="this.card.fields.acf.image.sizes.large" alt="icon">
    <h3>{{card.meta.headline[0]}}</h3>
    <p :class="isCenterCard ? 'center' : ''">{{card.meta.body[0]}}</p>
  </div>
</template>

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP