I need to make sure that all components have access to the BASE_URL variable. Here is an example of my App.js:
<template>
<router-view></router-view>
</template>
<script>
import addJoke from './components/addJoke.vue'
import showJokesAll from './components/showJokesAll.vue'
export default {
components: {
'add-joke': addJoke,
'show-jokes-all': showJokesAll
},
data () {
return {
BASE_URL : 'http://127.0.0.1:8090'
}
}
}
</script>
<style>
</style>
And here is the code from routes.js:
import showJokesAll from './components/showJokesAll.vue';
import addJoke from './components/addJoke.vue';
export default [
{path:'/', component: showJokesAll, props: {BASE_URL: 'http://127.0.0.1:8090'} },
{path:'/add', component: addJoke, props: {BASE_URL: 'http://127.0.0.1:8090'} }
]
In the showJokesAll component, I have the following:
<script>
import axios from 'axios';
export default {
name: 'showJokesAll',
props: ['BASE_URL'],
data () {
return {
jokes:[]
}
},
methods: {
},
created() {
axios.get( this.BASE_URL + '/api/jokes').then( response => this.jokes = response.data);
}
}
</script>
But it seems like the components are not receiving the BASE_URL properly.
[Vue warn]: Error in created hook: "ReferenceError: BASE_URL is not defined"
Any suggestions on how I can resolve this issue?