I had developed a unique Vue js plugin to manage global variables as shown below:
CustomConstants.js file:
import Vue from 'vue'
export default {
install(Vue){
Vue.CustomConstants = {
APP_VERSION: '2.1.0'
}
}
}
This is my app.js file:
import Vue from 'vue';
import App from './App';
import CustomConstants from './plugins/CustomConstants'
Vue.use(CustomConstants);
new Vue({
render: h => h(App)
}).$mount('#app')
However, I encountered an issue when trying to access this constant in my App.vue component, it was returning undefined:
{{ Vue.CustomConstants.APP_VERSION }} // Not showing
{{ CustomConstants.APP_VERSION }} // Not displaying
I attempted importing Vue directly into App.vue like this:
<script>
import Vue from 'vue'
// Remaining code here
<script>
If anyone has suggestions, please share. While there are resources on creating and installing custom plugins, accessing them in Vue components seems less documented.