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 文件夹中创建一个文件，例如，directions.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 - Creating Custom Directives For Static & SSR Sites

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

page.vue

<div v-cww>X</div>

从服务器生成的 html：

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

Answer 4

对于其他来到这里的人，接受的答案允许您运行仅 SSR 指令。如果您想在任何地方运行指令，这很有帮助，但有点不直观。

如果您仅使用 nuxt.config.js 通过render 实现指令，如果不添加指令插件并将其添加到配置中，客户端将不支持该指令（请参阅如何创建指令答案）。

要对此进行测试，请尝试以下实验：

• 按照说明使用插件创建指令（制作一个称为加载）

Vue.directive('loading', function (el, binding) {
  console.log('running loading directive client side')
})

• 将此添加到您的 nuxt.config：

  render: {
    bundleRenderer: {
      directives: {
        loading (element, binding) {
          console.log('running loading directive server side')
        }
      }
    }
  }

在 Vue 页面文件上使用该指令，例如：

<div v-loading="true">Test</div>

在页面加载时，您会看到客户端和 SSR 指令都在运行。如果你删除客户端指令，你会看到像 OP 一样抛出的错误：[Vue warn]: Failed to resolve directive: loading。

在 nuxt 2.12.2 上测试。