nuxt js中的自定义指令

vue.js Vue.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

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

感谢您的任何建议。

第2553篇《nuxt js中的自定义指令》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
Winter 2020.03.20

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-linu 2020.08.29
LTX-linu 2020.08.29

[Vue warn]: Failed to resolve directive: cww

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

 

报错这个无法导入

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android