A Nuxt module for creating editable content
npm install nuxt-data-mngrA nuxt module with easy to use components for creating editable content and storing them in a kv database using nitro.
- edit simple text in an input field
> ### Styling ✨
>
> All components are unstyled by default, except for some basic styles.
> You can easily add your own styles or use a CSS framework like Tailwind CSS to style the components.
Install the module to your Nuxt application with one command:
``bash`
npx nuxi module add nuxt-data-mngr
That's it! You can now use the nuxt data manager in your Nuxt app ✨
You can use this module with or without styles.
If you want to also have styled html tags (e.g.
, , etc.) you can enable the suiProse option and add the class sui-prose to a parent element.
This will add styles to the html tags used in the editable content.
Just configure the module in your nuxt.config.ts file:
`ts`
editableContent: {
storageKey: 'data',
styled: true,
suiProse: true,
auth: {
routeRules: [
{
// allow all get requests
roles: ['*'],
url: /^\/api\/editable\/.*/,
method: 'GET',
},
{
// editable route ('/api/editable/*')
roles: ['admin'],
url: /^\/api\/editable\/.*/,
method: 'POST',
},
],
initUsers: [
{
id: '1',
username: 'admin',
pwd: 'admin123',
role: 'admin',
tokens: [],
},
],
},
},
> Most components have an admin version that is used for editing content. The admin versions ends with Admin, e.g. .
Editable
-
-
-
-
-
Notification
-
-
-
-
-
Tiptap
-
-
-
Ui
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Auth
-
Composables
- useSaveHandler: A composable for handling save operations.
`vue
class="text-center w-fit"
/>
``
- [x] WYSIWYG editor Component
- [ ] Notification Service
- [ ] layout component
- [ ] file upload component
- [ ] styling in progress
- [x] add basic styles
- [x] dark mode
- [ ] add support for custom themes
- [ ] styling completed
- [ ] advanced styling
- [ ] Layout component/solution
- [ ] image upload component
- [ ] List component (cards, grid, etc.)
- [ ] auth
- [ ] auth: add support for route based auth rules
- [x] login
- [ ] logout
- [x] cookie based session management
- [x] route based auth rules
- [ ] extendable auth rules and type system