docs: nuxt

examples/aws-nuxt/app.vue

@@ -1,5 +1,24 @@
+<script setup>
+  const file = ref(null);
+  const { data } = await useFetch('/api/presigned');
+
+  async function onSubmit() {
+    const upload = file.value.files[0];
+    const image = await fetch(data.value, {
+      body: upload,
+      method: "PUT",
+      headers: {
+        "Content-Type": upload.type,
+        "Content-Disposition": `attachment; filename="${upload.name}"`,
+      },
+    });
+
+    window.location.href = image.url.split("?")[0];
+  }
+</script>
 <template>
-  <div>
-    <NuxtWelcome />
-  </div>
+  <form novalidate @submit.prevent="onSubmit">
+    <input type="file" ref="file" accept="image/png, image/jpeg" />
+    <button type="submit">Upload</button>
+  </form>
 </template>

examples/aws-nuxt/nuxt.config.ts

@@ -1,7 +1,8 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  devtools: { enabled: true },
+  compatibilityDate: '2024-04-03',
   nitro: {
-    preset: "aws-lambda",
+    preset: 'aws-lambda'
   },
-});
+  devtools: { enabled: true }
+})

examples/aws-nuxt/package.json

@@ -4,18 +4,17 @@
   "type": "module",
   "scripts": {
     "build": "nuxt build",
-    "dev": "sst dev nuxt dev",
+    "dev": "nuxt dev",
     "generate": "nuxt generate",
     "postinstall": "nuxt prepare",
     "preview": "nuxt preview"
   },
   "dependencies": {
-    "nuxt": "^3.11.2",
+    "@aws-sdk/client-s3": "^3.651.1",
+    "@aws-sdk/s3-request-presigner": "^3.651.1",
+    "nuxt": "^3.13.0",
     "sst": "latest",
-    "vue": "^3.4.21",
-    "vue-router": "^4.3.0"
-  },
-  "overrides": {
-    "nitropack": "npm:nitropack-nightly"
+    "vue": "latest",
+    "vue-router": "latest"
   }
 }

examples/aws-nuxt/public/robots.txt

@@ -0,0 +1 @@
+

examples/aws-nuxt/server/api/presigned.ts

@@ -0,0 +1,12 @@
+import { Resource } from "sst";
+import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
+import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
+
+export default defineEventHandler(async () => {
+  const command = new PutObjectCommand({
+    Key: crypto.randomUUID(),
+    Bucket: Resource.MyBucket.name,
+  });
+
+  return await getSignedUrl(new S3Client({}), command);
+})

examples/aws-nuxt/sst-env.d.ts

@@ -0,0 +1,17 @@
+/* This file is auto-generated by SST. Do not edit. */
+/* tslint:disable */
+/* eslint-disable */
+import "sst"
+export {}
+declare module "sst" {
+  export interface Resource {
+    "MyBucket": {
+      "name": string
+      "type": "sst.aws.Bucket"
+    }
+    "MyWeb": {
+      "type": "sst.aws.Nuxt"
+      "url": string
+    }
+  }
+}

examples/aws-nuxt/sst.config.ts

@@ -9,6 +9,11 @@ export default $config({
     };
   },
   async run() {
-    new sst.aws.Nuxt("MyWeb");
+    const bucket = new sst.aws.Bucket("MyBucket", {
+      public: true
+    });
+    new sst.aws.Nuxt("MyWeb", {
+      link: [bucket],
+    });
   },
 });