nuxt js中的自定义指令

乐2020-03-20

有没有一种方法可以在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

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

感谢您的任何建议。

Winter2020/03/20 15:16:11

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 warn]: Failed to resolve directive: cww

(found in <Pages/tagsCard/index.vue> at pages/tagsCard/index.vue)

报错啊无法使用

LTX-linu2020/08/29 00:21:24

LTX-linu2020/08/29 00:20:41

[Vue warn]: Failed to resolve directive: cww

(found in <Pages/tagsCard/index.vue> at pages/tagsCard/index.vue)

报错这个无法导入

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer