Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joepocalyptic/nuxt-builderio
Quickly and easily integrate Builder.io as a visual CMS for your Nuxt application.
https://github.com/joepocalyptic/nuxt-builderio
builderio cms headless-cms nuxt nuxt-module nuxt-modules nuxt3 page-builder
Last synced: 4 months ago
JSON representation
Quickly and easily integrate Builder.io as a visual CMS for your Nuxt application.
- Host: GitHub
- URL: https://github.com/joepocalyptic/nuxt-builderio
- Owner: Joepocalyptic
- License: mit
- Created: 2023-08-23T11:50:58.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-19T13:46:25.000Z (about 1 year ago)
- Last Synced: 2023-12-19T16:36:22.569Z (about 1 year ago)
- Topics: builderio, cms, headless-cms, nuxt, nuxt-module, nuxt-modules, nuxt3, page-builder
- Language: TypeScript
- Homepage: https://nuxt-builderio.joeypereira.dev
- Size: 521 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Nuxt Builder.io Module
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
This is an unofficial Nuxt module for [Builder.io](https://builder.io/). It allows you to quickly and easily integrate
Builder.io as a visual CMS for your Nuxt application.
**This module is currently in development.** It is not yet intended for production use and there will be bugs. Feel
free to help out by reporting bugs and submitting pull requests!
Furthermore, this module uses Builder's [second-generation Vue SDK](https://www.npmjs.com/package/@builder.io/sdk-vue), which is currently in beta.
- [đź“– Â Documentation](https://nuxt-builderio.joeypereira.dev)
- [✨  Release Notes](/CHANGELOG.md)
- [🏀 Online playground](https://stackblitz.com/github/Joepocalyptic/nuxt-builderio?file=playground%2Fapp.vue)
## Features
- Built for **Nuxt 3**
- Automatically register [custom components](https://www.builder.io/c/docs/custom-components-intro)
- Opinionated defaults to get started with no configuration
## Quick Setup
1. Add the `nuxt-builderio` dependency to your project
```bash
# Using pnpm
pnpm add -D nuxt-builderio
# Using yarn
yarn add --dev nuxt-builderio
# Using npm
npm install --save-dev nuxt-builderio
```
2. Add `nuxt-builderio` to the `modules` section of `nuxt.config.ts`
```js
export default defineNuxtConfig({
modules: [
'nuxt-builderio'
]
})
```
That's it! Read the [documentation](https://nuxt-builderio.joeypereira.dev) for more information, including
configuration and optimization options.
You can get started extremely quickly by using the provided `BuilderContent` component in a page:
```vue
// You can directly access the content returned by Builder with the `@load` event
const onContentLoaded = (content) => {
console.log(content)
}
```
This will automatically render Builder content with full support for SSR. If no `path` is provided, it
will default to the current page's path. If no `model` is provided, it will use the `defaultModel` provided
in the module options (this defaults to `page`).
The `throwError` prop will cause the component to throw a 404 error if the content is not found.
## Development
```bash
# 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
# Release new version
pnpm run release
```
[npm-version-src]: https://img.shields.io/npm/v/nuxt-builderio/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/nuxt-builderio
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-builderio.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/nuxt-builderio
[license-src]: https://img.shields.io/npm/l/nuxt-builderio.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/nuxt-builderio
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com