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 中使用自定义指令，你可以执行以下操作：

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

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

import Vue from 'vue'

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

Answer 2

在 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 3

如何创建指令

您可以通过将 .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"

我写了一篇中篇文章，其中更多地 in-depth 介绍了它的工作原理。它向您展示了如何制作一个指令，使元素在滚动时动画显示：Nuxt - Creating Custom Directives For Static & SSR Sites

Answer 4

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

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

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

按照说明使用插件创建指令（创建一个名为 loading 的指令）

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 上测试。

nuxt js中的自定义指令

Custom Directive in nuxt js

vue.js

server-side-rendering

nuxt.js

如何创建指令

如何插入指令

如何使用指令