🛠️ VitNode is still in development! You can try it out, but it is not recommended to use it now in production.
🔌 Plugins
Admin Pages

Admin Pages

Admin pages are the pages that are shown in the AdminCP.


Open Developer Tools

See how to open Developer Tools.

Create Navigation

Inside the Developer Tools tab, you will see the Navigation in AdminCP tab. Click on it to see the navigation of the plugin and click on Create button to create a new navigation.

Create button for navigation in Developer Tools Plugin

Fill the form

Fill the form with the required information and click on Create button to create the navigation.

Form for navigation in Developer Tools Plugin

Translation (i18n)

As you can see, the title of plugin and navigation item is a language key. You can add the language key inside the langs folder in {your_plugin_code}.json file in the frontend.

        • {your_plugin_code}.json
  • ℹ️

    If you have more than one language, you have to create a new file for each language. For example, if you have en and pl languages, you have to create en/{your_plugin_code}.json and pl/{your_plugin_code}.json files.

    Language Keys

    • Title - key is always {your_plugin_code}.admin.nav.title. For example: blog.admin.nav.title,
    • Navigation item - key is always {your_plugin_code}.admin.nav.{navigation_item_name}. For example: blog.admin.nav.categories.

    Here is an example of the language keys:

      "blog": {
        "admin": {
          "nav": {
            "title": "Blog",
            "categories": "Categories"

    Now you can see your navigation item in the AdminCP.

    Finish creating navigation in Developer Tools Plugin

    Page for AdminCP

    Create New File

    Thanks to NextJS App dir routing (opens in a new tab) structure you can create pages.tsx, layouts.tsx, loading.tsx states and error.tsx states for your plugin. All features are available in VitNode.

    Based on previus tutorial about create new navigation tab in AdminCP, you have to create a new file page.tsx. If you don't have a folder for your plugin, you have to create it.

                  • page.tsx
  • For example: frontend/app/[locale]/(admin)/admin/(auth)/blogs/categoires/page.tsx

    Write something

    Now you can write your page. Remember to export the component as default.

    export default function Page() {
      return <div>Hi from blog page for categories!</div>;
    Result page for AdminCP


    To save consistency in the AdminCP, we created admin folder in the frontend part. Inside the admin folder, you can create a new folder for your plugin and create a new page for the AdminCP.

            • categories-view.tsx
        • ...other files and folders
  • Example: Inside categories-view.tsx

    import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
    export const CategoriesBlogAdminView = () => {
      return (
            Hi from blog page for categories, but from template!

    and import it in page.tsx

    import { CategoriesBlogAdminView } from "@/admin/blog/views/categories/categories-view";
    export default function Page() {
      return <CategoriesBlogAdminView />;
    Result page for AdminCP with template