راهنمایی در استفاده از CMS

نیاز به پکیج یا پلتفرم نیست! چند خط کد میخواد.
شما مطمناً الان میدلور برای ادمین یا کاربر ثبت نام شده و... دارین، یکی هم برای نویسنده تو فرانت و بک بنویس و دسترسی مسیر یا صفحات رو براش تعریف کن، همین.
این موضوع ربطی به زبان و فریمورکی که استفاده میکنی نداره اما جهت راهنمایی تو ناکست برای صفحاتی که نویسنده اجازه داره:

<script setup>
definePageMeta({
    layout: "profile",
    middleware: "author"
});
</script>

تو فولدر middleware ناکست یک فایل author.js بساز و داخلش:

export default defineNuxtRouteMiddleware(() => {
    const { authUser } = useAuth();

    if (authUser.value.role !== 'author') {
        return navigateTo('/auth/login-register')
    }
});

ممنونم از راهنماییت
اما من منظورم این بود که از چی میتونم استفاده کنم که یک فضا بده به نویسنده که بتونه بنویسه. مثل همین قابلیت بولد کردن و چپ چین و راست چین کردن و عکس و لینک گذاشتن و بقیه موارد

میتونی از ادیتورهای مختلف استفاده کنی، نمونه ckeditor
از شانست الان پروژه جلوم بازه، طبق مستنداتش نصب کن:
ckeditor-nuxt

تو فایل editor.vue کدهای زیر رو بزار:
components/Editor.vue

<template>
<ckeditor v-model="data" :editor="ClassicEditor" :config="config" />
</template>

<script setup>
import { ref, computed } from 'vue';
import {
    ClassicEditor, Essentials, Paragraph, Heading,
    Bold, Italic, Strikethrough, Subscript, Code,
    Link, BlockQuote, CodeBlock, ImageInsert, AutoImage, Image, ImageResizeEditing, ImageResizeHandles, Base64UploadAdapter,
    Alignment, Indent, RemoveFormat, ShowBlocks,
    FontFamily, FontSize, FontColor, FontBackgroundColor,
    TodoList,
} from 'ckeditor5';
// import { FormatPainter } from 'ckeditor5-premium-features';
import { Ckeditor } from '@ckeditor/ckeditor5-vue';

import 'ckeditor5/ckeditor5.css';
// import 'ckeditor5-premium-features/ckeditor5-premium-features.css';

const data = ref('');

const config = computed(() => {
    return {
        licenseKey: 'GPL', // Or 'GPL'.
        plugins: [Essentials, Paragraph, Heading,
            Bold, Italic, Strikethrough, Subscript, Code,
            Link, BlockQuote, CodeBlock, ImageInsert, AutoImage, Image, ImageResizeEditing, ImageResizeHandles, Base64UploadAdapter,
            Alignment, Indent, RemoveFormat, ShowBlocks,
            FontFamily, FontSize, FontColor, FontBackgroundColor,
            TodoList,
        ],
        toolbar: ['heading', '|', 'undo', 'redo',
            '|', 'bold', 'italic', 'strikethrough', 'subscript', 'subscript', 'code',
            '|', 'Link', 'insertImage', 'blockQuote', 'codeBlock',
            '|', 'Alignment', 'indent', 'RemoveFormat', 'ShowBlocks',
            '|', 'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor',
            '|', 'todoList',
        ],
        language: 'fa',
        menuBar: {
            isVisible: true
        }
    };
});
</script>

تو پنل مدیریت و جایی که میخوایی استفاده کنی:

<template>
    <ClientOnly>
        <Editor v-model="data" />
    </ClientOnly>
</template>
<script setup>
const data = ref('');
</script>

بقیش طبق مستندات.

ممنونم از راهنماییت و لطفت