commit

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app/assets/global.css

@@ -0,0 +1,11 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+:root {
+    --font-sans: "Space Grotesk", sans-serif;
+
+}
+
+.inter {
+    font-family: "Inter";
+}

app/pages/index.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+    function set_color(color: string) {
+
+    }
+
+    const ui_colors_dropdown = ref([
+        {
+            label: "Blue",
+            class: "",
+            onselect: () => set_color("blue")
+            
+        },
+        {
+            label: "Red",
+            onselect: () => set_color("red")
+        },
+        {
+            label: "Green",
+            onselect: () => set_color("green")
+        },
+        {
+            label: "Pink",
+            onselect: () => set_color("pink")
+        },
+        {
+            label: "Purple",
+            onselect: () => set_color("purple")
+        }
+    ])
+
+</script>
+
+<template>
+    <UHeader title="">
+        <template #right>
+            <UColorModeButton />
+            <UDropdownMenu :items="ui_colors_dropdown">
+                <UButton icon="lucide:palette" variant="ghost" color="neutral" />
+            </UDropdownMenu>
+        </template>
+    </UHeader>
+    <div class="justify-center flex flex-col">
+        <h1 class="inter text-8xl font-bold text-center">Youtube to MP3</h1>
+        <UInput class="self-center" size="xl"></UInput>
+    </div>
+
+</template>

nuxt.config.ts

@@ -0,0 +1,11 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+import tailwindcss from "@tailwindcss/vite"
+export default defineNuxtConfig({
+  compatibilityDate: '2025-07-15',
+  devtools: { enabled: true },
+  modules: [ "@nuxt/ui", "@nuxt/image", "@nuxt/fonts", "@nuxtjs/color-mode"],
+  css: [ "@/assets/global.css" ],
+  vite: {
+    plugins: [ tailwindcss() ]
+  }
+})

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "yt2mp3",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@nuxt/fonts": "^0.12.1",
+    "@nuxt/icon": "^2.2.0",
+    "@nuxt/image": "^2.0.0",
+    "@nuxt/ui": "^4.3.0",
+    "@nuxtjs/color-mode": "^4.0.0",
+    "@tailwindcss/vite": "^4.1.18",
+    "nuxt": "^4.2.2",
+    "tailwindcss": "^4.1.18",
+    "vue": "^3.5.26",
+    "vue-router": "^4.6.4"
+  }
+}

public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

tsconfig.json

@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}