vue.js - nuxt js中的自定义指令

有没有一种方法可以在nuxt js中编写自定义指令，该指令将同时适用于ssr和前端(甚至仅适用于ssr)？

我在以下文档中尝试过:
https://nuxtjs.org/api/configuration-render#bundleRenderer

所以我添加了这段代码:

  module.exports = {
      render: {
        bundleRenderer: {
          directives: {
            custom1: function (el, dir) {
              // something ...
            }
          }
        }
      }
    }

到nuxt.config.js

然后在模板中使用它为:

<component v-custom1></component>

但它不起作用，只会引发前端错误

[Vue警告]:无法解析指令:custom1

而且，即使在服务器端，它似乎也不起作用。

感谢您的任何建议。

最佳答案

在nuxt-edge中进行了测试(它的nuxt 2.0将于本月或下个月发布，但它现在相当稳定)。

nuxt.config.js

  render: {
    bundleRenderer: {
      directives: {
        cww: function (vnode, dir) {
          const style = vnode.data.style || (vnode.data.style = {})
          style.backgroundColor = '#ff0016'
        }
      }
    }
  }

page.vue

<div v-cww>X</div>

来自服务器的结果html:

<div style="background-color:#ff0016;">X</div>

关于vue.js - nuxt js中的自定义指令，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51385651/