feat: update UI

components/Counter.vue

@@ -4,13 +4,13 @@ const { count, inc, dec } = useCount()
 
 <template>
   <div inline-flex m="y-3">
-    <button btn class="!p-2" @click="dec()">
+    <button btn p-2 rounded-full @click="dec()">
       <div i-carbon-subtract></div>
     </button>
     <div font="mono" w="15" m-auto inline-block>
       {{ count }}
     </div>
-    <button btn class="!p-2" @click="inc()">
+    <button btn p-2 rounded-full @click="inc()">
       <div i-carbon-add></div>
     </button>
   </div>

components/Footer.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    text="2xl gray-500"
+    text="xl gray4"
     m-5
     flex
     justify-center
-    gap-2
+    gap-3
   >
     <NuxtLink i-carbon-campsite to="/" />
     <a i-carbon-logo-github href="https://github.com/antfu/vitesse-nuxt3" target="__blank" />

components/InputEntry.vue

@@ -9,28 +9,30 @@ const go = () => {
 </script>
 
 <template>
-  <input
-    id="input"
-    v-model="name"
-    placeholder="What's your name?"
-    type="text"
-    autocomplete="false"
-    p="x-4 y-2"
-    m="t-5"
-    w="250px"
-    text="center"
-    bg="transparent"
-    border="~ rounded gray-200 dark:gray-700"
-    outline="none active:none"
-    @keydown.enter="go"
-  >
   <div>
-    <button
+    <input
-      class="m-3 text-sm btn"
+      id="input"
-      :disabled="!name"
+      v-model="name"
-      @click="go"
+      placeholder="What's your name?"
+      type="text"
+      autocomplete="false"
+      p="x-4 y-2"
+      m="t-5"
+      w="250px"
+      text="center"
+      bg="transparent"
+      border="~ rounded gray-200 dark:gray-700"
+      outline="none active:none"
+      @keydown.enter="go"
     >
-      GO
+    <div>
-    </button>
+      <button
+        class="m-3 text-sm btn"
+        :disabled="!name"
+        @click="go"
+      >
+        GO
+      </button>
+    </div>
   </div>
 </template>

components/Logos.vue

@@ -0,0 +1,20 @@
+<template>
+  <div inline-flex text-2xl font-300 cursor-default>
+    <div flex flex-col children:mx-auto>
+      <img w-18 inline-block src="/nuxt.png" />
+      <span text-green5 mt--2>Nuxt 3</span>
+    </div>
+    <div
+      text="3xl gray4"
+      m="x-4 y-auto"
+      transition-all-500
+      transform
+      hover:rotate-135
+      i-carbon-add
+    />
+    <div flex flex-col children:mx-auto>
+      <img w-18 inline-block src="/vite.png" />
+      <span text-purple5 mt--2>Vitesse</span>
+    </div>
+  </div>
+</template>

components/PageView.vue

@@ -5,7 +5,7 @@ const time = useTimeAgo(computed(() => data.value.startAt))
 </script>
 
 <template>
-  <div text-gray>
+  <div text-gray:50>
-    <span font-500>{{ data.pageview }}</span> page views since <span font-500>{{ time }}</span>
+    <span font-500 text-gray>{{ data.pageview }}</span> page views since <span text-gray>{{ time }}</span>
   </div>
 </template>

package.json

@@ -8,11 +8,11 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.10.0",
     "@iconify/json": "^1.1.423",
-    "@unocss/nuxt": "^0.5.1",
+    "@unocss/nuxt": "^0.6.1",
     "@vueuse/core": "^6.7.6",
     "eslint": "^8.1.0",
     "nuxt3": "latest",
     "typescript": "^4.4.4",
-    "unocss": "^0.5.1"
+    "unocss": "^0.6.1"
   }
 }

pages/hi/[id].vue

@@ -7,20 +7,22 @@ const name = route.params.id
 <template>
   <div>
     <div i-twemoji:waving-hand text-4xl inline-block animate-bounce></div>
-    <h3 text-2xl>
+    <h3 text-2xl font-500>
-      Hi!
+      Hi,
     </h3>
-    <div>{{ name }}</div>
+    <div text-xl>
+      {{ name }}!
+    </div>
+
+    <Counter />
 
     <div>
       <NuxtLink
-        class="btn m-3 text-sm mt-6"
+        class="btn m-3 text-sm"
         to="/"
       >
         Back
       </NuxtLink>
     </div>
-
-    <Counter />
   </div>
 </template>

pages/index.vue

@@ -1,12 +1,6 @@
 <template>
   <div>
