feat(website-builder): add Nuxt starter kit configuration (#5265)

adrians5j · web-flow · commit c52ef1e9f3aa · 2026-06-26T12:06:55.000+02:00
diff --git a/packages/admin-ui/src/Drawer/Drawer.stories.tsx b/packages/admin-ui/src/Drawer/Drawer.stories.tsx
@@ -188,6 +188,7 @@ export const WithTabs: Story = {
         children: (
             <>
                 <Tabs
+                    separator={true}
                     spacing={"lg"}
                     tabs={[
                         <Tabs.Tab
diff --git a/packages/api-website-builder/src/exports/api/website-builder/nuxt.ts b/packages/api-website-builder/src/exports/api/website-builder/nuxt.ts
@@ -0,0 +1 @@
+export { NuxtConfig } from "~/features/nuxt/abstractions.js";
diff --git a/packages/api-website-builder/src/features/nextjs/NextjsConfig.ts b/packages/api-website-builder/src/features/nextjs/NextjsConfig.ts
@@ -32,8 +32,8 @@ class NextjsConfigImpl implements Abstraction.Interface {
                 DESCRIPTION: `This is a configuration for <a href="{STARTER_KIT_LINK}" target="_blank">Webiny Next.js starter kit:</a>`,
                 STARTER_KIT_LINK: `https://github.com/webiny/website-builder-nextjs`,
                 API_TOKEN: apiKey ? apiKey.token : "{API_KEY_TOKEN}",
-                API_HOST: domains.apiHost ?? "",
-                ADMIN_HOST: domains.adminHost ?? "",
+                API_HOST: domains.apiHost ?? "{API_HOST_URL}",
+                ADMIN_HOST: domains.adminHost ?? "{ADMIN_HOST_URL}",
                 TENANT_ID: tenant.id
             })
             .add("description", "{DESCRIPTION}")
diff --git a/packages/api-website-builder/src/features/nuxt/NuxtConfig.ts b/packages/api-website-builder/src/features/nuxt/NuxtConfig.ts
@@ -0,0 +1,76 @@
+import { NuxtConfig as Abstraction } from "~/features/nuxt/abstractions.js";
+import { TenantContext } from "@webiny/api-core/features/tenancy/TenantContext/index.js";
+import { MarkdownContentBuilder } from "~/features/nextjs/MarkdownContentBuilder.js";
+import { ServiceDiscovery } from "@webiny/api-core/features/serviceDiscovery/index.js";
+import { ApiKeysRepository } from "@webiny/api-core/features/security/apiKeys/shared/abstractions.js";
+
+class NuxtConfigImpl implements Abstraction.Interface {
+    constructor(
+        private tenantContext: TenantContext.Interface,
+        private apiKeyRepo: ApiKeysRepository.Interface
+    ) {}
+
+    async execute(): Abstraction.Return {
+        const tenant = this.tenantContext.getTenant();
+        const apiKeyResult = await this.apiKeyRepo.getBySlug("website-builder");
+        const apiKey = apiKeyResult.isOk() ? apiKeyResult.value : null;
+        const domains = await this.getDomains();
+
+        const envVars = [
+            `WEBINY_API_KEY={API_TOKEN}`,
+            `WEBINY_API_HOST={API_HOST}`,
+            `WEBINY_API_TENANT={TENANT_ID}`
+        ];
+
+        if (domains.adminHost) {
+            envVars.push(`WEBINY_ADMIN_HOST={ADMIN_HOST}`);
+        }
+
+        const builder = new MarkdownContentBuilder();
+        builder
+            .setVariables({
+                DESCRIPTION: `This is a configuration for <a href="{STARTER_KIT_LINK}" target="_blank">Webiny Nuxt starter kit:</a>`,
+                STARTER_KIT_LINK: `https://github.com/webiny/website-builder-nuxt`,
+                API_TOKEN: apiKey ? apiKey.token : "{API_KEY_TOKEN}",
+                API_HOST: domains.apiHost ?? "{API_HOST_URL}",
+                ADMIN_HOST: domains.adminHost ?? "{ADMIN_HOST_URL}",
+                TENANT_ID: tenant.id
+            })
+            .add("description", "{DESCRIPTION}")
+            .add("dotEnvStart", "```dotenv")
+            .add("dotEnvBody", envVars.join("\n"))
+            .add("dotEnvEnd", "```");
+
+        return builder;
+    }
+
+    private async getDomains() {
+        const manifest = await ServiceDiscovery.load();
+
+        const domains: Record<string, string | null> = {
+            apiHost: null,
+            adminHost: null
+        };
+
+        if (!manifest) {
+            return domains;
+        }
+
+        const { api, admin } = manifest;
+
+        if (api?.cloudfront) {
+            domains.apiHost = api.cloudfront.domain;
+        }
+
+        if (admin?.cloudfront) {
+            domains.adminHost = admin.cloudfront.domain;
+        }
+
+        return domains;
+    }
+}
+
+export const NuxtConfig = Abstraction.createImplementation({
+    implementation: NuxtConfigImpl,
+    dependencies: [TenantContext, ApiKeysRepository]
+});
diff --git a/packages/api-website-builder/src/features/nuxt/abstractions.ts b/packages/api-website-builder/src/features/nuxt/abstractions.ts
@@ -0,0 +1,13 @@
+import { createAbstraction } from "@webiny/feature/api";
+import type { IMarkdownContentBuilder } from "~/features/nextjs/MarkdownContentBuilder.js";
+
+export interface INuxtConfig {
+    execute(): Promise<IMarkdownContentBuilder>;
+}
+
+/** Configuration for Nuxt website rendering. */
+export const NuxtConfig = createAbstraction<INuxtConfig>("Wb/NuxtConfig");
+export namespace NuxtConfig {
+    export type Interface = INuxtConfig;
+    export type Return = Promise<IMarkdownContentBuilder>;
+}
diff --git a/packages/api-website-builder/src/features/nuxt/feature.ts b/packages/api-website-builder/src/features/nuxt/feature.ts
@@ -0,0 +1,9 @@
+import { createFeature } from "@webiny/feature/api";
+import { NuxtConfig } from "./NuxtConfig.js";
+
+export const NuxtFeature = createFeature({
+    name: "WebsiteBuilder/Nuxt",
+    register(container) {
+        container.register(NuxtConfig);
+    }
+});
diff --git a/packages/api-website-builder/src/features/nuxt/index.ts b/packages/api-website-builder/src/features/nuxt/index.ts
@@ -0,0 +1 @@
+export { NuxtConfig } from "./abstractions.js";
diff --git a/packages/api-website-builder/src/graphql/nuxt/NuxtGraphQLSchema.ts b/packages/api-website-builder/src/graphql/nuxt/NuxtGraphQLSchema.ts
@@ -0,0 +1,53 @@
+import { IdentityContext } from "@webiny/api-core/features/security/IdentityContext/index.js";
+import NotAuthorizedResponse from "@webiny/api-core/graphql/security/NotAuthorizedResponse.js";
+import { ErrorResponse, Response } from "@webiny/handler-graphql";
+import { CoreGraphQLSchemaFactory } from "@webiny/handler-graphql/graphql/abstractions.core.js";
+import { NuxtConfig } from "~/features/nuxt/index.js";
+import { GraphQLSchemaBuilder } from "@webiny/handler-graphql/features/GraphQLSchemaBuilder/abstractions.js";
+
+class Schema implements CoreGraphQLSchemaFactory.Interface {
+    public async execute(builder: GraphQLSchemaBuilder.Interface): CoreGraphQLSchemaFactory.Return {
+        builder.addTypeDefs(/* GraphQL */ `
+            type NuxtConfigResponse {
+                data: String
+                error: WbError
+            }
+
+            extend type WbQuery {
+                getNuxtConfig: NuxtConfigResponse
+            }
+        `);
+
+        builder.addResolver({
+            dependencies: [IdentityContext, NuxtConfig],
+            path: "WbQuery.getNuxtConfig",
+            resolver(identityContext: IdentityContext.Interface, nuxtConfig: NuxtConfig.Interface) {
+                return async () => {
+                    const identity = identityContext.getIdentity();
+                    if (!identity.isAdmin()) {
+                        return new NotAuthorizedResponse();
+                    }
+
+                    const permission = await identityContext.getPermission("wb.settings");
+                    if (!permission) {
+                        return new ErrorResponse({
+                            code: "WebsiteBuilder/Settings/NotAuthorized",
+                            message: "Not authorized!"
+                        });
+                    }
+
+                    const config = await nuxtConfig.execute();
+
+                    return new Response(config.build());
+                };
+            }
+        });
+
+        return builder;
+    }
+}
+
+export const NuxtGraphQLSchema = CoreGraphQLSchemaFactory.createImplementation({
+    implementation: Schema,
+    dependencies: []
+});
diff --git a/packages/api-website-builder/src/index.ts b/packages/api-website-builder/src/index.ts
@@ -33,6 +33,8 @@ import { WbPermissionsFeature } from "~/features/permissions/feature.js";
 import { ApiKeyInstallerFeature } from "~/features/installer/feature.js";
 import { NextjsGraphQLSchema } from "~/graphql/nextjs/NextjsGraphQLSchema.js";
 import { NextjsFeature } from "~/features/nextjs/feature.js";
+import { NuxtGraphQLSchema } from "~/graphql/nuxt/NuxtGraphQLSchema.js";
+import { NuxtFeature } from "~/features/nuxt/feature.js";
 import { ListDeletedPagesFeature } from "~/features/pages/ListDeletedPages/feature.js";
 import { TrashPageFeature } from "~/features/pages/TrashPage/feature.js";
 import { RestorePageFeature } from "~/features/pages/RestorePage/feature.js";
@@ -98,11 +100,13 @@ const createContext = () => {
             MovePageFeature.register(container);
             ApiKeyInstallerFeature.register(container);
             NextjsFeature.register(container);
+            NuxtFeature.register(container);
             WbWebhooksFeature.register(container);
             // TenantModelExtensionFeature.register(container);
 
             // Register GraphQL
             container.register(NextjsGraphQLSchema);
+            container.register(NuxtGraphQLSchema);
         },
         { name: "wb.createContext" }
     );
diff --git a/packages/app-website-builder/src/Extension.tsx b/packages/app-website-builder/src/Extension.tsx
@@ -15,6 +15,7 @@ import { Routes } from "~/routes.js";
 import { PagesWidget } from "~/modules/widgets/PagesWidget.js";
 import { Extension as NavigationExtension } from "./presentation/navigation/Extension.js";
 import { NextjsConfigFeature } from "~/presentation/navigation/NextjsConfig/feature.js";
+import { NuxtConfigFeature } from "~/presentation/navigation/NuxtConfig/feature.js";
 import { WB_PERMISSIONS_SCHEMA } from "~/constants.js";
 import { WbPermissionsFeature } from "~/features/permissions/feature.js";
 import { HasPermission } from "~/presentation/security/HasPermission.js";
@@ -46,6 +47,7 @@ export const Extension = () => {
         <>
             <RegisterFeature feature={SharedPageInfrastructureFeature} />
             <RegisterFeature feature={NextjsConfigFeature} />
+            <RegisterFeature feature={NuxtConfigFeature} />
             <RegisterFeature feature={WbPermissionsFeature} />
             <RegisterFeature feature={TranslatePageFeature} />
             <RegisterFeature feature={DeletePageFeature} />
diff --git a/packages/app-website-builder/src/presentation/navigation/Extension.tsx b/packages/app-website-builder/src/presentation/navigation/Extension.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { AdminConfig, useToggler } from "@webiny/app-admin";
-import { NexjsConfigDialog } from "./NextjsConfig/NextjsConfigDialog.js";
+import { StarterKitConfigDialog } from "./StarterKitConfigDialog.js";
 
 const { Menu } = AdminConfig;
 
@@ -9,12 +9,12 @@ export const Extension = React.memo(() => {
 
     return (
         <>
-            <NexjsConfigDialog open={on} onClose={toggleOff} />
+            <StarterKitConfigDialog open={on} onClose={toggleOff} />
             <Menu
-                name={"wb.nextjs"}
+                name={"wb.starterKit"}
                 parent={"wb"}
                 pin={"end"}
-                element={<Menu.Item text={"Configure Next.js"} onClick={toggleOn} />}
+                element={<Menu.Item text={"Configure Starter Kit"} onClick={toggleOn} />}
             />
         </>
     );
diff --git a/packages/app-website-builder/src/presentation/navigation/NuxtConfig/NuxtConfigGateway.ts b/packages/app-website-builder/src/presentation/navigation/NuxtConfig/NuxtConfigGateway.ts
@@ -0,0 +1,57 @@
+import { NuxtConfigGateway as GatewayAbstraction } from "./abstractions.js";
+import { MainGraphQLClient } from "@webiny/app/features/mainGraphQLClient/index.js";
+
+const GET_NUXT_CONFIG = /* GraphQL */ `
+    query GetNuxtConfig {
+        websiteBuilder {
+            getNuxtConfig {
+                data
+                error {
+                    code
+                    message
+                    data
+                }
+            }
+        }
+    }
+`;
+
+type GetNuxtConfigResponse = {
+    websiteBuilder: {
+        getNuxtConfig:
+            | {
+                  data: GatewayAbstraction.NuxtConfigDTO;
+                  error: null;
+              }
+            | {
+                  data: null;
+                  error: {
+                      code: string;
+                      message: string;
+                      data: any;
+                  };
+              };
+    };
+};
+
+class NuxtGraphQLGateway implements GatewayAbstraction.Interface {
+    constructor(private client: MainGraphQLClient.Interface) {}
+
+    async getConfig(): Promise<GatewayAbstraction.NuxtConfigDTO> {
+        const response = await this.client.execute<GetNuxtConfigResponse>({
+            query: GET_NUXT_CONFIG
+        });
+
+        const envelope = response.websiteBuilder.getNuxtConfig;
+        if (envelope.error) {
+            throw new Error(envelope.error.message);
+        }
+
+        return envelope.data;
+    }
+}
+
+export const NuxtConfigGateway = GatewayAbstraction.createImplementation({
+    implementation: NuxtGraphQLGateway,
+    dependencies: [MainGraphQLClient]
+});
diff --git a/packages/app-website-builder/src/presentation/navigation/NuxtConfig/NuxtConfigPresenter.ts b/packages/app-website-builder/src/presentation/navigation/NuxtConfig/NuxtConfigPresenter.ts
@@ -0,0 +1,34 @@
+import { makeAutoObservable, runInAction } from "mobx";
+import {
+    NuxtConfigPresenter as PresenterAbstraction,
+    NuxtConfigRepository
+} from "./abstractions.js";
+
+class NuxtConfigPresenterImpl implements PresenterAbstraction.Interface {
+    private loading = false;
+
+    constructor(private repository: NuxtConfigRepository.Interface) {
+        makeAutoObservable(this);
+    }
+
+    get vm(): PresenterAbstraction.ViewModel {
+        return {
+            loading: this.loading,
+            config: this.repository.getConfig()
+        };
+    }
+
+    init(): void {
+        this.loading = true;
+        this.repository.loadConfig().then(() => {
+            runInAction(() => {
+                this.loading = false;
+            });
+        });
+    }
+}
+
+export const NuxtConfigPresenter = PresenterAbstraction.createImplementation({
+    implementation: NuxtConfigPresenterImpl,
+    dependencies: [NuxtConfigRepository]
+});
diff --git a/packages/app-website-builder/src/presentation/navigation/NuxtConfig/NuxtConfigRepository.ts b/packages/app-website-builder/src/presentation/navigation/NuxtConfig/NuxtConfigRepository.ts
@@ -0,0 +1,38 @@
+import { makeAutoObservable, runInAction } from "mobx";
+import {
+    NuxtConfigRepository as RepositoryAbstraction,
+    NuxtConfigGateway,
+    NuxtConfig
+} from "./abstractions.js";
+
+class NuxtConfigRepositoryImpl implements RepositoryAbstraction.Interface {
+    private config: NuxtConfig | undefined = undefined;
+
+    constructor(private gateway: NuxtConfigGateway.Interface) {
+        makeAutoObservable(this);
+    }
+
+    getConfig(): NuxtConfig | undefined {
+        return this.config;
+    }
+
+    async loadConfig(): Promise<void> {
+        if (this.config) {
+            return;
+        }
+
+        try {
+            const config = await this.gateway.getConfig();
+            runInAction(() => {
+                this.config = config;
+            });
+        } catch {
+            // Ignore errors for now.
+        }
+    }
+}
+
+export const NuxtConfigRepository = RepositoryAbstraction.createImplementation({
+    implementation: NuxtConfigRepositoryImpl,
+    dependencies: [NuxtConfigGateway]
+});
diff --git a/packages/app-website-builder/src/presentation/navigation/NuxtConfig/abstractions.ts b/packages/app-website-builder/src/presentation/navigation/NuxtConfig/abstractions.ts
diff --git a/packages/app-website-builder/src/presentation/navigation/NuxtConfig/feature.ts b/packages/app-website-builder/src/presentation/navigation/NuxtConfig/feature.ts
diff --git a/packages/app-website-builder/src/presentation/navigation/StarterKitConfigDialog.tsx b/packages/app-website-builder/src/presentation/navigation/StarterKitConfigDialog.tsx
diff --git a/packages/webiny/package.json b/packages/webiny/package.json
diff --git a/packages/webiny/src/api/website-builder/nuxt.ts b/packages/webiny/src/api/website-builder/nuxt.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { NuxtConfig } from "~/features/nuxt/abstractions.js";`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { NuxtConfig } from "./abstractions.js";`