feat: nuxt ui setup

src/App.vue

@@ -25,80 +25,15 @@ const downloadCalendar = async () => {
 </script>
 
 <template>
-  <div class="app">
-    <h1>Gestime APHP Export</h1>
+  <UApp>
+    <div class="app">
+      <h1>Gestime APHP Export</h1>
 
-    <div class="query-section">
-      <button @click="downloadCalendar">Download calendar</button>
+      <UButton
+        loading-auto
+        label="Download calendar"
+        @click="downloadCalendar"
+      />
     </div>
-  </div>
+  </UApp>
 </template>
-
-<style scoped>
-.app {
-  padding: 16px;
-  min-width: 400px;
-  max-width: 600px;
-}
-
-h1 {
-  font-size: 20px;
-  margin-bottom: 16px;
-}
-
-.query-section {
-  margin-bottom: 24px;
-}
-
-button {
-  background-color: #4caf50;
-  color: white;
-  padding: 10px 20px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  margin-right: 8px;
-}
-
-button:hover:not(:disabled) {
-  background-color: #45a049;
-}
-
-button:disabled {
-  background-color: #cccccc;
-  cursor: not-allowed;
-}
-
-.url-info {
-  margin-top: 12px;
-  padding: 8px;
-  background-color: #f0f0f0;
-  border-radius: 4px;
-  font-size: 12px;
-  word-break: break-all;
-}
-
-.result {
-  margin-top: 12px;
-  padding: 12px;
-  background-color: #f9f9f9;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.result pre {
-  margin: 0;
-  font-size: 12px;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-hr {
-  margin: 24px 0;
-  border: none;
-  border-top: 1px solid #ddd;
-}
-</style>

src/assets/main.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@nuxt/ui";

src/main.ts

@@ -1,9 +1,13 @@
+import "./assets/main.css";
+
 import { createApp } from "vue";
 import { createPinia } from "pinia";
+import ui from "@nuxt/ui/vue-plugin";
 import App from "./App.vue";
 
 const app = createApp(App);
 
 app.use(createPinia());
+app.use(ui);
 
 app.mount("#app");