Пользовательские директивы в nuxt в JS

есть ли способ написать пользовательскую директиву в nuxt js, которая будет работать для ssr, а также для frontend (или даже только для ssr)?

Я пробовал как в документации: https://nuxtjs.org/api/configuration-render#bundleRenderer

поэтому я добавил этот код:

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

в nuxt.конфиг.js

затем я использую его в шаблон:

<component v-custom1></component>

но это не работает, он просто бросает ошибку интерфейса

[Vue warn]: не удалось разрешить директиву: custom1

и он, похоже, не работает даже на стороне сервера.

Спасибо за любой совет.

6
nuxt.js ssr vue.js

2 ответов

протестировано в nuxt-edge ( его nuxt 2.0, который выйдет в этом или следующем месяце, но его довольно стабильный).

nuxt.конфиг.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>
1

Если вы хотите использовать пользовательские директивы в Nuxt вы можете сделать следующее:

  • создайте файл внутри папки плагинов, например директивы.js
  • в nuxt.конфиг.js добавить что-то вроде plugins: ['~/plugins/directives.js']

в новом файле добавьте свою пользовательскую директиву следующим образом:

import Vue from 'vue'

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