web-dev-qa-db-fra.com

Directive personnalisée dans nuxt js

y at-il un moyen d'écrire une directive personnalisée dans nuxt js, qui fonctionnera pour ssr et également pour frontend (ou même pour ssr uniquement)? 

Je l'ai essayé comme dans la documentation suivante: https://nuxtjs.org/api/configuration-render#bundleRenderer

alors j'ai ajouté ce code:

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

à nuxt.config.js

alors je l'utilise dans le template comme:

<component v-custom1></component>

mais cela ne fonctionne pas, il suffit de jeter l'erreur frontale 

[Vue warn]: Echec de la résolution de la directive: custom1

Et cela ne semble pas fonctionner même côté serveur.

Merci pour tout conseil.

vue.jsnuxt.jsssr
6
Martin Rázus

Testé dans nuxt-Edge (son nuxt 2.0 sera disponible dans ce mois ou le mois prochain, mais il est plutôt stable tel quel).

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>

Résultat HTML du serveur:

<div style="background-color:#ff0016;">X</div>
1
Aldarund

Si vous souhaitez utiliser des directives personnalisées dans Nuxt, vous pouvez effectuer les opérations suivantes:

  • Créez un fichier dans le dossier plugins, par exemple, directives.js 
  • Dans nuxt.config.js, ajoutez quelque chose comme plugins: ['~/plugins/directives.js']

Dans votre nouveau fichier, ajoutez votre directive personnalisée comme ceci:

import Vue from 'vue'

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