How to integrate requirejs in existing vuejs project?

Question

I'm trying to load JSON data inside my vue template.
To fetch JSON data, I'm using the require instead of import. So I can make set any dynamic UUID in the future for local JSON file name. But this resulting to error of error 'require' is not defined

<script>
export default {
    name: "BloePage",
    data() {
        return {
            blogcontent: require(`../content_files/UUDD_WWAA_EEFF_EWWW_AAWW.json`)
        }
    }
}
</script>

As I got to know from web sources. To use require in vuejs project. I need integrate requirejs in my existing vuejs project. I searched for this a lot. but didn't found any straight forward way of doing this...

Any Suggestions or Solution?

and this: https://stackoverflow.com/questions/15314019/how-do-i-use-requirejs-to-load-a-static-json-file — Val K, Sep 20 '20 at 14:44

score -1 · Answer 1 · edited Jul 16 '22 at 03:31

-1

Node.js's require and RequireJS do not work the same way. You cannot use RequireJS to load JSON, synchronously, from a URL.

If you want to fetch data from a URL, use Ajax.

You can find an example of how to do this in the Vue manual:

new Vue({
  el: '#app',
  data () {
    return {
      blogcontent: null
    }
  },
  mounted () {
    axios
      .get('../content_files/UUDD_WWAA_EEFF_EWWW_AAWW.json')
      .then(response => (this.blogcontent = response))
  }
})

edited Jul 16 '22 at 03:31

tao

82,996
16
114
150

answered Sep 20 '20 at 14:01

Quentin

914,110
126
1,211
1,335

Some one down voted this answer and my question too. I tried axios but it doesn't work with local JSON files. – Kiran Jasvanee Sep 22 '20 at 02:51
Nothing works with local files, that's standard browser security. Web applications need to be hosted on web servers. – Quentin Sep 22 '20 at 14:46

How to integrate requirejs in existing vuejs project?

1 Answers1