VUE3 properties from root component not visible in child component

August 23, 2022

Guys sorry if is dump question am learing VUE3 and befeore i post this question i research google and not found result.

I want to define global property in Root Component that will be used in all child properties. Property like BASE_URL link or TITLE.

Here 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 call property from RootComponent

<script>
    import app from '../../RootComponent.vue';

    export default {
       
       // i also try this ant this not 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>  <!-- not work -->
                <h1>{{app.baseURL}}</h1> <!-- not work -->
                <h1>{{app.baseURL}}</h1> <!-- not 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");

>Solution :

It’s recommended to provide baseUrl as global property :

require('./bootstrap');

import { createApp } from 'vue';
import router from './router'
import RootComponent from './RootComponent.vue'
 
const app = createApp(RootComponent);
app.config.globalProperties.baseUrl='www.example.com'  
app.use(router).mount("#app");

and use it inside any child component like :

<script>
   export default {
       data() {
        return {
            baseURL: this.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> 

            </a>
            </div>
        </div>
     
    </div>
</div>
</template>