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?

Answer 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))
  }
})