nuxt js中的自定义指令

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

如果要在nuxt中使用自定义指令,可以执行以下操作:

• 在plugins文件夹中创建一个文件,例如directives.js
• 在nuxt.config.js中添加如下内容 plugins: ['~/plugins/directives.js']

在新文件中添加自定义指令,如下所示:

import Vue from 'vue'

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