{"id":15164472,"url":"https://github.com/maxlkatze/katzen-core","last_synced_at":"2025-07-25T23:39:09.990Z","repository":{"id":249258131,"uuid":"825894970","full_name":"maxlkatze/katzen-core","owner":"maxlkatze","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 supported storage and deploy your content to the Edge or host it on your server.","archived":false,"fork":false,"pushed_at":"2024-10-08T10:59:39.000Z","size":852,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-16T07:11:08.893Z","etag":null,"topics":["cms","module","nuxt","unstorage"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@maxlkatze/cms","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maxlkatze.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-08T17:54:01.000Z","updated_at":"2024-10-22T04:20:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"11aaf2c7-1136-40df-a8f9-55bb991a94e7","html_url":"https://github.com/maxlkatze/katzen-core","commit_stats":{"total_commits":118,"total_committers":4,"mean_commits":29.5,"dds":0.652542372881356,"last_synced_commit":"4ed70ddd1bc2d6962db20c5f0e766298640e50e4"},"previous_names":["maxlkatze/katzen-core"],"tags_count":47,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxlkatze%2Fkatzen-core","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxlkatze%2Fkatzen-core/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxlkatze%2Fkatzen-core/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxlkatze%2Fkatzen-core/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxlkatze","download_url":"https://codeload.github.com/maxlkatze/katzen-core/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234767203,"owners_count":18883400,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cms","module","nuxt","unstorage"],"created_at":"2024-09-27T03:24:04.035Z","updated_at":"2025-07-25T23:39:09.975Z","avatar_url":"https://github.com/maxlkatze.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Katze CMS - A Nuxt Module Headless CMS\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\n![CmsKatze](/src/runtime/client/assets/logo_outlines.svg)\n\n- [✨ Release Notes](/CHANGELOG.md)\n- [🏀 Online playground](https://stackblitz.com/github/maxlkatze/katzen-core?file=playground%2Fapp.vue)\n\n## Description\nKatze is a Nuxt module that provides a headless CMS for your Nuxt app.\nEdit content directly in your Nuxt App, store your content in an [Unstorage](https://unstorage.unjs.io/) supported storage\nand deploy your content to the Edge or host it on your server.\n\n\n_Feel free to contribute to this project by creating a pull request.🐱❤️_\n\n## Features\n\n- 📝 \u0026nbsp;Edit content in your Nuxt app with /cms\n- 🚀 \u0026nbsp;Unstorage KV storage for edge deployment\n- 🎨 \u0026nbsp;Customisable content blocks (text, rich text, image)\n- 📦 \u0026nbsp;Easy to set up and use, just one configuration file\n\n1. Install using one of the following package managers:\n   - NPM: `npm install @maxlkate/cms`\n   - Yarn: `yarn add @maxlkate/cms`\n   - PNPM: `pnpm add @maxlkate/cms`\n   - Bun: `bun install @maxlkate/cms`\n2. Add `@maxlkatze/cms` to the `modules` section of `nuxt.config.js`\n\n```js\n{\n  modules: [\n    '@maxlkatze/cms'\n  ]\n}\n```\n\nThat's it! You can now use CmsKatze in your Nuxt app ✨\n\n## Usage\n\nFollowing Route is now available in your Vue app:\n'/cms/dashboard' - The CMS Dashboard\n![CmsKatze](/documentation/cms_dashboard.jpg)\n\n### Understanding Editable Routes\nEvery route in your Nuxt Router is displayed in the CMS editor\n![Edit Pages](/documentation/cms_page_edit.jpg)\n\n## Component-Based Usage\n\n### KatzeText Component\nSimple text editing for headlines, paragraphs, and other text elements:\n\n```vue\n\u003ctemplate\u003e\n  \u003cKatzeText\n    id=\"hero_title\"\n    element=\"h2\"\n    class=\"text-4xl font-extrabold text-gray-900\"\n    default-content=\"The future of content editing is here\"\n  /\u003e\n\u003c/template\u003e\n```\n\n### KatzeRichText Component\nRich text editing with HTML support:\n\n```vue\n\u003ctemplate\u003e\n  \u003cKatzeRichText\n    id=\"example_rich_text\"\n    default-content=\"\u003cp\u003eThis is \u003cstrong\u003erich text\u003c/strong\u003e that supports \u003cem\u003eformatting\u003c/em\u003e, \u003cu\u003eunderlining\u003c/u\u003e, and even \u003ca href='#'\u003elinks\u003c/a\u003e!\u003c/p\u003e\"\n    class=\"prose max-w-none\"\n  /\u003e\n\u003c/template\u003e\n```\n\n### KatzeImage Component\nEasy image management with on-the-fly replacements:\n\n```vue\n\u003ctemplate\u003e\n  \u003cKatzeImage\n    id=\"example_image\"\n    default-src=\"/test.svg\"\n    default-alt=\"Example image that can be replaced\"\n    class=\"max-w-md rounded-lg shadow-md\"\n  /\u003e\n\u003c/template\u003e\n```\n\n## Composable-Based Usage\n\n### Editable Components\nIn addition to the component approach, you can define editable items using composables within your Vue component.\n\n#### The importance of the kat-e attribute\nThe kat-e attribute is used to define the key of the editable element.\nThe CMS editor uses this key to identify the element and display its correct position and type.\n\n#### Plain Text Component\n```vue\n\u003cscript setup lang=\"ts\"\u003e\n  const buttonText = useKatzeText({ key: 'buttonText', default: 'defaultValue' });\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cbutton kat-e=\"buttonText\"\u003e{{ buttonText }}\u003c/button\u003e\n\u003c/template\u003e\n```\n\n#### Rich Text Component\n```vue\n\u003cscript setup lang=\"ts\"\u003e\n  const richText = useKatzeRichText({ key: 'richText', default: 'defaultValue' });\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cp\n    class=\"text-2xl min-size-5\"\n    kat-e=\"richText\"\n  \u003e\n    \u003ckatze-rich-text :content=\"richText\" /\u003e\n  \u003c/p\u003e\n\u003c/template\u003e\n```\n##### The katze-rich-text component\nThe katze-rich-text component, unlike v-html, allows content to be rendered on the server and client at the same time.\nThis is important for SEO and performance reasons.\n\n#### Image Component\n```vue\n\u003cscript setup lang=\"ts\"\u003e\n  const image = useKatzeImage({ key: 'image' });\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cimg\n    kat-e=\"image\"\n    class=\"size-52\"\n    :src=\"image.src\"\n    :alt=\"image.alt\"\n  /\u003e\n\u003c/template\u003e\n```\n\n## Configuration\n\nYou can configure Katze by adding the `katze` key to `nuxt.config.js`\n\n```js\n katze: {\n  // Configuration\n  users: [\n    {\n      name: 'your secret name', // default: \"admin\"\n      password: 'your secret password', // default: \"admin\"\n    },\n  ],\n  secret: 'your secret key for token encryption',\n  projectLocation: './', // default: \"./\"\n  storage: {\n    type: 'fs', // default: \"fs\" | Unstorage Types supported\n    options: {\n      // UNSTORAGE OPTIONS\n    }\n  },\n  storageKey: 'storageKey', //default: \"content.katze.json\" | The key to store the content in the storage\n  deployHookURL: 'https://yourdeployhookurl.com' // default: \"\"\n}\n```\n#### Users\nThe default user is `admin` with the password `admin`.\n\n#### Secret\nThe secret is used to encrypt the Login token for the CMS editor.\n\n#### Project Location\nThe project location is used to store the content.katze.json fileand to locate the public folder.\n\n#### Storage\nYou can configure storage with unstorage drivers.\n\n#### Storage Key\nThe key for the content value inside the storage. Can be left as default, when using storages with a base prefix.\n\n##### Supported Unstorage Drivers\n- azure-app-configuration - [Documentation](https://unstorage.unjs.io/drivers/azure)\n- cloudflare-kv-binding - [Documentation](https://unstorage.unjs.io/drivers/cloudflare)\n- fs - [Documentation](https://unstorage.unjs.io/drivers/fs)\n- github - [Documentation](https://unstorage.unjs.io/drivers/github)\n- mongodb - [Documentation](https://unstorage.unjs.io/drivers/mongodb)\n- netlify-blobs - [Documentation](https://unstorage.unjs.io/drivers/netlify)\n- planetscale - [Documentation](https://unstorage.unjs.io/drivers/planetscale)\n- redis - [Documentation](https://unstorage.unjs.io/drivers/redis)\n- vercel-kv - [Documentation](https://unstorage.unjs.io/drivers/vercel)\n- upstash - [Documentation](https://unstorage.unjs.io/drivers/upstash)\n- db0 - [Documentation](https://unstorage.unjs.io/drivers/db0)\n\nStorage implementation example:\n```js\nstorage: {\n  type: 'fs',\n  options: {\n    base: './',\n  }\n}\n```\n#### Deploy Hook URL\nThe deploy hook URL is used to trigger a deploy when publishing content.\n(Simple GET Request to the URL)\n\n#### Lifecycle CRON Job\nYou can configure a cron job to run and keep the storage alive.\n\n```\nhttps://example.com/cms/api/lifecycle\n```\n\n## Contribution\n\n1. Clone this repository\n2. Install dependencies using `bun install`\n3. Generate type stubs using `bun dev:prepare`\n4. Develop with the playground using `bun dev`\n\n\u003cdetails\u003e\n  \u003csummary\u003eLocal development\u003c/summary\u003e\n\n  ```bash\n  # Install dependencies\n  bun install\n  \n  # Generate type stubs\n  bun run dev:prepare\n  \n  # Develop with the playground\n  bun run dev\n  \n  # Build the playground\n  bun run dev:build\n  \n  # Run ESLint\n  bun run lint\n  ```\n\n\u003c/details\u003e\n\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/@maxlkatze/cms/latest.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[npm-version-href]: https://npmjs.com/package/@maxlkatze/cms\n\n[npm-downloads-src]: https://img.shields.io/npm/dm/@maxlkatze/cms.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[npm-downloads-href]: https://npmjs.com/package/@maxlkatze/cms\n\n[license-src]: https://img.shields.io/npm/l/@maxlkatze/cms.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[license-href]: https://npmjs.com/package/@maxlkatze/cms\n\n[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxlkatze%2Fkatzen-core","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxlkatze%2Fkatzen-core","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxlkatze%2Fkatzen-core/lists"}