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

2
  • The axios approach should work - did you then remove the .json file from public? Commented May 4, 2020 at 8:34
  • Does this answer your question? How do I exclude a file (eg config file) in Vue.js? Commented May 4, 2020 at 8:41

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.