Vendure — Open Source Headless E-Commerce Framework

What Vendure Does

Vendure covers the complete commerce backend:

• Product Management: Products with variants, facets, collections, and custom fields
• Order Processing: Cart, checkout, payment, fulfillment, and refund workflows
• Customer Management: Customer accounts, addresses, order history, and groups
• Payment Integration: Stripe, PayPal, Mollie, Braintree, and custom payment methods
• Shipping: Configurable shipping methods with weight/price/zone-based calculation
• Tax: Flexible tax calculation with zone-based rates and tax categories
• Multi-Channel: Sell on web, mobile, POS, marketplace from a single backend
• Search: Full-text product search with Elasticsearch or database-based search
• Admin UI: Angular-based admin panel with real-time updates and extensibility

Architecture

┌──────────────┐     ┌──────────────┐     ┌──────────────┐
│  Storefront  │────▶│  Vendure     │────▶│  PostgreSQL /│
│  (Any FE)    │     │  Server      │     │  MySQL /     │
│  Next.js /   │     │  (NestJS)    │     │  SQLite      │
│  Remix / Vue │     │  GraphQL API │     └──────────────┘
└──────────────┘     └──────┬───────┘
                            │
                     ┌──────┴───────┐
                     │  Admin UI    │
                     │  (Angular)   │
                     └──────────────┘

Getting Started

Scaffold a New Project

npx @vendure/create my-shop

# Options:
# - Database: SQLite (dev) / PostgreSQL (prod) / MySQL
# - Populate sample data: Yes/No
# - Install email plugin: Yes/No

Project Structure

my-shop/
├── src/
│   ├── vendure-config.ts    # Main configuration
│   ├── plugins/             # Custom plugins
│   └── migrations/          # Database migrations
├── static/                  # Static assets
└── package.json

Configuration

// vendure-config.ts
import { VendureConfig } from '@vendure/core';
import { AdminUiPlugin } from '@vendure/admin-ui-plugin';
import { AssetServerPlugin } from '@vendure/asset-server-plugin';
import { EmailPlugin } from '@vendure/email-plugin';

export const config: VendureConfig = {
  apiOptions: {
    port: 3000,
    adminApiPath: 'admin-api',
    shopApiPath: 'shop-api',
  },
  dbConnectionOptions: {
    type: 'postgres',
    host: 'localhost',
    port: 5432,
    database: 'vendure',
    username: 'vendure',
    password: 'vendure',
  },
  plugins: [
    AssetServerPlugin.init({
      route: 'assets',
      assetUploadDir: './static/assets',
    }),
    AdminUiPlugin.init({
      route: 'admin',
      port: 3002,
    }),
    EmailPlugin.init({
      route: 'mailbox',
      handlers: defaultEmailHandlers,
      templatePath: './static/email/templates',
      transport: { type: 'smtp', host: 'localhost', port: 1025 },
    }),
  ],
};

Key Features

Plugin System

Vendure's plugin architecture is its core strength:

import { VendurePlugin, PluginCommonModule } from '@vendure/core';

@VendurePlugin({
  imports: [PluginCommonModule],
  entities: [ReviewEntity],
  shopApiExtensions: {
    schema: gql`
      type ProductReview {
        id: ID!
        rating: Int!
        body: String!
      }
      extend type Product {
        reviews: [ProductReview!]!
      }
    `,
    resolvers: [ProductReviewResolver],
  },
  adminApiExtensions: {
    schema: adminSchema,
    resolvers: [AdminReviewResolver],
  },
})
export class ReviewsPlugin {}

GraphQL API

# Shop API — Product query
query {
  product(slug: "laptop-pro") {
    name
    description
    variants {
      name
      price
      stockLevel
    }
    facetValues {
      name
      facet { name }
    }
  }
}

# Shop API — Add to cart
mutation {
  addItemToOrder(productVariantId: "1", quantity: 2) {
    ... on Order {
      code
      totalWithTax
      lines {
        productVariant { name }
        quantity
        linePriceWithTax
      }
    }
  }
}

Custom Fields

Extend any entity without writing migrations:

// vendure-config.ts
customFields: {
  Product: [
    { name: 'reviewRating', type: 'float', ui: { component: 'star-rating' } },
    { name: 'downloadUrl', type: 'string' },
  ],
  Customer: [
    { name: 'loyaltyPoints', type: 'int', defaultValue: 0 },
  ],
}

Vendure vs Alternatives

常见问题

Q: Vendure 适合什么规模的电商？ A: 从小型独立站到中大型电商平台都适用。Vendure 的插件架构和 TypeScript 类型安全使其特别适合需要定制化的中大型项目。对于简单的小店铺，Shopify 可能更快上手。

Q: 前端用什么框架？ A: Vendure 是完全 headless 的，可以用任何前端框架。官方提供 Next.js、Remix 和 Angular 的 storefront 模板。社区也有 Nuxt.js 和 SvelteKit 的模板。

Q: 支持多语言/多货币吗？ A: 支持。通过 Channel 功能可以配置不同的语言、货币和定价策略。每个 Channel 可以有独立的产品目录、价格和税率设置。

来源与致谢

• GitHub: vendure-ecommerce/vendure — 8K+ ⭐
• 官网: vendure.io