Hi there! I'm currently learning VUE3 and had a question about defining global properties in the Root Component. I did some research on Google before posting this question, but couldn't find any relevant results.
I would like to set a global property in the Root Component that can be accessed by all child components. This property could be something like a BASE_URL link or a TITLE.
Below is my Root Component:
<script>
import HeaderTop from './pages/partials/header_top.vue'
import HeaderMiddle from './pages/partials/header_middle.vue'
import MainNavbar from './pages/partials/main_navbar.vue'
import MainFooter from './pages/partials/footer.vue'
export default {
data() {
return {
show: true,
baseURL: 'www.example.com'
}
},
mounted() {
this.show = true;
},
components: {
HeaderTop,
HeaderMiddle,
MainNavbar,
MainFooter
}
}
</script>
<template>...</template>
HeaderMiddle.vue component:
Here, I want to access the property defined in the Root Component.
<script>
import app from '../../RootComponent.vue';
export default {
// I have tried this approach as well but it didn't work
data() {
return {
baseURL: app.baseURL
}
}
}
</script>
<template>
<div class="container-fluid">
<div class="row text-center align-items-center height-150">
<div class="col-xs-12 col-sm-12 col-lg-2">
<div class="logo">
<a href="/" title="">
<h1>{{baseURL}}</h1> <!-- This doesn't work -->
<h1>{{app.baseURL}}</h1> <!-- This doesn't work -->
<h1>{{app.baseURL}}</h1> <!-- This doesn't work -->
</a>
</div>
</div>
</div>
</div>
</template>
App.js:
require('./bootstrap');
import { createApp } from 'vue';
import router from './router'
import RootComponent from './RootComponent.vue'
const app = createApp(RootComponent);
app.use(router).mount("#app");