add nuxt/ui

pages/index.vue

@@ -1,39 +1,43 @@
 <template>
-  <div class="card">
-    <div class="card__images">
-      <div
-        v-for="image in currentVariantImages"
-        :key="image?.id"
-      >
-        <img width="100%" :src="image?.src" :alt="image?.src">
-      </div>
-    </div>
+  <UContainer>
+    <UButton size="xl" label="btn" />
 
-    <div class="card__description">
-      <h1>{{ productsData?.name }}</h1>
-
-      Цена
-      {{ currentVariant?.price }}
-
-      Коротокое описание
-      {{ productsData?.short_description }}
-
-      <div class="card__variation">
+    <div class="card">
+      <div class="card__images">
         <div
-          v-for="variation in productsVariationsData"
-          :key="variation?.id"
-          @click="() => currentVariantId = variation?.id"
+          v-for="image in currentVariantImages"
+          :key="image?.id"
         >
-          {{ variation?.id }}
-          <img width="200px" :src="variation?.image?.src">
+          <img width="100%" :src="image?.src" :alt="image?.src">
         </div>
       </div>
 
-      <pre>
+      <div class="card__description">
+        <h1>{{ productsData?.name }}</h1>
+
+        Цена
+        {{ currentVariant?.price }}
+
+        Коротокое описание
+        {{ productsData?.short_description }}
+
+        <div class="card__variation">
+          <div
+            v-for="variation in productsVariationsData"
+            :key="variation?.id"
+            @click="() => currentVariantId = variation?.id"
+          >
+            {{ variation?.id }}
+            <img width="200px" :src="variation?.image?.src" :alt="variation?.image?.src">
+          </div>
+        </div>
+
+        <pre>
         {{ currentVariant }}
       </pre>
+      </div>
     </div>
-  </div>
+  </UContainer>
 </template>
 
 <script setup lang="ts">