nuxt-typo3

Nuxt と Vue.js に基づく TYPO3 ヘッドレス フロントエンド レンダリング モジュール

• ✨ リリース ノート
• 📖 ドキュメント

特徴

• 🌐 ヘッドレス EXT によって提供される動的 API ルートの処理
• 🖼️ フロントエンドとバックエンドのレイアウト
• 🧩 TYPO3 の一般的なコンテンツ要素のほとんどのサポート
• ✨ 簡単なカスタマイズ
• 🌍 多言語対応
• 📈 SEO サポート
• 🚀 サーバーサイド対応

設定

Nuxt 3 アプリケーションで nuxt-typo3 モジュールを設定する方法をご紹介します。

また、StackBlitz のプレイグラウンドを使用することもできます。

nuxt-typo3 プロジェクトの開始

必要な nuxt-typo3 セットアップを使用して新しい Nuxt プロジェクトを初期化するには、nuxi init コマンドを使用できます。 nuxi の詳細をご覧ください。

npx nuxi@latest init -t gh:TYPO3-Headless/nuxt-typo3-starter <project-name>

nuxt-typo3 モジュールのインストール

プロジェクトに @t3headless/nuxt-typo3 dev 依存関係を追加します。

npx nuxi@latest module add typo3

次に、Nuxt 設定の modules セクションに @t3headless/nuxt-typo3 を追加します。

export default defineNuxtConfig({
  modules: ['@t3headless/nuxt-typo3'],
  typo3: {
    api: {
      baseUrl: 'https://api.t3pwa.com'
    }
  }
})

モジュールのインストールと使用方法の詳細については、Nuxt 3 のドキュメント を参照してください。

開発

• タイプスタブを生成するには、npm run dev:prepare を実行します。
• 開発モードで playground を開始するには、npm run dev を使用します。