Nuxt 3 にカスタム ディレクティブを登録する方法

TL;DR

plugins/ ディレクトリにプラグイン ファイルを作成します。ここに Vue アプリ インスタンスにアクセスします。

そこでカスタム ディレクティブを定義して登録できます:

// ~/plugins/my-directives.ts
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('highlight', {
        mounted(el, binding) {
            el.style.backgroundColor = binding.value
        }
    });

    // Register more directives as needed
});

詳細

Vue では、ディレクティブは HTML 要素の特別な属性であり、その動作を拡張および操作するために使用されます。 Vue にはいくつかの組み込みディレクティブが用意されています:

• v-bind - 属性を JavaScript 式に動的にバインドするために使用されます。
• v-on - イベント リスナーを要素にアタッチするために使用されます。
• v-if/v-else-if/v-else - 要素を条件付きでレンダリングするために使用されます。
• その他にもたくさんあります。

より具体的で高度な使用例のために、Vue はカスタム ディレクティブを作成する方法を提供します。これらは、下位レベルの DOM 操作に特に役立ちます。

プレーンな Vue アプリでは、アプリ レベルでカスタム ディレクティブを登録するには、次のようにアプリ インスタンスにアタッチします。

const app = creatApp({});

app.directive('highlight', {
    mounted(el, binding) {
        el.style.backgroundColor = binding.value
    }
});

その後、アプリ内の任意の要素でディレクティブをグローバルに使用できます。

<p v-highlight="'yellow'">This text will be highlighted!</p>

Nuxtではどうでしょうか？

Nuxt で同じ機能を実現するには、Vue アプリ インスタンスにアクセスする必要があり、そのためにプラグインを使用できます。

Nuxt のプラグインを使用して、Vue アプリ レベルでアプリケーションに機能を追加できます。これらは Vue アプリの作成時にロードされて実行され、Nuxt アプリの plugins/ ディレクトリ内のファイルは Nuxt によってプラグインとして自動的に登録されます。

Nuxt では、plugins/ ディレクトリにプラグイン ファイルを作成できます。これを使用して、カスタム ディレクティブをグローバルに定義して登録できます。

// ~/plugins/my-directives.ts
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('highlight', {
        mounted(el, binding) {
            el.style.backgroundColor = binding.value
        }
    });

    // Register more directives as needed
});

私たちのプラグイン関数は、Vue アプリ インスタンスを含む vueApp プロパティを持つ Nuxt アプリ コンテキストにアクセスできます。このプロパティにディレクティブを直接登録し、アプリ全体でグローバルに利用できるようにすることができます。

サーバー側レンダリング (SSR) の問題を回避するために、ディレクティブの登録に使用するプラグイン ファイルには .client または .server サフィックスを含めないでください。

それだけです。読んでいただきありがとうございます。

?‍? つながろう › Twitter · GitHub · LinkedIn

以上がNuxt 3 にカスタム ディレクティブを登録する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。