Setting up packages and config

frontend/.prettierignore

@@ -0,0 +1,8 @@
+.nuxt/
+
+package.json
+package-lock.json
+
+README.md
+
+.yarnrc.yml

frontend/.prettierrc.yaml

@@ -0,0 +1,15 @@
+printWidth: 80
+tabWidth: 4
+useTabs: true
+semi: false
+singleQuote: true
+quoteProps: "consistent"
+jsxSingleQuote: true
+trailingComma: "es5"
+bracketSpacing: true
+bracketSameLine: true
+arrowParens: "always"
+htmlWhitespaceSensitivity: "strict"
+vueIndentScriptAndStyle: false
+singleAttributePerLine: true
+plugins: ["prettier-plugin-tailwindcss"]

frontend/app.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
-    <NuxtWelcome />
+    <!-- <NuxtWelcome /> -->
+    <NuxtPage />
   </div>
 </template>

frontend/assets/css/tailwind.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+	@apply bg-primary text-white;
+}

frontend/nuxt.config.ts

@@ -1,4 +1,17 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-
+	modules: ['@nuxtjs/tailwindcss', 'nuxt-icon'],
+	tailwindcss: {
+		configPath: './tailwind.config.ts',
+	},
+	typescript: {
+		strict: true,
+	},
+	runtimeConfig: {
+		public: {
+			api: 'http://dev.local:8000/api',
+			url: 'http://dev.local:8000',
+		},
+	},
+	ssr: false,
 })

frontend/package.json

@@ -9,7 +9,14 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
+    "@nuxtjs/tailwindcss": "^6.7.0",
     "@types/node": "^18",
-    "nuxt": "^3.5.2"
+    "nuxt": "^3.5.2",
+    "nuxt-icon": "^0.4.1",
+    "prettier": "^2.8.8",
+    "prettier-plugin-tailwindcss": "^0.3.0"
+  },
+  "dependencies": {
+    "zod": "^3.21.4"
   }
 }

frontend/tailwind.config.ts

@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: [],
+	important: false,
+	theme: {
+		extend: {
+			colors: {
+				primary: '#0c0c0d',
+				secondary: '#18181b',
+				darkgray: '#121213',
+				lightgray: '#27272a',
+				white: '#e5e7eb',
+			},
+		},
+	},
+}