https://github.com/maxlkatze/katzen-core
Katze is a Nuxt module that provides a headless CMS for your Nuxt app. Edit content directly in your Nuxt App, store your content in an Unstorage supported storage and deploy your content to the Edge or host it on your server.
https://github.com/maxlkatze/katzen-core
cms module nuxt unstorage
Last synced: 11 months ago
JSON representation
Katze is a Nuxt module that provides a headless CMS for your Nuxt app. Edit content directly in your Nuxt App, store your content in an Unstorage supported storage and deploy your content to the Edge or host it on your server.
- Host: GitHub
- URL: https://github.com/maxlkatze/katzen-core
- Owner: maxlkatze
- License: gpl-3.0
- Created: 2024-07-08T17:54:01.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-10-08T10:59:39.000Z (over 1 year ago)
- Last Synced: 2025-01-16T07:11:08.893Z (over 1 year ago)
- Topics: cms, module, nuxt, unstorage
- Language: Vue
- Homepage: https://www.npmjs.com/package/@maxlkatze/cms
- Size: 832 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Katze CMS - A Nuxt Module Headless CMS
[![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]
- [✨ Release Notes](/CHANGELOG.md)
- [🏀 Online playground](https://stackblitz.com/github/maxlkatze/katzen-core?file=playground%2Fapp.vue)
## Description
Katze is a Nuxt module that provides a headless CMS for your Nuxt app.
Edit content directly in your Nuxt App, store your content in an [Unstorage](https://unstorage.unjs.io/) supported storage
and deploy your content to the Edge or host it on your server.
_Feel free to contribute to this project by creating a pull request.🐱❤️_
## Features
- 📝 Edit content in your Nuxt app with /cms
- 🚀 Unstorage KV storage for edge deployment
- 🎨 Customisable content blocks (text, rich text, image)
- 📦 Easy to set up and use, just one configuration file
1. Install using one of the following package managers:
- NPM: `npm install @maxlkate/cms`
- Yarn: `yarn add @maxlkate/cms`
- PNPM: `pnpm add @maxlkate/cms`
- Bun: `bun install @maxlkate/cms`
2. Add `@maxlkatze/cms` to the `modules` section of `nuxt.config.js`
```js
{
modules: [
'@maxlkatze/cms'
]
}
```
That's it! You can now use CmsKatze in your Nuxt app ✨
## Usage
Following Route is now available in your Vue app:
'/cms/dashboard' - The CMS Dashboard
### Understanding Editable Routes
Every route in your Nuxt Router is displayed in the CMS editor
## Component-Based Usage
### KatzeText Component
Simple text editing for headlines, paragraphs, and other text elements:
```vue
```
### KatzeRichText Component
Rich text editing with HTML support:
```vue
```
### KatzeImage Component
Easy image management with on-the-fly replacements:
```vue
```
## Composable-Based Usage
### Editable Components
In addition to the component approach, you can define editable items using composables within your Vue component.
#### The importance of the kat-e attribute
The kat-e attribute is used to define the key of the editable element.
The CMS editor uses this key to identify the element and display its correct position and type.
#### Plain Text Component
```vue
const buttonText = useKatzeText({ key: 'buttonText', default: 'defaultValue' });
{{ buttonText }}
```
#### Rich Text Component
```vue
const richText = useKatzeRichText({ key: 'richText', default: 'defaultValue' });
```
##### The katze-rich-text component
The katze-rich-text component, unlike v-html, allows content to be rendered on the server and client at the same time.
This is important for SEO and performance reasons.
#### Image Component
```vue
const image = useKatzeImage({ key: 'image' });
![]()
```
## Configuration
You can configure Katze by adding the `katze` key to `nuxt.config.js`
```js
katze: {
// Configuration
users: [
{
name: 'your secret name', // default: "admin"
password: 'your secret password', // default: "admin"
},
],
secret: 'your secret key for token encryption',
projectLocation: './', // default: "./"
storage: {
type: 'fs', // default: "fs" | Unstorage Types supported
options: {
// UNSTORAGE OPTIONS
}
},
storageKey: 'storageKey', //default: "content.katze.json" | The key to store the content in the storage
deployHookURL: 'https://yourdeployhookurl.com' // default: ""
}
```
#### Users
The default user is `admin` with the password `admin`.
#### Secret
The secret is used to encrypt the Login token for the CMS editor.
#### Project Location
The project location is used to store the content.katze.json fileand to locate the public folder.
#### Storage
You can configure storage with unstorage drivers.
#### Storage Key
The key for the content value inside the storage. Can be left as default, when using storages with a base prefix.
##### Supported Unstorage Drivers
- azure-app-configuration - [Documentation](https://unstorage.unjs.io/drivers/azure)
- cloudflare-kv-binding - [Documentation](https://unstorage.unjs.io/drivers/cloudflare)
- fs - [Documentation](https://unstorage.unjs.io/drivers/fs)
- github - [Documentation](https://unstorage.unjs.io/drivers/github)
- mongodb - [Documentation](https://unstorage.unjs.io/drivers/mongodb)
- netlify-blobs - [Documentation](https://unstorage.unjs.io/drivers/netlify)
- planetscale - [Documentation](https://unstorage.unjs.io/drivers/planetscale)
- redis - [Documentation](https://unstorage.unjs.io/drivers/redis)
- vercel-kv - [Documentation](https://unstorage.unjs.io/drivers/vercel)
- upstash - [Documentation](https://unstorage.unjs.io/drivers/upstash)
- db0 - [Documentation](https://unstorage.unjs.io/drivers/db0)
Storage implementation example:
```js
storage: {
type: 'fs',
options: {
base: './',
}
}
```
#### Deploy Hook URL
The deploy hook URL is used to trigger a deploy when publishing content.
(Simple GET Request to the URL)
#### Lifecycle CRON Job
You can configure a cron job to run and keep the storage alive.
```
https://example.com/cms/api/lifecycle
```
## Contribution
1. Clone this repository
2. Install dependencies using `bun install`
3. Generate type stubs using `bun dev:prepare`
4. Develop with the playground using `bun dev`
Local development
```bash
# Install dependencies
bun install
# Generate type stubs
bun run dev:prepare
# Develop with the playground
bun run dev
# Build the playground
bun run dev:build
# Run ESLint
bun run lint
```
[npm-version-src]: https://img.shields.io/npm/v/@maxlkatze/cms/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/@maxlkatze/cms
[npm-downloads-src]: https://img.shields.io/npm/dm/@maxlkatze/cms.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npmjs.com/package/@maxlkatze/cms
[license-src]: https://img.shields.io/npm/l/@maxlkatze/cms.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/@maxlkatze/cms
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com