nuxtjs-drupal-ce

Lupus Custom Elements Rendererを介してNuxtとDrupalを接続します。

2.4Kダウンロード•28スター•v2.4.2

fago•

maximilianmikus•

TurtlBbx

nuxtjs-drupal-ce - Nuxt Drupalカスタム要素コネクタ

Lupus Custom Elements Rendererを介してNuxt v3とDrupalを接続します。

詳細については、https://www.drupal.org/project/lupus_decoupledを参照してください。

モジュールの2.xバージョンはNuxt 3と互換性があります。Nuxt 2互換バージョンについては、1.xバージョンをチェックアウトしてください。

前提条件

DrupalバックエンドにLupus Custom Elements RendererモジュールまたはLupus Decoupled Drupalがインストールされていること。

セットアップ

Nuxtプロジェクトに移動します。必要であれば、新しいプロジェクトを開始します。

npx nuxi@latest init <project-name>

Nuxtプロジェクトにnuxtjs-drupal-ceモジュールを追加します。

npx nuxi@latest module add drupal-ce

nuxt.config.jsでnuxtjs-drupal-ceを設定します。

export default defineNuxtConfig({
  modules: [
    'nuxtjs-drupal-ce',
  ],
  drupalCe: {
    drupalBaseUrl: 'https://your-drupal.example.com',
    // more options...
  }
})

このモジュールのデフォルトはLupus Decoupled Drupalとうまく連携します。この場合、drupalBaseUrlを設定するだけで開始できます。

初期ファイルを足場を組みます。足場を組んだ後、必要に応じて編集します。

rm -f app.vue && npx nuxt-drupal-ce-init

機能

Lupus Custom Elements Rendererが提供するカスタム要素APIを介してページを取得します。
Nuxt-wildcardルートを提供し、すべてのDrupalページをNuxt.jsとvue-routerでレンダリングできるようにします。
ページのメタデータとページタイトルをNuxtと統合します。
パンくずリストとローカルタスク（「タブ」）をサポートします。
認証されたリクエストをサポートします。クッキーはデフォルトでDrupalに渡されます。
フロントエンドでのDrupalメッセージの表示をサポートします。
すぐに始められるように、スタイルなしのスケルトンコンポーネントを提供します。
Rest menu itemsモジュールを介してDrupalメニューの取得と表示をサポートします。

オプション

drupalBaseUrl: DrupalのベースURL。例: https://example.com:8080。必須。
serverDrupalBaseUrl: オプションで、サーバーコンテキストで適用する代替DrupalベースURL。
ceApiEndpoint: カスタム要素APIエンドポイント。デフォルトは/ce-api。
fetchOptions: Drupalから取得する際に適用されるデフォルトのfetchOptions。デフォルトは{ credentials: 'include' }。
fetchProxyHeaders: useRequestHeadersを介してDrupalに渡すHTTPリクエストヘッダー。デフォルトは['cookie']。
menuEndpoint: メニューを取得するために使用されるメニューエンドポイントパターン。Rest menu items Drupalモジュールが提供するAPIに適合するように、デフォルトは'api/menu_items/$$$NAME$$$'。$$$NAME$$$は取得されるメニュー名に置き換えられます。
menuBaseUrl: メニューのベースURL。デフォルトはdrupalBaseUrl + ceApiEndpoint。
addRequestContentFormat: 指定された場合、指定された値は_content_format URLパラメータとしてリクエストに追加されます。デフォルトでは無効です。
addRequestFormat: trueに設定すると、_format=custom_elements URLパラメータが自動的にリクエストに追加されます。デフォルトはfalse。
customErrorPages: デフォルトでは、Drupalが提供するエラーページ（例: 403, 404ページ）が適切なステータスコードを維持したまま表示されます。customErrorPagesを有効にすると、代わりに通常のNuxtエラーページが表示され、Nuxtでページをカスタマイズできます。デフォルトはfalse。
useLocalizedMenuEndpoint: 有効にすると、メニューエンドポイントはnuxtjs/i18nモジュールで設定された言語プレフィックスを使用します。デフォルトはtrue。
serverApiProxy: 有効にすると、モジュールはAPIリクエストをDrupalバックエンドにプロキシするNitroサーバーハンドラーを作成します。SSRではデフォルトでtrue（SSGでは無効）。
passThroughHeaders: Drupalからクライアントに渡すレスポンスヘッダー。デフォルトは'cache-control', 'content-language', 'set-cookie', 'x-drupal-cache', 'x-drupal-dynamic-cache'。注：これはSSRモードでのみ利用可能です。
serverLogLevel: サーバーサイドロギングに使用するログレベル。デフォルトは'info'。オプション
- false: サーバープラグインはロードされず、デフォルトのNuxtエラーロギングが維持されます。
- 'info': すべてのサーバーリクエストとエラーをログに記録します。
- 'error': エラーのみをログに記録します。
disableFormHandler: trueに設定すると、フォームハンドラーミドルウェアが無効になります。デフォルトはfalse。

環境変数によるオプションの上書き

ランタイム設定値はNUXT_PUBLIC_プレフィックスを介して環境変数で上書きできます。サポートされているランタイムオーバーライド

drupalBaseUrl -> NUXT_PUBLIC_DRUPAL_CE_DRUPAL_BASE_URL
serverDrupalBaseUrl -> NUXT_PUBLIC_DRUPAL_CE_SERVER_DRUPAL_BASE_URL
menuBaseUrl -> NUXT_PUBLIC_DRUPAL_CE_MENU_BASE_URL
ceApiEndpoint -> NUXT_PUBLIC_DRUPAL_CE_CE_API_ENDPOINT

カスタム要素のレンダリング

一般的に、カスタム要素は動的コンポーネントとしてレンダリングされ、単にグローバルコンポーネントとして登録される必要があります。