-    <img w-16 inline-block src="/nuxt.png" />
+    <Logos mb-6 />
-    <img w-16 inline-block src="/vite.png" />
-    <h1 mt-1 text-2xl cursor-default>
-      <span text-green-500 hover:text-white hover:bg-green-600>Nuxt 3</span>
-      <span text-gray-400 mx-2>+</span>
-      <span text-purple-500>Vitesse</span>
-    </h1>
     <Suspense>
       <PageView />
       <template #fallback>

pnpm-lock.yaml

@@ -3,22 +3,22 @@ lockfileVersion: 5.3
 specifiers:
   '@antfu/eslint-config': ^0.10.0
   '@iconify/json': ^1.1.423
-  '@unocss/nuxt': ^0.5.1
+  '@unocss/nuxt': ^0.6.1
   '@vueuse/core': ^6.7.6
   eslint: ^8.1.0
   nuxt3: latest
   typescript: ^4.4.4
-  unocss: ^0.5.1
+  unocss: ^0.6.1
 
 devDependencies:
   '@antfu/eslint-config': 0.10.0_eslint@8.1.0+typescript@4.4.4
   '@iconify/json': 1.1.423
-  '@unocss/nuxt': 0.5.1
+  '@unocss/nuxt': 0.6.1
   '@vueuse/core': 6.7.6
   eslint: 8.1.0
   nuxt3: 3.0.0-27267816.6bd7186
   typescript: 4.4.4
-  unocss: 0.5.1
+  unocss: 0.6.1
 
 packages:
 
@@ -1001,60 +1001,60 @@ packages:
       eslint-visitor-keys: 3.0.0
     dev: true
 
-  /@unocss/config/0.5.1:
+  /@unocss/config/0.6.1:
-    resolution: {integrity: sha512-4AzkxLnWuUHVZC/Ao4X0wsu5x3McB38I1yEnuOmTGADXgzrnBaeDV4HCpycYrhINlOAlfMGuoZ3kaIznR+3YMQ==}
+    resolution: {integrity: sha512-E8sJtn7Nh94E/8dKJDkAECcaVacPmuHj1YbIJDxhaH5o36uamivMI6uQE393/HHZ8fyiW/2Mm5QtP1kCqy8LHg==}
     engines: {node: '>=14'}
     dependencies:
-      '@unocss/core': 0.5.1
+      '@unocss/core': 0.6.1
       sucrase: 3.20.3
     dev: true
 
-  /@unocss/core/0.5.1:
+  /@unocss/core/0.6.1:
-    resolution: {integrity: sha512-QGVm1h3BumjobzKFBppSf5OYYcH73bEUHiUyfsEDL1K2JzSswE+ugBw13NuCyIH442o8M7N3OEUIWjzs5gYy+g==}
+    resolution: {integrity: sha512-eEJSrFFjbUh7/K+nLe1U3zkSSusqsXax1xM8gxjvRqrCeJC7fY/U4u1AwiWdGHjvObVIZXIAzoOd9PLBafMHag==}
     dev: true
 
-  /@unocss/nuxt/0.5.1:
+  /@unocss/nuxt/0.6.1:
-    resolution: {integrity: sha512-IubhlFC97Yu13GvVjd8Lm4WsA+t4bl4BmcoiO4P9KvgYvFolC4Xq3ZR0ef+nUCxylJLkp/+bqHYetcVJeBGxEg==}
+    resolution: {integrity: sha512-dQyUrNnZndicUCttlituOivVB5ZJGbKIX5C+Rks0c3jhiaDw5U12RsbterxRUXGRzwxsIOehGXmh0dQzrqHClg==}
     dependencies:
       '@nuxt/kit': /@nuxt/kit-edge/3.0.0-27267816.6bd7186
-      unocss: 0.5.1
+      unocss: 0.6.1
     dev: true
 
-  /@unocss/preset-attributify/0.5.1:
+  /@unocss/preset-attributify/0.6.1:
-    resolution: {integrity: sha512-42oDw9iW/bP7xWkWnCaHLph1FQokYu9zjuErxYGvNNk8umGP/DxzFC3/BdMlAswzUDcVZgNsE7WJI3YZdf/vFA==}
+    resolution: {integrity: sha512-FnHec33XF1zTkh5BFfLTOe/EsYMRMlZUT6IoutBQIBf3/rwz9xNSLVwqVKqwD9mjYWvC5WvpekuYWJfoQ8TBSQ==}
     dependencies:
-      '@unocss/core': 0.5.1
+      '@unocss/core': 0.6.1
     dev: true
 
