@hexdigital/nuxt-datocms

DatoCMS 的 Nuxt 模組

267 次下載•7 顆星•v1.1.5

jamiewarb

Nuxt DatoCMS

一個用於 DatoCMS 的 Nuxt 3 模組，DatoCMS 是一個出色的無頭 CMS。

✨ 釋出說明

功能

⛰ 與 Nuxt 的 useAsyncData() 整合，用於消除重複請求
🌲 預配置的預覽模式，用於草稿內容和即時更新
👌 自動匯入 vue-datocms 中的可組合項和元件
🧭 輕鬆為你的 DatoCMS 驅動的站點生成站點地圖（即將推出）
⚙️ 相容任何資料獲取庫（Villus、Apollo、axios 等）（即將推出）

使用

注意：此模組適用於 Nuxt 3。我們不提供 Nuxt 2 版本。

如果你是 DatoCMS 的首次使用者，請閱讀 Nuxt DatoCMS 頁面，以便在不到 5 分鐘內準備好一個專案。

安裝

將 @hexdigital/nuxt-datocms 依賴項新增到你的專案

pnpm add -D @hexdigital/nuxt-datocms
# yarn add --dev @hexdigital/nuxt-datocms
# npm install --save-dev @hexdigital/nuxt-datocms

將 @hexdigital/nuxt-datocms 新增到 nuxt.config.ts 的 modules 部分

export default defineNuxtConfig({
  modules: [
    '@hexdigital/nuxt-datocms'
  ]
});

配置此模組的選項。如果你想啟用檢視草稿內容，也請設定可選引數

export default defineNuxtConfig({
  modules: [
    '@hexdigital/nuxt-datocms'
  ],
  datocms: {
    publicReadOnlyToken: '<dato-cms-read-only-published-token>',

    // Optional - if you'd like to enable draft previews
    privateDraftEnabledToken: '<dato-cms-read-only-draft-enabled-token>',
    privatePreviewModePassword: 'showmethenewstuff', // A password required to enable draft previews
    privatePreviewModeEncryptionSecret: '14e6f2b5ebefb46270ed411e916c452a377c70f5d548cb6b672ec40d7e1ab8ef', // A hash that is stored on the User's device once draft is enabled, to prove it's legitimate. Change this to turn-off all currently active draft previews

    // Optional - if you'd like to allow user's to preview new content without needing to enter a password (beta documentation that's open for feedback, for example).
    disablePreviewPassword: true, // defaults to false

    // Optional - if you'd like to disable using the default server API routes for draft preview (so you can create your own, for example)
    registerApiHandlers: false, // defaults to true

    // Optional - do not include environment if you're not using environments, and usually no need to include endpoint either
    // environment: 'production', // defaults to undefined
    // endpoint: 'https://graphql.datocms.com',
  },
});

API 令牌可以在你的專案設定 > API 令牌中生成。參見下圖

就是這樣！你現在可以在 Nuxt 應用程式中使用 Nuxt DatoCMS 啦 ✨

請求內容

此模組暴露了兩個主要的可組合項：useAsyncDatoCms() 和 useDatoCms()。

在大多數情況下，我們建議使用 useAsyncDatoCms()。它是 Nuxt 的 useAsyncData() 的一個封裝，它允許我們在使用 SSR 時消除重複請求，以及其他好處。

// pages/index.vue

// This module sets `toHead` and `useAsyncDatoCms` to be auto-imported by Nuxt, if you have this enabled, so these imports aren't needed
import { toHead } from 'vue-datocms';
import { useAsyncDatoCms } from '@hexdigital/nuxt-datocms';

import { homepageQuery } from '~/apis/dato-cms/graphql/queries/getHomepage';

const { data } = await useAsyncDatoCms({ query: homepageQuery });

// An example of using page data to set your SEO tags for the page
useHead(() => toHead(data.value?.homepage?._seoMetaTags || {}));

如果你完全不打算使用 useAsyncData()，那麼你可以改用 useDatoCms() 可組合項。其行為是相同的，只是沒有圍繞 fetch 呼叫的 useAsyncData() 封裝。

模組開發

# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run dev:build

# Run ESLint
pnpm run lint

# Run Vitest
pnpm run test
pnpm run test:watch

# Release new version
pnpm run release

貢獻

歡迎所有貢獻。請參閱我們的貢獻指南。