|
| 1 | +# Nuxt BCMS |
| 2 | + |
| 3 | +[![npm version][npm-version-src]][npm-version-href] |
| 4 | +[![npm downloads][npm-downloads-src]][npm-downloads-href] |
| 5 | +[![License][license-src]][license-href] |
| 6 | +[![Nuxt][nuxt-src]][nuxt-href] |
| 7 | + |
| 8 | +[BCMS](https://thebcms.com) integration for [Nuxt](https://nuxt.com). |
| 9 | + |
| 10 | +- [✨ Release Notes](CHANGELOG.md) |
| 11 | +- [📖 Documentation](https://thebcms.com/docs/integrations/nuxt-js) |
| 12 | + |
| 13 | +## Features |
| 14 | + |
| 15 | +- Seamless integration with BCMS |
| 16 | +- Out of the box components for rendering BCMS Images and content |
| 17 | +- Automatic TypeScript types generation from your BCMS |
| 18 | +- Easy access to BCMS Client API on server and client side |
| 19 | +- Support for Private and Public API Keys |
| 20 | + |
| 21 | +## Quick Setup |
| 22 | + |
| 23 | +Install the module to your Nuxt application with one command: |
| 24 | + |
| 25 | +```bash |
| 26 | +npx nuxi module add bcms |
| 27 | +``` |
| 28 | + |
| 29 | +Then in your `nuxt.config.ts` file, add BCMS configuration. You can find |
| 30 | +configuration information on BCMS dashboard in the `API Keys` section. |
| 31 | + |
| 32 | +```ts |
| 33 | +export default defineNuxtConfig({ |
| 34 | + modules: ['@nuxtjs/bcms'], |
| 35 | + // ... |
| 36 | + bcms: { |
| 37 | + orgId: process.env.BCMS_ORG_ID, |
| 38 | + instanceId: process.env.BCMS_INSTANCE_ID, |
| 39 | + privateClientOptions: { |
| 40 | + key: { |
| 41 | + id: process.env.BCMS_PRIVATE_KEY_ID, |
| 42 | + secret: process.env.BCMS_PRIVATE_KEY_SECRET, |
| 43 | + }, |
| 44 | + options: { |
| 45 | + injectSvg: true, |
| 46 | + }, |
| 47 | + }, |
| 48 | + publicClientOptions: { |
| 49 | + key: { |
| 50 | + id: process.env.BCMS_PUBLIC_KEY_ID, |
| 51 | + secret: process.env.BCMS_PUBLIC_KEY_SECRET, |
| 52 | + }, |
| 53 | + options: { |
| 54 | + injectSvg: true, |
| 55 | + }, |
| 56 | + }, |
| 57 | + }, |
| 58 | +}); |
| 59 | +``` |
| 60 | + |
| 61 | +That's it! You can now use BCMS in your Nuxt app ✨ |
| 62 | + |
| 63 | +For more information on how to use BCMS with Nuxt, check out the |
| 64 | +[documentation](https://thebcms.com/docs/integrations/nuxt-js). |
| 65 | + |
| 66 | +## Contribution |
| 67 | + |
| 68 | +<details> |
| 69 | + <summary>Local development</summary> |
| 70 | + |
| 71 | +```bash |
| 72 | +# Install dependencies |
| 73 | +npm install |
| 74 | + |
| 75 | +# Generate type stubs |
| 76 | + |
| 77 | +npm run dev:prepare |
| 78 | + |
| 79 | +# Develop with the playground |
| 80 | + |
| 81 | +npm run dev |
| 82 | + |
| 83 | +# Build the playground |
| 84 | + |
| 85 | +npm run dev:build |
| 86 | + |
| 87 | +# Run ESLint |
| 88 | + |
| 89 | +npm run lint |
| 90 | + |
| 91 | +# Run Vitest |
| 92 | + |
| 93 | +npm run test |
| 94 | +npm run test:watch |
| 95 | + |
| 96 | +# Release new version |
| 97 | + |
| 98 | +npm run release |
| 99 | + |
| 100 | +``` |
| 101 | + |
| 102 | +</details> |
| 103 | + |
| 104 | +<!-- Badges --> |
| 105 | + |
| 106 | +[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/bcms/latest.svg?style=flat&colorA=020420&colorB=00DC82 |
| 107 | +[npm-version-href]: https://npmjs.com/package/@nuxtjs/bcms |
| 108 | +[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxtjs/bcms.svg?style=flat&colorA=020420&colorB=00DC82 |
| 109 | +[npm-downloads-href]: https://npm.chart.dev/@nuxtjs/bcms |
| 110 | +[license-src]: https://img.shields.io/npm/l/@nuxtjs/bcms.svg?style=flat&colorA=020420&colorB=00DC82 |
| 111 | +[license-href]: https://npmjs.com/package/@nuxtjs/bcms |
| 112 | +[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js |
| 113 | +[nuxt-href]: https://nuxt.com |
| 114 | +``` |
0 commit comments