mstdmstd
234
2
Vue

Common methods, data in layout and vue file of vue app?

Posted 10 months ago by mstdmstd

Hello! In my laravel 5.6/vue.js 2.5.7 / vuetify": "^1.0.8" application I have common layout file : resources/assets/js/components/layout/backendAppLayout.vue :

<template>
    <v-app light>
        <main>
            ...

                <v-content>

                    <v-container fluid fill-height wrap="true" >

                        <!-- CONTENT AREA START -->

                        <router-view ></router-view>

                        <!-- CONTENT AREA END -->

                    </v-container>

                </v-content>

                <app-footer></app-footer>

        </main>
    </v-app>
</template>

<script>
    import {bus} from '../../app';
       ...
    export default {
        mixins: [appMixin],
        props: {
            source: String
        },
        data() {
            return {
                logged_username: '', /* LOGGED USER INFO BLOCK */
                loggedUserProfile: {},
                logged_user_id: null,
                logged_user_name: null,
                ...
            }
        },

        created() {
        },

        methods: {

    }

</script>

and in my resources/assets/js/app.js I have rotes defined as :

...
import HomePage from './components/home/HomePage.vue';
...


const routes = [
    {
        path: '/',
        components: {
            homePage: HomePage,
            ...
        }
    },

    {path: '/home/:action?/:value?', component: HomePage, name: 'homePage'},

]

const router = new VueRouter( {
    mode: 'hash', // default
    routes
})


export const bus = new Vue();
let current_locale = 'en';
let current_locale_label = 'English';

Vue.localStorage.set('backend_locale', 'en')
Vue.localStorage.set('backend_locale_label', 'English')
...

new Vue({ router, i18n,

    data:{
        app_title: '',
        loggedUserProfile: {},   /* LOGGED USER INFO BLOCK */
    },

    mixins : [appMixin],

    created() {
    }, // created() {

    mounted() {
    ...

and in resources/views/layouts/app.blade.php :

<body>

<div id="app">

    <backend-app-layout></backend-app-layout>

</div>

    @include('layouts.footer')
    <script src="{{ asset('js/app.js'    ) }}{{  "?dt=".time()  }}"></script>

</body>

My question is if there is a way to define some methods, data variables, computed(like current locale, logged user info) in layout file resources/assets/js/components/layout/backendAppLayout.vue and use then in /components/home/HomePage.vue(and in other vue files) file with this. parent. key ? If yes, please explain how...

Thanks!

Please sign in or create an account to participate in this conversation.