如何创建指令

Question

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

我尝试了以下文档： https://nuxtjs.org/api/configuration-render#bundleRenderer

所以我添加了以下代码：

SELECT DISTINCT a.Customer,
a.Date, 
a.Receipt, 
b.Invoice 
FROM Table_A a

JOIN Table_B b
ON a.Customer = b.Customer
AND a.Date = b.Date

到nuxt.config.js

然后我在模板中将其用作：

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

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

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

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

谢谢您的建议。

Answer 1

如何创建指令

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

// plugins/directive.client.js

import Vue from 'vue'

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

如何插入指令

在您的nuxt.config.js文件中，将其添加为这样的插件。

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

别忘了将指令保存在plugins文件夹中。

如何使用指令

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

控制台日志

> "Hello"

我写了一篇中篇文章，深入介绍了它的工作原理。它向您展示如何创建指令以使元素在滚动视图中生效： Nuxt - Creating Custom Directives For Static & SSR Sites

Answer 2

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

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

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

import Vue from 'vue'

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

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

nuxt js中的自定义指令

4 个答案:

如何创建指令

如何插入指令

如何使用指令