{"id":22490136,"url":"https://github.com/NvdB31/nuxt-editable","last_synced_at":"2025-08-02T22:32:18.690Z","repository":{"id":226013220,"uuid":"766146656","full_name":"NvdB31/nuxt-editable","owner":"NvdB31","description":"Nuxt Editable is a free content editor UI to embed in your Nuxt site.","archived":false,"fork":false,"pushed_at":"2024-03-22T08:12:17.000Z","size":2616,"stargazers_count":25,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-23T17:53:27.408Z","etag":null,"topics":["cms","nuxt"],"latest_commit_sha":null,"homepage":"https://nuxt-editable-playground.vercel.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NvdB31.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"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-03-02T13:20:08.000Z","updated_at":"2024-04-22T03:02:32.000Z","dependencies_parsed_at":"2024-11-15T21:11:37.056Z","dependency_job_id":"7ebbf4f5-91b5-4948-8c06-9b4fe514b4cc","html_url":"https://github.com/NvdB31/nuxt-editable","commit_stats":null,"previous_names":["nvdb31/nuxt-editable"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NvdB31%2Fnuxt-editable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NvdB31%2Fnuxt-editable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NvdB31%2Fnuxt-editable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NvdB31%2Fnuxt-editable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NvdB31","download_url":"https://codeload.github.com/NvdB31/nuxt-editable/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228500849,"owners_count":17930144,"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","nuxt"],"created_at":"2024-12-06T17:21:50.760Z","updated_at":"2024-12-06T17:24:21.984Z","avatar_url":"https://github.com/NvdB31.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"[![Nuxt Editable Banner](./.github/assets/banner.svg)](https://nuxt-editable.nickvandenberg.dev)\n\n# Nuxt Editable\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\n**⚠️ Nuxt Editable is currently in alpha. Use with caution.**\n\nNuxt Editable is a free content editor UI to embed in your Nuxt site. It gives you a great editing experience by allowing you to click to edit content in-place.\n\n- [✨ \u0026nbsp;Release Notes](/CHANGELOG.md)\n- [🕹️ Online demo](https://nuxt-editable-playground.vercel.app/)\n- [🏀 Stackblitz](https://stackblitz.com/github/nvdb31/nuxt-editable?file=playground%2Fapp.vue)\n  \u003c!-- - [📖 \u0026nbsp;Documentation](https://example.com) --\u003e\n\n## Features\n\n- Drop-in a component to edit your Nuxt site with a **live preview**!\n- Works with _any_ content by defining your own schemas.\n- Bring your own data – integrates with any database or headless CMS.\n\n## Examples\n\nCheck out these examples to get up and running in no time:\n\n- [Firebase (Coming soon)](#)\n- [MongoDB (Coming soon)](#)\n- [PostgreSQL (Coming soon)](#)\n\n## Quick Setup\n\n**TL;DR** Add `NuxtEditableEditor` to your `app.vue`. Provide items through the `items` prop. Listen for data changes through `@change`. That's it! ✨\n\nHere's a step-by-step setup:\n\n### 1. Install\n\n```bash\n# Using pnpm\npnpm add nuxt-editable typescript tailwindcss\n\n# Using yarn\nyarn add nuxt-editable typescript tailwindcss\n\n# Using npm\nnpm install nuxt-editable typescript tailwindcss\n```\n\n### 2. Create configuration file and add module\n\nCreate a file called editable.config.ts in the root of your project. This will contain your editor configuration:\n\nNow, add `nuxt-editable` to the `modules` section of `nuxt.config.ts`, with a reference to your config file as second argument.\n\n```js\nimport editableConfig from './editable.config';\n\nexport default defineNuxtConfig({\n  modules: [['nuxt-editable', editableConfig]],\n});\n```\n\n### 3. Configure your collection schemes\n\nNuxt Editable requires a scheme to know what you data looks like. It uses this to render the tables and form fields. Here's an example for `Posts` collection:\n\n```js\n// editable.config.ts\n\nexport default {\n  collections: {\n    posts: {\n      name: {\n        singular: 'Post',\n        plural: 'Posts',\n      },\n      icon: 'i-heroicons-newspaper',\n      schema: {\n        title: {\n          type: EditableCollectionSchemaFieldType.Text,\n          help: 'A title for the post',\n          required: true,\n        },\n        slug: {\n          type: EditableCollectionSchemaFieldType.Text,\n          help: 'A URL-friendly slug for the post page',\n          required: true,\n        },\n        excerpt: {\n          type: EditableCollectionSchemaFieldType.Text,\n          help: 'A short excerpt of the post',\n        },\n        content: {\n          type: EditableCollectionSchemaFieldType.RichText,\n          help: 'The content of the post',\n        },\n      },\n    },\n  },\n};\n```\n\n### 4. Add the editor to your app\n\nYou can add the Editor component anywhere in your Nuxt app, but to allow the editor to be rendered regardless of which route you're on, it's probably best to add the editor to your `app.vue`.\n\n```html\n// app.vue\n\n\u003cNuxtEditableEditor\n  :user=\"currentEditorUser\"\n  :data=\"currentEditorData\"\n  :pending=\"isPendingEditorData\"\n  @change=\"onEditorChangeData\"\n  @request-data=\"onEditorRequestData\"\n/\u003e\n```\n\nUsers can bring up the editor by passing `?editable=true` in the route.\n\n### 6. Provide data to the editor\n\nWith your `Posts` collection defined, bringing up the editor will now list a Posts item. When a user clicks on a collection or a collection item, the editor requests data for it. You need to listen to the `requestData` event. Example:\n\n```js\n// app.vue\n\nconst currentEditorData = ref({\n    posts: []\n})\n\nconst onEditorRequestData = async (event: EditableRequestDataEvent) =\u003e {\n  isPendingEditorData.value = true\n  currentEditorData.value.posts = await $fetch(`/api/posts`)\n  isPendingEditorData.value = false\n}\n```\n\n### 7. Listen for data updates from the editor\n\nWhen a user makes a change, e.g. when creating, updating or deleting an item, the editor emits a `change` event. You need to listen for the `change` event and update data accordingly. Example:\n\n```js\n// app.vue\n\nconst onEditorChangeData = async (event: EditableChangeEvent) =\u003e {\n  const { type, payload } = event\n  isPendingEditorData.value = true\n\n  switch (type) {\n    // When creating an item\n    case EditableChangeEventType.Create:\n      $fetch(`/api/posts`, {\n        method: 'POST',\n        body: payload.data\n      })\n      break\n\n    // Other cases for updating and deleting here\n  }\n  isPendingEditorData.value = false\n\n  // Optional: Refresh the data on your current page so it reflects edits that have just been made!\n  refreshNuxtData()\n}\n```\n\n### 8. Add a user to the editor\n\nYou'll typically want to allow users to log in to the editor. You can provide the currently logged in user through the `user` prop. On the built-version of your Nuxt app, the Editor will default to a login screen if the `user` has not been provided. The editor emits a `login` and `logout` event for you to handle accordingly.\n\n## Enabling the Highlighter\n\nAllowing users to highlight and click to navigate to the editor item directly makes for a great UX. To enable this, you need to provide the editor a hint to which `collection` and primary key your item refers to. To make this easy, the module exposes a `v-editable` directive to your Nuxt app. Example:\n\n```html\n\u003ch1 v-editable=\"{ collection: 'posts', id: '23984832' }\"\u003eSome great post title\u003c/h1\u003e\n```\n\nYou'll need to provide the primary key as configured in your collections configuration.\n\n## Advanced configuration\n\n### Customize Editor UI\n\nNuxt Editable provides a flexible way to extend the editor UI to acommodate custom use-cases.\n\n#### Add buttons in list or form view\n\nTo add your own actions (such as buttons) to the list or form view, you can use a slot:\n\n```html\n// app.vue\n\n\u003cNuxtEditableEditor\n  :user=\"currentEditorUser\"\n  :data=\"currentEditorData\"\n  :pending=\"isPendingEditorData\"\n  @change=\"onEditorChangeData\"\n  @request-data=\"onEditorRequestData\"\n\u003e\n  \u003ctemplate #posts-list-actions\u003e\n    \u003c!-- Elements here will be shown alongside the buttons for the posts collection list --\u003e\n  \u003c/template\u003e\n\n  \u003ctemplate #posts-form-actions\u003e\n    \u003c!-- Elements here will be shown alongside the buttons for a posts form --\u003e\n  \u003c/template\u003e\n\u003c/NuxtEditableEditor/\u003e\n```\n\n## Schemes\n\nYour scheme fields can contain different types, such as `text`, `number`, `rich-text` and more. For a full list, refer to [`EditableCollectionSchemaFieldType`]().\n\n## Validation\n\nYour scheme can contain validators such as `required`, `minLength`, `date`. For a list of supported validators, refer to: [`EditableCollectionSchemaFieldValidator`]().\n\n## Roadmap\n\nNuxt Editable is in its early stages, so there's still a few things that are on my list to build in order to make this ready for production.\n\n### To do's\n\n- [ ] Add test coverage\n- [ ] Add pagination in the collection list UI\n- [ ] Add provider login UI configuration options for Github, Google, social media and the likes\n- [ ] Support file uploads with a UI configuration option to view a collection as a grid of files.\n\n### Future\n\nBeyond this, there's a lot more this project could become:\n\n- State: Keeping edits and new items in the local state so users can freely navigate around and leave the editor, without losing changes.\n- Publish: Instead of creating and update items directly, configure the editor to keep local changes changes in a batch, and allow the users to hit 'Publish', to commit all changes (e.g. as part of a database transaction).\n- Extendable UI: The ability to swap the default form fields out for your own custom ones, to cover complex use-cases.\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Generate type stubs\nnpm run dev:prepare\n\n# Develop with the playground\nnpm run dev\n\n# Build the playground\nnpm run dev:build\n\n# Run ESLint\nnpm run lint\n\n# Run Vitest\nnpm run test\nnpm run test:watch\n\n# Release new version\nnpm run release\n```\n\n\u003c!-- Badges --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-editable/latest.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[npm-version-href]: https://npmjs.com/package/nuxt-editable\n[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-editable.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[npm-downloads-href]: https://npmjs.com/package/nuxt-editable\n[license-src]: https://img.shields.io/npm/l/nuxt-editable.svg?style=flat\u0026colorA=020420\u0026colorB=00DC82\n[license-href]: https://npmjs.com/package/nuxt-editable\n[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n\n## Special thanks\n\nI couldn't have built Nuxt Editable without standing on the shoulders of giants. A special thanks goes to the incredible work done by:\n\n- [Nuxt UI](https://ui.nuxt.com) for the solid UI components the Editor is built with.\n- [Yup](https://github.com/jquense/yup) for form validation.\n- [Tiptap](https://tiptap.dev/) for the extremely well-built rich-text content editor.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNvdB31%2Fnuxt-editable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNvdB31%2Fnuxt-editable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNvdB31%2Fnuxt-editable/lists"}