Nuxt - 如何在服务器端渲染后在客户端运行代码？

Question

I created a plugin injecting a noty ( https://ned.im/noty/#/ ) so I can use it globally, it looks like this:

export default ({ app }, inject) => {

    const notify = function (options = {}) {
        if (process.client) {
            new Noty(options).show();
        }
    }

    app.$notify = notify;
    inject('notify', notify);

}

This plugin shows a noty only on the client-side. On the server-side a noty does not appear, cause it can be displayed only in browser. I have a page with product details and I am receiving data in asyncData method. When the product was not found I would like to show a noty with proper message and redirect user to a product list page. When I change a route in client-side everything works awesome. However on the first page load (eg. I change an url manually in the browser) which happens on the server-side a noty does not appear, only a redirect works. My question is: how to show a noty in this case? How to create a noty in the browser after SSR or what is the best other solution to my problem?

Is there any way to run some code after client-side is already rendered (after server-side-rendering)?

Answer 1

You could just disable ssr for that plugin.

plugins: [
   ...,
   { src: '~plugins/yourplugin.js', ssr: false }
]

Answer 2

好的，我找到了一个模块： https : //github.com/potato4d/nuxt-client-init-module

Answer 3

it's not possible right know (nuxt <= 2.14.0 when i answering) but you can combine client plugin and client middleware to achieve that please take a look at this link:

https://github.com/nuxt/nuxt.js/issues/2653#issuecomment-390588837