nuxt js中的自定义指令

Question

有没有办法如何在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

它甚至在服务器端似乎也没有工作.

谢谢你的建议.

Answer 1

如果您想在 Nuxt 中使用自定义指令，您可以执行以下操作：

• 在 plugins 文件夹中创建一个文件，例如，directives.js
• 在 nuxt.config.js 添加类似 plugins: ['~/plugins/directives.js']

在您的新文件中添加您的自定义指令，如下所示：

import Vue from 'vue'

Vue.directive('focus', {
  inserted: (el) => {
    el.focus()
  }
})

Answer 2

如何创建指令

.client.js您可以通过将扩展名添加到指令文件来使指令在客户端上运行。这适用于SSR渲染static。

// plugins/directive.client.js

import Vue from 'vue'

Vue.directive('log-inner-text', {
  inserted: el => {
    console.log(el.innerText)
  }
})

如何插入指令

在您的nuxt.config.js文件中将其添加为插件，如下所示。

plugins: [
  '~/plugins/directive.client.js'
]

不要忘记将您的指令保存在插件文件夹中。

如何使用指令

<div v-log-inner-text>Hello</div>

控制台日志

> "Hello"

我写了一篇中等文章，更深入地介绍了它的工作原理。它向您展示了如何创建一个指令，使元素在滚动时呈现动画：Nuxt - 创建静态和 SSR 站点的自定义指令

Answer 3

在 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'
        }
      }
    }
  }

页面.vue

<div v-cww>X</div>

从服务器生成的 html：

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