Nuxt.js: Where can I define global App.mounted hook (on a level higher than layout component)

[zzhjerry]

Is there a higher level component where I can define mounted hook function than layout? Say I have two layouts and they share same code in their mounted function, where should I extract those code out?

_{This question is available on Nuxt.js community (#c1422)}

[robsonlopesmartins]

I think you can create a plugin or component and import in all of your layouts.

[zzhjerry]

I thought about using plugin but it seems there no way to do what I wanted. The closest option is to use a mixin and define a mounted hook but that will apply to all components. If you could give me an example, that would be very appreciated.

And I don't understand component and import in all of your layouts.. Could you elaborate in more details?

Thanks

[alexchopin]

Hi @zzhjerry,
Can you give us more information about what you would like to achieve in the global mounted function?

[IlyaSemenov]

Workaround for googlers:

1) Create file utils/extend-vue-app.js:

export default function extend (app, mixin) {
    if (!app.mixins) {
        app.mixins = []
    }
    app.mixins.push(mixin)
}

2) Create plugins/foo.js:

import extend from 'utils/extend-vue-app'

export default async function ({ app }) {
    extend(app, {
        mounted () {
            console.log('Hooray, Nuxt.js app mounted.')
        },
    })
}

3) Load your new plugin in nuxt.config.js:

module.exports = {
    ...
    plugins: [
        ...
        '~/plugins/foo.js',
    ],
}

@alexchopin I use this for all kinds of things:

• Load external scripts which will adjust DOM, for example twitter.js (because if they load before Vue app inits, this gives "The client-side rendered virtual DOM tree is not matching server-rendered content.")
• Add global document event listeners
• Deal with client side cookies on page load
• Add global data to the app (e.g. for vue-stash)

[Kimel1]

@IlyaSemenov , thanks

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.