2

I'm trying to have my add data from a local static JSON file to the Vue vuex store.

I want my JSON file separated from the bundle process, so that i can change the content anytime in future, without rebuilding the whole site.

I have my json file [test.json] in the public folder

And with the following code, i managed to import the data, but its still being bundled on build of the site.

import data from '../public/test';

export const state = () => ({
  allData: {}
})

export const mutations = {
  SET_ALL_DATA(state, data) {
    state.allData = data
  }
}

export const actions = {
  nuxtServerInit({ commit }) {
    commit('SET_ALL_DATA', data)
  }
}

I have also tried hosting the JSON file on a web server and doing an axios call to it on nuxtServerInit like so. but the called upon json file still gets bundled, as changing the hosted json file does nothing to update the content.

export const actions = {
  async nuxtServerInit ({ commit }, { $axios }) {
    const res = await $axios.$get('https://www.amq.fariskassim.com/testjson/test.json')
    commit('SET_ALL_DATA', res)
  }
}

I'm all out of solutions so if anyone can point me in the right direction, i would be totally grateful

wsgg
  • 934
  • 1
  • 20
  • 43
  • The axios approach should work - did you then remove the `.json` file from `public`? – match May 04 '20 at 08:34
  • Does this answer your question? [How do I exclude a file (eg config file) in Vue.js?](https://stackoverflow.com/questions/53035036/how-do-i-exclude-a-file-eg-config-file-in-vue-js) – match May 04 '20 at 08:41

0 Answers0