Send email from Nuxt with a Nitro server route.

1. Put the key in private runtime config.

   Declare the key in runtimeConfig with an empty default and set the real value through the environment. Keys at the top level are server-only; only the public block reaches the browser, and the key never goes there.

   nuxt.config.ts

   // nuxt.config.ts
   export default defineNuxtConfig({
     runtimeConfig: {
       // Private: available on the server only. Overridden at runtime by
       // the NUXT_NOTIX_API_KEY environment variable.
       notixApiKey: "",
       notixWebhookSecret: "",
   
       // Anything under public reaches the browser. The key never goes here.
       public: {},
     },
   });
   

   .env

   # .env (never committed)
   NUXT_NOTIX_API_KEY=nx_live_...
   NUXT_NOTIX_WEBHOOK_SECRET=whsec_...
   

2. Add a server route.

   A file under server/api is an endpoint; the .post.ts suffix limits it to POST. Pass the event to useRuntimeConfig so per-request overrides apply. The SDK answers { data, error }, so a failed send is a value you check and turn into a proper HTTP error.

   Server route (SDK)Server route (fetch)

   server/api/send.post.ts

   // server/api/send.post.ts
   import { Notix } from "notix-js";
   
   export default defineEventHandler(async (event) => {
     // Pass the event so runtime overrides apply per request.
     const { notixApiKey } = useRuntimeConfig(event);
     const notix = new Notix(notixApiKey);
   
     const { to, subject, html, orderId } = await readBody(event);
   
     const { data, error } = await notix.emails.send(
       { from: "receipts@acme.com", to, subject, html },
       // A retried request with the same key returns the first message.
       { idempotencyKey: `order-${orderId}-receipt` },
     );
   
     if (error) {
       throw createError({ statusCode: 502, statusMessage: error.message, data: error });
     }
     return { id: data?.emailId };
   });
   

3. Wire a contact page to its own route.

   The page only collects the form and shows the state. The route validates, sends and answers; the key stays on the server by construction.

   server/api/contact.post.ts

   // server/api/contact.post.ts
   import { Notix } from "notix-js";
   
   export default defineEventHandler(async (event) => {
     const { notixApiKey } = useRuntimeConfig(event);
     const { email, message } = await readBody<{ email: string; message: string }>(event);
   
     if (!email?.includes("@") || !message || message.length < 10) {
       throw createError({ statusCode: 400, statusMessage: "Add a valid email and a message." });
     }
   
     const notix = new Notix(notixApiKey);
     const { error } = await notix.emails.send({
       from: "contact@acme.com",
       to: "hello@acme.com",
       replyTo: email,
       subject: `New message from ${email}`,
       text: message,
     });
   
     if (error) {
       throw createError({ statusCode: 502, statusMessage: error.message });
     }
     return { ok: true };
   });
   

   pages/contact.vue

   <!-- pages/contact.vue -->
   <script setup lang="ts">
   const email = ref("");
   const message = ref("");
   const status = ref<"idle" | "sending" | "sent" | "error">("idle");
   
   async function submit() {
     status.value = "sending";
     try {
       await $fetch("/api/contact", {
         method: "POST",
         body: { email: email.value, message: message.value },
       });
       status.value = "sent";
     } catch {
       status.value = "error";
     }
   }
   </script>
   
   <template>
     <form @submit.prevent="submit">
       <input v-model="email" type="email" required placeholder="you@example.com" />
       <textarea v-model="message" required minlength="10" />
       <button type="submit" :disabled="status === 'sending'">
         {{ status === "sending" ? "Sending…" : "Send" }}
       </button>
       <p v-if="status === 'sent'">Thanks, we got it.</p>
       <p v-if="status === 'error'" role="alert">Something went wrong. Try again.</p>
     </form>
   </template>
   

4. Receive delivery events.

   Add a route for email.delivered, email.bounced and email.complained. Read the raw body, verify with constructEvent, and store the outcome against your own record.

   server/api/webhooks/notix.post.ts

   // server/api/webhooks/notix.post.ts
   import { Notix } from "notix-js";
   
   export default defineEventHandler(async (event) => {
     const { notixApiKey, notixWebhookSecret } = useRuntimeConfig(event);
     const webhooks = new Notix(notixApiKey).webhooks(notixWebhookSecret);
   
     // readRawBody, not readBody: the signature covers the exact bytes.
     const rawBody = (await readRawBody(event, "utf8")) ?? "";
   
     let notixEvent;
     try {
       notixEvent = webhooks.constructEvent(rawBody, { headers: getHeaders(event) });
     } catch (err) {
       throw createError({ statusCode: 400, statusMessage: (err as Error).message });
     }
   
     switch (notixEvent.type) {
       case "email.delivered":
       case "email.bounced":
       case "email.complained":
         // Record the outcome against your own order or user id here.
         break;
     }
     return "ok";
   });
   

5. Send one and read it back.

   Submit the form, then open the message in the dashboard: the log shows its status and every event as delivery progresses.

The Next.js guide is the same flow with server actions, and the Node.js guide shows the SDK, fetch and Nodemailer side by side. The free plan does not ask for a card.