bcms
@thebcms/nuxt

Nuxt BCMS 模組

Nuxt BCMS

npm versionnpm downloadsLicenseNuxt

BCMSNuxt 的整合。

功能

  • 與 BCMS 的無縫整合
  • 開箱即用的元件,用於渲染 BCMS 影像和內容
  • 從您的 BCMS 自動生成 TypeScript 型別
  • 在伺服器端和客戶端輕鬆訪問 BCMS 客戶端 API
  • 支援私有和公共 API 金鑰

快速設定

透過一個命令將模組安裝到您的 Nuxt 應用中

npx nuxi module add bcms

然後在您的 nuxt.config.ts 檔案中,新增 BCMS 配置。您可以在 BCMS 面板的 API Keys 部分找到配置資訊。

export default defineNuxtConfig({
    modules: ['@thebcms/nuxt'],
    // ...
    bcms: {
        orgId: process.env.BCMS_ORG_ID,
        instanceId: process.env.BCMS_INSTANCE_ID,
        privateClientOptions: {
            key: {
                id: process.env.BCMS_PRIVATE_KEY_ID,
                secret: process.env.BCMS_PRIVATE_KEY_SECRET,
            },
            options: {
                injectSvg: true,
            },
        },
        publicClientOptions: {
            key: {
                id: process.env.BCMS_PUBLIC_KEY_ID,
                secret: process.env.BCMS_PUBLIC_KEY_SECRET,
            },
            options: {
                injectSvg: true,
            },
        },
    },
});

就是這樣!您現在可以在 Nuxt 應用中使用 BCMS 了 ✨

有關如何在 Nuxt 中使用 BCMS 的更多資訊,請查閱文件

貢獻

本地開發
# Install dependencies
npm install

# Generate type stubs

npm run dev:prepare

# Develop with the playground

npm run dev

# Build the playground

npm run dev:build

# Run ESLint

npm run lint

# Run Vitest

npm run test
npm run test:watch

# Release new version

npm run release