コンポーネントは~/components/globalに配置する必要があります。例については/playgroundディレクトリを参照してください。例えば、カスタム要素node-article-teaserの場合、グローバルコンポーネントnode-article-teaser.vueがレンダリングのために選択されます。

命名推奨

APIレスポンスで使用されるカスタム要素名とフロントエンドコンポーネントの間で明確な1:1マッピングがあるように、コンポーネント名をケバブケースで小文字にすることをお勧めします。例えば、CustomElementName.vueの代わりにcustom-element-name.vueを使用してください。どちらのバリアントも機能しますが。

デフォルトコンポーネント（JSONのみ）

カスタム要素のJSONベースのレンダリングを使用する場合、モジュールはフォールバックコンポーネントのサポートを提供します。カスタム要素に対応するVueコンポーネントがない場合、モジュールは適切なデフォルトコンポーネントを見つけようとします。

仕組み

モジュールは要素名から最後の-で区切られたプレフィックスを削除します。
次に、--defaultサフィックスを追加します。
この変更されたコンポーネントが存在する場合、それがレンダリングに使用されます。
コンポーネントが存在しない場合、プロセスが繰り返されます。

このアプローチにより、drupal-form--default.vueのような汎用デフォルトコンポーネントが、drupal-form-user-login-form.vueのような特定の要素に使用できます。カスタマイズのために、開発者は必要に応じてデフォルトコンポーネントをコピーして変更することができます。

ルックアッププロセスの例

特定のコンポーネントが見つからない場合、モジュールはカスタム要素名からセグメントを段階的に削除することでデフォルトコンポーネントを検索します。例えば、カスタム要素node-custom-viewをレンダリングする場合、以下の順序でコンポーネントを検索します。

x node-custom-view.vue
x node-custom-view--default.vue
x node-custom--default.vue
✓ node--default.vue

フォームハンドラーミドルウェア

フォームハンドラーミドルウェアは、フォームPOSTリクエストをDrupalに転送し、通常どおりレスポンスをレンダリングすることで、Drupalフォームの送信を処理するために使用されます。このオプションを使用すると、特定のルートのミドルウェアをバイパスしたり、グローバルに無効にしたりできます。

ルートレベル

特定のルートのフォームハンドラーミドルウェアをバイパスするには、ルートの配列でdisableFormHandlerオプションを使用できます。

export default defineNuxtConfig({
  drupalCe: {
    disableFormHandler: ['/custom-form'],
  },
})

グローバルレベル

フォームハンドラーミドルウェアをグローバルに無効にするには、disableFormHandlerオプションをtrueに設定して使用できます。

export default defineNuxtConfig({
  drupalCe: {
    disableFormHandler: true,
  },
})

非推奨のオプション

以下のオプションは非推奨であり、下位互換性向上のためにのみ残されています。

baseURL: Drupal /ce-apiエンドポイントのベースURL。例: https://:8888/ce-api。設定されている場合、drupalBaseUrlは提供されたURLのオリジンで設定されます。

エラー処理

モジュールはfetchPageおよびfetchMenuメソッドのデフォルトのエラーハンドラーを提供します。

fetchPage: Drupalから提供されたステータスコードとメッセージを含むエラーをスローします。
fetchMenu: コンソールにエラーメッセージをログに記録し、フロントエンドにメッセージを表示します。

エラー処理のカスタマイズ

fetchメソッドを呼び出す際にパラメータを使用することで、デフォルトのエラーハンドラーをオーバーライドできます。

fetchPage:

<script lang="ts" setup>
  const { fetchPage } = useDrupalCe()

  function customPageError (error: Record<string, any>) {
    throw createError({ statusCode: error.value.statusCode, statusMessage: 'No access.', data: {}, fatal: true })
  }
  const page = await fetchPage(useRoute().path, { query: useRoute().query }, customPageError)
</script>

fetchMenu:

<script lang="ts" setup>
  const { fetchMenu } = useDrupalCe()
  const { getMessages } = useDrupalCe()
  const messages = getMessages()

  function customMenuError (error: Record<string, any>) {
    messages.value.push({
      type: 'error',
      message: `Menu error: Unavailable. ${error.value.statusCode}`
    })
  }
  const mainMenu = await fetchMenu('main', {}, customMenuError)
</script>

注：errorパラメータはオプションであり、省略できます。

2.xバージョンではサポートされていない以前のオプション

以下のオプションは1.xでサポートされていましたが、削除されました。

addVueCompiler: ランタイムでカスタム要素のマークアップをレンダリングする場合、つまり「マークアップ」コンテンツ形式を使用する場合にこれが必要です。代わりに、VueランタイムコンパイラはNuxtconfigを介して有効にできます。詳細についてはこちらを参照してください。
axios: drupal-ceaxiosインスタンスに渡すオプション。fetchOptionsの代わりにこれを使用してください。

開発

このリポジトリをクローンします。
npm installを使用して依存関係をインストールします。
型スタブを生成するには、npm run dev:prepareを実行してください。
npm run devを使用してプレイグラウンドを開発モードで開始します。
Nuxt configのbaseURL設定をLupus Decoupled DrupalインスタンスURLで更新し、APIプレフィックス /ce-apiを追加します。例: https://8080-shaal-drupalpod-8m3z0ms7mb6.ws-eu67.gitpod.io/ce-api

StackBlitzで実行

StackBlitzで起動
Nuxt configのbaseURL設定をLupus Decoupled DrupalインスタンスURLで更新し、APIプレフィックス /ce-apiを追加します。例: https://8080-shaal-drupalpod-8m3z0ms7mb6.ws-eu67.gitpod.io/ce-api

ライセンス

MITライセンス

クレジット

開発はdrunomics [email protected]がスポンサー