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

Question

我创建了一个注入noty(https://ned.im/noty/#/(的插件，以便我可以全局使用它，它看起来像这样：

export default ({ app }, inject) => {
const notify = function (options = {}) {
if (process.client) {
new Noty(options).show();
}
}
app.$notify = notify;
inject('notify', notify);
}

此插件仅在客户端显示 noty。在服务器端不会出现 noty，因为它只能在浏览器中显示。 我有一个包含产品详细信息的页面，并且我正在以 asyncData 方法接收数据。当找不到产品时，我想显示带有正确消息的noty并将用户重定向到产品列表页面。当我在客户端更改路由时，一切正常。但是在第一个页面加载时(例如。我在浏览器中手动更改 url(这发生在服务器端，没有出现 noty，只有重定向有效。 我的问题是：在这种情况下如何显示 noty？如何在SSR之后在浏览器中创建noty，或者解决我的问题的最佳其他解决方案是什么？

有没有办法在客户端已经呈现后(在服务器端呈现之后(运行一些代码？

Answer 1

您可以禁用该插件的 ssr。

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

Answer 2

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

Answer 3

不可能正确知道(nuxt <= 2.14.0 当我回答时( 但是您可以结合客户端插件和客户端中间件来实现这一点 请看这个链接：

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