nuxt-typo3

NuxtとVue.jsをベースにしたTYPO3 Headlessフロントエンドレンダリングモジュール

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

機能

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

セットアップ

Nuxt 3アプリケーションでnuxt-typo3モジュールをセットアップする方法を学びましょう。

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

nuxt-typo3プロジェクトをキックスタート

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

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

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

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

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を実行してください。
• npm run devを使用して、開発モードでプレイグラウンドを開始します。