当サイトを最適な状態で閲覧していただくにはブラウザのJavaScriptを有効にしてご利用下さい。
JavaScriptを無効のままご覧いただいた場合には一部機能がご利用頂けない場合や正しい情報を取得できない場合がございます。
承知しました
本サイトではWebサイトのエクスペリエンスを向上させるために、Cookieを使用しています。Cookieはブラウザの設定から無効にできます。本サイトで使用するCookieについては、プライバシーポリシーをご確認ください。

Blog

ブログ

開発者向け

ヘッドレス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では、単一のレイアウトテンプレートで複数のスロットを定義できます。
 < template >
  < slot name = 'nav' >  slot >
  < hr />
  < slot />
 template >
  • セットアップスクリプト
    Nuxt 3では、Vue 3でわかっているセットアップ機能の次の省略形を使用して、コードの可読性を向上させることができます。定義されたすべての変数は、テンプレートで自動的に使用可能になります。
 
  • <ヘッド>コンポーネント
    ほとんどすべてのページでタイトル、メタタグ、OGタグなどを設定する必要があるため、Nuxt 3では、ページテンプレート内に存在し、最終ページのHTMLヘッダーに挿入される新しいヘッダーコンポーネントが導入されています。これにより、テンプレートにデータを出力するのと同じくらい簡単にヘッダーを調整できます。
 < template >
  < Head >
    < Title > {{ data.page.title }}  Title >
   Head >
 ...  template >
  • サーバーAPIルートとミドルウェア
    プロジェクトの専用APIフォルダーでサーバーレス関数を定義することは、すぐに主要なJamstackフレームワークの標準になり、Nuxtも例外ではありません。ただし、Nuxt 3では、ロギングまたはその他の目的ですべてのリクエストをインターセプトできるサーバーミドルウェアを定義することもできます。
export default async (req, res) => {  console .log(req) }

KontentheadlessCMSでのNuxt3の使用

Nuxt 3を自分で試すのに十分興奮していますか?次に、2つの良いニュースがあります🤓。

Kontent Nuxt3モジュールのインストール方法

まず、聞かせてのはしてNuxtアプリ作成Nuxt 3 CLIを

 npx nuxi init nuxt3-app cd nuxt3-app npm i

次に、KontentNuxt3モジュールをインストールします。

 npm i --save-dev kontent-nuxt3-module

次に、 kontent-nuxt3-moduleをビルドモジュールとしてnuxt.config.js構成ファイルにnuxt.config.js

 // nuxt.config.js
... buildModules : [    'kontent-nuxt3-module'
], ...

そして、 projectId publicRuntimeConfig (およびプロジェクトの他の詳細)を定義します。

 // nuxt.config.js
... publicRuntimeConfig : {  kontent : {    projectId : process.env.KONTENT_PROJECT_ID,    previewApiKey : process.env.KONTENT_PREVIEW_KEY,    defaultQueryConfig : {      usePreviewMode : true
 } } ...

.envファイルを使用していることがわかりますが、構成ファイルで直接文字列リテラルとして定義することもできます。

そして、あなたは完了です! :-)

これで、使用することができますdeliveryClientであなたのページやコンポーネントで流暢APIをnuxtApp

 // index.vue
async setup ( ) {  const kontent = useNuxtApp().$kontent ...  const articles = await kontent.getItems
() .type(Article_CODENAME) .orderByDescending( 'elements.date' ) .toPromise() ... }

KontentNuxt3サンプルアプリ

すべての一般的な機能が実装されているテンプレートから始める方が常に簡単です。したがって、インスピレーションが必要な場合は、次の機能を備えたNuxt3サンプルアプリをご覧ください。

  • TypeScript
  • カスタムレイアウト
  • コンテンツに基づく動的ルート
  • コンテンツに基づく動的コンポーネント
  • データ管理用のPiniaストア

GitHubにあります

Nuxt3リソース

そして、最初に約束したように、実装に大いに役立った便利なNuxt3リソースのリストを以下に示します。彼らもあなたに有利なスタートを与えることを願っています:

結論

Nuxt 3はまだベータ版であり、うまく機能しない機能や十分に文書化されていない機能に遭遇する可能性があります。しかし、開発者の生活の質の向上をすでに楽しんでおり、本番環境で間もなく可能になるもののプレビューを入手できます。

Nuxtファンの方は、 Discordに参加して、Nuxt3の何が一番好きか教えてください🤗。

Headless CMSの導入をお考えでしょうか?

クラウドとマルチデバイスに最適化されたKentico Kontentをお試しください