Create Plugins

In this section we'll guide you through the process of creating your first VitNode plugin. Whether you're building a simple feature or a complex application, VitNode's plugin system has got you covered.

By creating a plugin, you can extend the functionality like:

• 🚀 APIs: Build your own RESTful,
• 🧩 UI Components: Create reusable components for your application,
• 📄 Pages and Layouts: Define custom pages and layouts for your application,
• ⚡ Middleware: Add custom middleware to handle requests and responses,
• 🗄️ Database Models: Define your own database models and schemas,
• 🔗 Integrations: Connect with third-party services and APIs.
• ⚙️ Custom Logic: Implement any custom logic you need for your application.
• 🌟 And much more!

Prerequisites

Create a Plugin

bun create vitnode-app@canary --plugin

pnpm create vitnode-app@canary --plugin

npx create-vitnode-app@canary --plugin

Add Translations

VitNode is i18n-first: render user-facing text through translations rather than hardcoding it. Your plugin owns its languages and hands them to VitNode - apps never copy them.

{
  "{your_plugin}": {
    "hello": "Hello World"
  }
}

import type { LocaleMessagesMap } from "@vitnode/core/lib/i18n/types";

const messages: LocaleMessagesMap = {
  en: async () => await import("./en.json", { with: { type: "json" } }),
};

export default messages;

Register that barrel in config.tsx (buildPlugin) with messages, and your strings show up on the frontend.

Keys have to sit under your plugin's namespace, or they collide with core. The details are in Namespaces and Server-side.

Prerequisites

Ignore (plugins) Folders

Before diving into plugin development, please ignore all (plugins) folders form search results in your IDE. These folders are generated by VitNode and contain the plugin code, which is not meant to be modified directly.

If you're using VS Code, this configuration is provided out-of-the-box via the .vscode/settings.json file.