Add Nuxt example application

.agents/skills/create-example-app-with-integration/example/public/style.css

@@ -20,8 +20,9 @@ body {
   background: var(--background);
   color: var(--foreground);
   font-size: 16px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen, Ubuntu, Cantarell, sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+    Cantarell, sans-serif;
 }
 
 a {

.agents/skills/create-example-app-with-integration/example/public/theme.js

@@ -1,5 +1,5 @@
 "use strict";
-var mq = window.matchMedia("(prefers-color-scheme: dark)");
+const mq = globalThis.matchMedia("(prefers-color-scheme: dark)");
 document.body.classList.add(mq.matches ? "dark" : "light");
 mq.addEventListener("change", function (e) {
   document.body.classList.remove("light", "dark");

.agents/skills/create-example-app-with-integration/example/src/federation.ts

@@ -46,6 +46,7 @@ federation
       });
     },
   )
+  .mapHandle((_, username) => username === IDENTIFIER ? IDENTIFIER : null)
   .setKeyPairsDispatcher(async (_, identifier) => {
     if (identifier != IDENTIFIER) {
       return [];
@@ -54,9 +55,11 @@ federation
     if (keyPairs) {
       return keyPairs;
     }
-    const { privateKey, publicKey } = await generateCryptoKeyPair();
-    keyPairsStore.set(identifier, [{ privateKey, publicKey }]);
-    return [{ privateKey, publicKey }];
+    const rsa = await generateCryptoKeyPair("RSASSA-PKCS1-v1_5");
+    const ed25519 = await generateCryptoKeyPair("Ed25519");
+    const newKeyPairs = [rsa, ed25519];
+    keyPairsStore.set(identifier, newKeyPairs);
+    return newKeyPairs;
   });
 
 federation

examples/nuxt/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+.output
+.nuxt
+.data

examples/nuxt/README.md

@@ -0,0 +1,45 @@
+<!-- deno-fmt-ignore-file -->
+
+Fedify-Nuxt integration example application
+===========================================
+
+A comprehensive example of building a federated server application using
+[Fedify] with [Nuxt].  This example demonstrates how to create an
+ActivityPub-compatible federated social media server that can interact with
+other federated platforms like [Mastodon], [Misskey], and other ActivityPub
+implementations using [Fedify] and [Nuxt].
+
+[Fedify]: https://fedify.dev
+[Nuxt]: https://nuxt.com/
+[Mastodon]: https://mastodon.social/
+[Misskey]: https://misskey.io/
+
+
+Running the example
+-------------------
+
+~~~~ sh
+pnpm dev
+~~~~
+
+
+Communicate with other federated servers
+----------------------------------------
+
+1.  Tunnel your local server to the internet using `fedify tunnel`
+
+    ~~~~ sh
+    fedify tunnel 3000
+    ~~~~
+
+2.  Open the tunneled URL in your browser and check that the server is running
+    properly.
+
+3.  Search your handle and follow from other federated servers such as
+    [Mastodon] or [Misskey].
+
+    > [!NOTE]
+    > [ActivityPub Academy] is a great resource to learn how to interact
+    > with other federated servers using ActivityPub protocol.
+
+[ActivityPub Academy]: https://www.activitypub.academy/

examples/nuxt/app.vue

@@ -0,0 +1,13 @@
+<template>
+  <NuxtPage />
+</template>
+
+<script setup lang="ts">
+useHead({
+  link: [
+    { rel: "stylesheet", href: "/style.css" },
+    { rel: "icon", type: "image/svg+xml", href: "/fedify-logo.svg" },
+  ],
+  script: [{ src: "/theme.js", defer: true }],
+});
+</script>

examples/nuxt/nuxt.config.ts

@@ -0,0 +1,10 @@
+export default defineNuxtConfig({
+  modules: ["@fedify/nuxt"],
+  fedify: { federationModule: "#server/federation" },
+  ssr: true,
+  // The settings below loosen dev-server defenses to support tunnel-based
+  // federation testing (e.g., `fedify tunnel`). Not recommended for general
+  // Nuxt projects — remove or tighten before reusing this config.
+  devServer: { host: "0.0.0.0" },
+  vite: { server: { allowedHosts: true } },
+});

examples/nuxt/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "nuxt-example",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "description": "Fedify app with Nuxt integration",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "preview": "nuxt preview",
+    "start": "node .output/server/index.mjs"
+  },
+  "dependencies": {
+    "@fedify/fedify": "workspace:^",
+    "@fedify/nuxt": "workspace:^",
+    "@fedify/vocab": "workspace:^",
+    "@logtape/logtape": "catalog:",
+    "nuxt": "catalog:",
+    "h3": "catalog:"
+  },
+  "devDependencies": {
+    "typescript": "catalog:",
+    "@types/node": "catalog:"
+  }
+}