-  /@unocss/preset-icons/0.5.1:
+  /@unocss/preset-icons/0.6.1:
-    resolution: {integrity: sha512-qt2wBccudSv3ciKLJ8MjHDSX17aplChmLAHV8NQe8AxBLvxVTPUvx3fVyPoopbcoioYstS1tWkqEazbk/CZFLQ==}
+    resolution: {integrity: sha512-KWvfEZIjtXGW4sZYBjTjJF02DW4JLYf9tQwbjkVM87o9460ptU91JCzMoT562IY8mxy6l+GmuGJyYMhb9BfkjQ==}
     dependencies:
       '@iconify/utils': 1.0.18
-      '@unocss/core': 0.5.1
+      '@unocss/core': 0.6.1
       local-pkg: 0.4.0
     dev: true
 
-  /@unocss/preset-uno/0.5.1:
+  /@unocss/preset-uno/0.6.1:
-    resolution: {integrity: sha512-siOQRK8WlDBZljjvzrgLkLfw8UxB+YUjDiwvJY59m8PSGjHyuQiY9tuCDVbPDd3XkMBHGE7oZgLVuzR6Waygzw==}
+    resolution: {integrity: sha512-z9hTbfyYh3RDrmADYk3dZSYv9C9iF+RvOQrOVH8z1jBPj7D17ZYT/oKawO68bpqyM+hsSARkGHNpI1W0y8+4Nw==}
     dependencies:
-      '@unocss/core': 0.5.1
+      '@unocss/core': 0.6.1
     dev: true
 
-  /@unocss/reset/0.5.1:
+  /@unocss/reset/0.6.1:
-    resolution: {integrity: sha512-oSYmiUtcMeeMJDITBSp52ro6HGgpszswsV4X7qYQPO7NQVfv6awIWVSkm7zJj8znhxqCiDziur8v3OnxdsnncA==}
+    resolution: {integrity: sha512-GbKViNVaEl+YdGa7kJaBnXYpYgLg3TlXSW2ktptiQgCUdbMZDCPkO80cbr3nlVExjxEAxBR2arJGENh4+CafTg==}
     dev: true
 
-  /@unocss/scope/0.5.1:
+  /@unocss/scope/0.6.1:
-    resolution: {integrity: sha512-KjAOhsOYKFNZfnqYKd+AqJCQ4Wb2Hlix7E509i0dTFhlY43tk0ofsy+NG/2PLst4Xy+HV2d+ToV14jOLXeYTmQ==}
+    resolution: {integrity: sha512-iovbZyykTbqx0/5afR/afYNHsTLFBhn1JNaBx9AncPTVcSX2tRGKae0RXGgoQxbsVcNbls9/tNTz4yAKROtm0w==}
     dev: true
 
-  /@unocss/vite/0.5.1:
+  /@unocss/vite/0.6.1:
-    resolution: {integrity: sha512-Hk+EnjgA6YReyKga0Y2nzTa+ZJJOOhwRnpiUTP9Vi/TW1UH6ARzZ/H66pcMLEfaNgfWPHyHYrB1doXteCV72ZA==}
+    resolution: {integrity: sha512-VG4OkK3o3fQrCMm5XkRi0MsYveNhWuQ8XpVYQXLLciJCiDWIYblPzlm0ZK9u3PwqTmWzC4wXTVW9Q7OBzmCgXQ==}
     dependencies:
       '@rollup/pluginutils': 4.1.1
-      '@unocss/config': 0.5.1
+      '@unocss/config': 0.6.1
-      '@unocss/core': 0.5.1
+      '@unocss/core': 0.6.1
-      '@unocss/scope': 0.5.1
+      '@unocss/scope': 0.6.1
     dev: true
 
   /@vercel/nft/0.17.0:
@@ -6608,16 +6608,16 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unocss/0.5.1:
+  /unocss/0.6.1:
-    resolution: {integrity: sha512-6OMaaJEgRvLfwcxiYka0zpf0yNUm0t8QMr+I+sjxKWdar23NNDmO3a5crJj0rgvvaHR1tlOu2nIosw6dRV/Cig==}
+    resolution: {integrity: sha512-ygpeYK8Kbu7Vga9UdOps1jA3YWekD42/rzYy4FI+EhRTe5FtZDnhnXVPuSYWamYgVk6WIsVol3cYkPj5wynDkw==}
     engines: {node: '>=14'}
     dependencies:
-      '@unocss/core': 0.5.1
+      '@unocss/core': 0.6.1
-      '@unocss/preset-attributify': 0.5.1
+      '@unocss/preset-attributify': 0.6.1
-      '@unocss/preset-icons': 0.5.1
+      '@unocss/preset-icons': 0.6.1
-      '@unocss/preset-uno': 0.5.1
+      '@unocss/preset-uno': 0.6.1
-      '@unocss/reset': 0.5.1
+      '@unocss/reset': 0.6.1
-      '@unocss/vite': 0.5.1
+      '@unocss/vite': 0.6.1
     dev: true
 
   /unpipe/1.0.0: