開発者向け
ヘッドレスCMSコンテンツで新しいNuxt3サイトを充実させる
By Ondrej Polesny
Vue 3がリリースされて以来、私たちはこれを待っていました。 Nuxt 3はパブリックベータ版です!最大の改善点は何ですか?ヘッドレスCMSでNuxt 3をどのように使用できますか?
この記事では、Nuxt 3の最も興味深い新機能を紹介し、 KenticoヘッドレスCMSによってKontentからコンテンツをフェッチする方法を示し、有用なリソースのリストを提供します。
Nuxt3の紹介
Nuxtは、Vue.jsの静的サイトジェネレーターでした。現在、彼らはそれをハイブリッドVueフレームワークと呼んでいます。これは、いくつかの静的ファイルを生成するだけではないためです。フル機能のクライアント/サーバーアプリを実装し、各ページのレンダリング戦略を決定できます。
新しいバージョンは10月12日から利用可能であり、他の機能の中でも、次の大きな改善がもたらされます。
- Vue3とViteのサポート
今年の初めに、私は最初のVue 3サイトをViteに実装し、開発のスピードに驚いていました。午前中にプロジェクトを開始するときに0の遅延が発生し、高速のHMRも発生しました。これにより、1つのウィンドウでVS Codeを操作し、変更を保存すると、次のウィンドウでサイトが自動的に更新されます。
Nuxtではクライアント/サーバーアプリを実行できると述べました。 Nitroと呼ばれる新しいサーバーエンジンを使用すると、サーバーレス環境で、またはエッジワーカーとしてサーバーバンドルをホストできます。 - TypeScriptのサポート
Nuxt 3はTypeScriptで完全に書き直されたため、完全に型指定されたコンポーネント、ページ、ストア、およびライブラリを操作できます。 - App.vueコンポーネント
App.vueはNuxt 3の主成分であると同様に、アプリ全体のコードを定義するのに有用である初期化のためのスマートリンクSDKのウェブスポットライト。 - 複数のスロットがあるレイアウト
HTMLが複雑になると、子ページのプレースホルダーを1つにするだけでは不十分です。 Nuxt 3では、単一のレイアウトテンプレートで複数のスロットを定義できます。
- セットアップスクリプト
Nuxt 3では、Vue 3でわかっているセットアップ機能の次の省略形を使用して、コードの可読性を向上させることができます。定義されたすべての変数は、テンプレートで自動的に使用可能になります。
- <ヘッド>コンポーネント
ほとんどすべてのページでタイトル、メタタグ、OGタグなどを設定する必要があるため、Nuxt 3では、ページテンプレート内に存在し、最終ページのHTMLヘッダーに挿入される新しいヘッダーコンポーネントが導入されています。これにより、テンプレートにデータを出力するのと同じくらい簡単にヘッダーを調整できます。
- サーバーAPIルートとミドルウェア
プロジェクトの専用APIフォルダーでサーバーレス関数を定義することは、すぐに主要なJamstackフレームワークの標準になり、Nuxtも例外ではありません。ただし、Nuxt 3では、ロギングまたはその他の目的ですべてのリクエストをインターセプトできるサーバーミドルウェアを定義することもできます。
KontentheadlessCMSでのNuxt3の使用
Nuxt 3を自分で試すのに十分興奮していますか?次に、2つの良いニュースがあります🤓。
- JS SDKをプラグインとしてフレームワークにフックし、その
deliveryClient
をすべてのページとコンポーネントで利用できるようにするKontentNuxt3モジュールを用意しました。 - Kontent Nuxt3モジュールは、軽量であるためクライアント側バンドルに追加できる最新のJS SDKで動作します(現在、Nuxtのようなパブリックベータ版です)。
Kontent Nuxt3モジュールのインストール方法
まず、聞かせてのはしてNuxtアプリ作成Nuxt 3 CLIを:
次に、KontentNuxt3モジュールをインストールします。
次に、 kontent-nuxt3-module
をビルドモジュールとしてnuxt.config.js構成ファイルにnuxt.config.js
そして、 projectId
publicRuntimeConfig
(およびプロジェクトの他の詳細)を定義します。
.env
ファイルを使用していることがわかりますが、構成ファイルで直接文字列リテラルとして定義することもできます。
そして、あなたは完了です! :-)
これで、使用することができますdeliveryClient
であなたのページやコンポーネントで流暢APIをnuxtApp
:
KontentNuxt3サンプルアプリ
すべての一般的な機能が実装されているテンプレートから始める方が常に簡単です。したがって、インスピレーションが必要な場合は、次の機能を備えたNuxt3サンプルアプリをご覧ください。
- TypeScript
- カスタムレイアウト
- コンテンツに基づく動的ルート
- コンテンツに基づく動的コンポーネント
- データ管理用のPiniaストア
Nuxt3リソース
そして、最初に約束したように、実装に大いに役立った便利なNuxt3リソースのリストを以下に示します。彼らもあなたに有利なスタートを与えることを願っています:
- Kontent Nuxt3モジュール
- 店舗管理機能を備えたKontentNuxt3Lumenサンプルアプリ
- Nuxt3のドキュメント
- Nuxt3フレームワークのソースコード
- Nuxt3の簡単な例
- PiniaストアとTailwindを使用したNuxt3サンプルアプリ
結論
Nuxt 3はまだベータ版であり、うまく機能しない機能や十分に文書化されていない機能に遭遇する可能性があります。しかし、開発者の生活の質の向上をすでに楽しんでおり、本番環境で間もなく可能になるもののプレビューを入手できます。
Nuxtファンの方は、 Discordに参加して、Nuxt3の何が一番好きか教えてください🤗。