Skip to main content

Website Builder Architecture

warning

Written with ChatGPT, not refined yet

This document outlines a best-practice architecture for building a multi-tenant website builder using Vue, Nuxt, TailwindCSS, and PrimeVue. The solution supports dynamic tenant customization, per-tenant domain deployment, SSR with selective prerendering, and efficient resource usage (avoiding heavy build pipelines).

Key Points:

  • Multi-Tenancy: A single Nuxt 3 codebase serves all tenants. Tenant selection is based on the request’s hostname.
  • Customization: Tenants can fully customize layouts using a rich block/component library that includes PrimeVue components and custom blocks.
  • Deployment: Each tenant is served on their own domain while sharing the same underlying application.
  • Rendering: SSR is used for initial pages (for SEO and fast first paint), with selective prerendering/caching enabled for specific routes.
  • Scaling: The system is stateless and horizontally scalable in Kubernetes, with a single build process for all tenants.

1. Overall Architecture​

Below is a high-level Mermaid diagram illustrating the architecture flow:

Explanation:

  • User Request: Initiated from a tenant-specific domain.
  • Ingress Controller: Routes the request to the Kubernetes service.
  • Nuxt SSR Application: A single Nuxt app detects the tenant from the hostname and renders the page.
  • Tenant Content API: Fetches tenant-specific content from external backends or headless CMS systems.
  • Dynamic Component Loader: Supports on-the-fly loading/injection of custom Vue components.
  • CDN/Static Assets: Shared static assets (JS/CSS) are served via a CDN for caching and performance.

2. Multi-Tenancy with Nuxt​

Tenant Detection & Routing​

Use Nuxt middleware or dynamic routes to determine the tenant based on the hostname. For example:

// middleware/tenant.js
export default defineNuxtRouteMiddleware((to, from) => {
  const { host } = useRequestURL();
  // Map host to tenant ID (e.g., using a configuration object)
  const tenantId = mapHostToTenant(host);
  if (!tenantId) {
    throw createError({ statusCode: 404, message: 'Tenant not found' });
  }
  // Attach tenant info to the request context
  useState('tenant').value = tenantId;
});

Integrate this middleware into your Nuxt project so every request loads the correct tenant data.

Nuxt Configuration Example​

A sample nuxt.config.ts might look like this:

export default defineNuxtConfig({
  // Enable SSR for dynamic rendering
  ssr: true,

  // Define route rules for ISR (Incremental Static Regeneration)
  routeRules: {
    '/': { isr: 60 },
    '/about': { isr: 60 }
  },

  // Register modules (e.g., for multi-tenancy)
  modules: [
    'nuxt-multi-tenancy'
  ],

  // Configuration for multi-tenancy (example settings)
  multiTenancy: {
    tenantKey: 'tenant', // the key set in middleware
    allowedHosts: ['tenant1.example.com', 'tenant2.example.com']
  }
});

Note: You can use existing modules (e.g., nuxt-multi-tenancy) as a starting point and extend as needed.

3. Customization & Dynamic Component Loading​

Shared Component Library​

All tenants share a global library of components (e.g., PrimeVue UI components and Tailwind-styled blocks). Tenants can build pages by composing these blocks through a visual builder.

Dynamic Component Injection​

For tenant-specific components that are not part of the base library, load components dynamically at runtime:

// Example: Load a custom component definition from an API and register it
const loadTenantComponent = async (componentName) => {
  const response = await $fetch(`/api/tenant-component?name=${componentName}`);
  const componentDefinition = response.component;
  // Dynamically define and register the component
  const comp = defineComponent(componentDefinition);
  app.component(componentName, comp);
};

This approach allows tenants to extend the system without triggering a full rebuild.

4. Efficient Build & Deployment Strategies​

Single Build for All Tenants​

  • Build Once: A single nuxi build generates one set of production bundles.
  • Shared Docker Image: Create one Docker image with all node modules and deploy it across all tenants.

Kubernetes Deployment Example​

apiVersion: apps/v1
kind: Deployment
metadata:
  name: nuxt-app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: nuxt-app
  template:
    metadata:
      labels:
        app: nuxt-app
    spec:
      containers:
      - name: nuxt
        image: yourregistry/nuxt-app:latest
        ports:
        - containerPort: 3000
        readinessProbe:
          httpGet:
            path: /health
            port: 3000
        livenessProbe:
          httpGet:
            path: /health
            port: 3000

CDN for Assets: Serve static assets (JS, CSS) from a CDN to minimize load on the SSR service.

5. SSR, Prerendering & Dynamic Scaling​

SSR & Hybrid Rendering​

Nuxt 3 handles SSR by rendering the Vue app on the server and hydrating it on the client. Use route rules for ISR to prerender critical pages:

// nuxt.config.ts (excerpt)
routeRules: {
  '/': { isr: 60 },
  '/landing': { static: true }
}

Dynamic Scaling in Kubernetes​

  • Horizontal Pod Autoscaler (HPA): Automatically scales the number of Nuxt pods based on CPU usage or request latency.
  • Stateless Design: The Nuxt app is stateless—each request is handled independently—so scaling is straightforward.

Caching Layer​

Implement an external caching layer (e.g., Varnish or a CDN with caching capabilities) to cache rendered HTML and reduce SSR load.

6. On-the-Fly Updates Without Full Rebuilds​

Content Updates​

Tenant content (text, images, etc.) is fetched from external backends or headless CMSs, so content changes are reflected immediately on the next render without a new build.

Layout & Structure Changes​

Store page layouts and configurations in a database or CMS. When a tenant changes their page layout:

  • Update the configuration.
  • Purge or revalidate the cache for affected pages.
  • The next request picks up the changes immediately.

New Component Integration​

For truly new functionality:

  • Dynamic Injection: Load new Vue component definitions at runtime.
  • Micro-Frontends: Optionally use module federation to load tenant-specific bundles as remotes without rebuilding the entire core app.

7. Recommended Tech Stack & Tools​

  • Vue 3 & Nuxt 3: Core framework and SSR engine.
  • TailwindCSS: For rapid, customizable styling (using JIT mode).
  • PrimeVue: Provides a rich UI component library.
  • Headless CMS / Builder.io: For managing page content and layouts.
  • Kubernetes: For deployment, autoscaling, and dynamic load handling.
  • NGINX Ingress & cert-manager: For handling multi-domain routing and automated TLS certificates.
  • Redis / External Cache: To cache API responses and prerendered HTML.

8. Summary Diagram​

Below is another Mermaid diagram summarizing the build and deployment flow: