Error 'require' is not defined while trying to fetch my local json file in vuejs

user_3035317 0
Viewed 196

I'm new to vuejs...
I tried to fetch my JSON data stored in a local JSON file, but the logic is to decide which JSON file's data to be fetched is dynamic.

I'm constantly receiving an error of 'require' is not defined and I'm not sure how to fix it.
I checked a few solutions mentioning the integration of webpack or browserify, but I'm not sure that why is it required to integrate any one of this!

<script>

var mylib = require(`../components/${this.$route.params.uuid}.json`)

export default {
    name: "BloePage",
    data() {
        return {
            blogcontent: mylib
        }
    }
}
</script>

I also tried the following way to directly access my JSON file, rather than keeping it dynamic. Still, I'm receiving the same here...

export default {
    name: "BloePage",
    data() {
        return {
            blogcontent: require('../components/UUDD_WWAA_EEFF_EWWW_AAWW.json')
        }
    }
}

Error -

16:26  error  'require' is not defined  no-undef

āœ– 1 problem (1 error, 0 warnings)


 @ ./router/index.js 28:11-30:28
 @ ./main.js
 @ multi (webpack)-dev-server/client?http://192.168.43.171:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./main.js
vue.js frontend javascript
1 Answers

this doesn't refer to the Vue instance when you use it outside export default.

You'd have to parse it from the URL with window.location, or use a query param instead:

http://your-url?uuid=1

const params = new URLSearchParams(window.location.search);
const uuid = params.get('uuid');
console.log(uuid); // Output: 1
user_127019490
Related