web-dev-qa-db-ja.com

nuxt jsのカスタムディレクティブ

nuxt jsでカスタムディレクティブを作成する方法はありますか？

私は次のドキュメントのようにそれを試しました： 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 warn]：ディレクティブの解決に失敗しました：custom1

また、サーバー側でも機能していないようです。

アドバイスありがとうございます。

vue.jsnuxt.jsserver-side-rendering
11
Martin Rázus

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>
1
Aldarund

Nuxtでカスタムディレクティブを使用する場合は、次の操作を実行できます。

  • Plugins.jsなどのファイルをプラグインフォルダー内に作成します。
  • Nuxt.config.jsにplugins: ['~/plugins/directives.js']のようなものを追加します

新しいファイルに次のようなカスタムディレクティブを追加します。

import Vue from 'vue'

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