chore(example): use @nuxt/ui for examples (#2325)

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Pooya Parsa <pyapar@gmail.com>

docs/content/1.getting-started/3.bridge.md

@@ -74,7 +74,7 @@ Nuxt 3 introduced the new Nuxt CLI command [`nuxi`](/getting-started/commands/).
 -   "build": "nuxt build",
 +   "build": "nuxi build",
 -   "start": "nuxt start",
-+   "start": "node .output/server/index.mjs"
++   "start": "nuxi preview"
   }
 }
 ```
@@ -99,7 +99,7 @@ For all other situations, you can use the `nuxi build` command.
 {
   "scripts": {
     "build": "nuxi build",
-    "start": "node .output/server/index.mjs"
+    "start": "nuxi preview"
   }
 }
 ```

examples/hello-world/app.vue

@@ -1,5 +1,17 @@
+<script setup>
+const version = 2 + 1
+</script>
+
 <template>
-  <div>
-    Hello Nuxt!
+  <div class="hello">
+    Hello Nuxt {{ version }}!
   </div>
 </template>
+
+<style scoped>
+.hello {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 3rem;
+  padding: 10rem;
+}
+</style>

examples/hello-world/package.json

@@ -1,12 +1,12 @@
 {
   "name": "example-hello-world",
   "private": true,
+  "scripts": {
+    "build": "nuxi build",
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
   "devDependencies": {
     "nuxt3": "latest"
-  },
-  "scripts": {
-    "dev": "nuxi dev",
-    "build": "nuxi build",
-    "start": "node .output/server/index.mjs"
   }
 }

examples/locale/app.vue

@@ -1,17 +1,30 @@
-<script setup>
+<script setup lang="ts">
+// see ../compoables/locale.ts for the implementation
 const locales = useLocales()
 const locale = useLocale()
 const date = useLocaleDate(new Date('2016-10-26') /* NUXT_BIRTHDAY */)
 </script>
 
 <template>
-  <div>
-    <h2>Nuxt birthday: {{ date }}</h2>
-    <label for="locale-chooser">Locale: </label>
-    <select id="locale-chooser" v-model="locale">
+  <NuxtExampleLayout :show-tips="true" example="locale">
+    <h1 class="text-xl opacity-50">
+      Nuxt birthday
+    </h1>
+    <p class="text-4xl">
+      {{ date }}
+    </p>
+    <div class="mt-4" />
+    <label for="locale-chooser">Preview a different locale</label>
+    <select id="locale-chooser" v-model="locale" class="m-auto w-50 border n-border-base rounded p-1">
       <option v-for="l of locales" :key="l" :value="l">
         {{ l }}
       </option>
     </select>
-  </div>
+
+    <template #tips>
+      <div>
+        You can right click to "View Page Source" and see that Nuxt renders the correct date in SSR based on visitor's locale.
+      </div>
+    </template>
+  </NuxtExampleLayout>
 </template>

examples/locale/composables/locale.ts

@@ -26,6 +26,7 @@ export const useLocales = () => {
     'en-US',
     'en-GB',
     'ko-KR',
+    'zh-CN',
     'ar-EG',
     'fa-IR',
     'ja-JP-u-ca-japanese'
@@ -38,6 +39,6 @@ export const useLocales = () => {
 
 // Using Intl.DateTimeFormat for language-sensitive date and time formatting
 // Learn more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
-export const useLocaleDate = (date: Ref<Date>, locale = useLocale()) => {
-  return computed(() => new Intl.DateTimeFormat(locale.value).format(date.value))
+export const useLocaleDate = (date: Ref<Date> | Date, locale = useLocale()) => {
+  return computed(() => new Intl.DateTimeFormat(locale.value, { dateStyle: 'full' }).format(unref(date)))
 }

examples/locale/nuxt.config.ts

@@ -1,4 +1,7 @@
 import { defineNuxtConfig } from 'nuxt3'
 
 export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ]
 })

examples/locale/package.json

@@ -1,12 +1,13 @@
 {
   "name": "example-locale",
   "private": true,
-  "devDependencies": {
-    "nuxt3": "latest"
-  },
   "scripts": {
-    "dev": "nuxi dev",
     "build": "nuxi build",
-    "start": "node .output/server/index.mjs"
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
+    "nuxt3": "latest"
   }
 }

examples/module-extend-pages/layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtExampleLayout example="module-extend-pages">
+    <slot />
+  </NuxtExampleLayout>
+</template>

examples/module-extend-pages/nuxt.config.ts

@@ -1,7 +1,8 @@
 import { defineNuxtConfig } from 'nuxt3'
 
 export default defineNuxtConfig({
-  buildModules: [
-    '~/modules/pages'
+  modules: [
+    '~/modules/pages',
+    '@nuxt/ui'
   ]
 })

examples/module-extend-pages/package.json

@@ -1,12 +1,13 @@
 {
   "name": "example-module-extend-pages",
   "private": true,
-  "devDependencies": {
-    "nuxt3": "latest"
-  },
   "scripts": {
-    "dev": "nuxi dev",
     "build": "nuxi build",
-    "start": "node .output/server/index.mjs"
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
+    "nuxt3": "latest"
   }
 }

examples/use-async-data/app.vue

@@ -1,12 +1,24 @@
-<template>
-  <div>
-    {{ data }}
-    <button :disabled="pending" @click="refresh">
-      Refresh Data
-    </button>
-  </div>
-</template>
-
 <script setup>
 const { data, refresh, pending } = await useAsyncData('/api/hello', () => $fetch('/api/hello'))
 </script>
+
+<template>
+  <NuxtExampleLayout example="use-async-data" show-tips="true">
+    <div>{{ data }}</div>
+    <div>
+      <NButton :disabled="pending" @click="refresh">
+        Refresh Data
+      </NButton>
+    </div>
+    <template #tips>
+      <div>
+        Nuxt will automatically read files in the
+        <a href="https://v3.nuxtjs.org/docs/directory-structure/server#api-routes" target="_blank">
+          <code>~/server/api</code> directory
+        </a>
+        to create API endpoints. Learn more about
+        <a href="https://v3.nuxtjs.org/docs/usage/data-fetching" target="_blank">data fetching</a>
+      </div>
+    </template>
+  </NuxtExampleLayout>
+</template>

examples/use-async-data/nuxt.config.ts

@@ -1,5 +1,7 @@
 import { defineNuxtConfig } from 'nuxt3'
 
 export default defineNuxtConfig({
-  // vite: true
+  modules: [
+    '@nuxt/ui'
+  ]
 })

examples/use-async-data/package.json

@@ -1,12 +1,13 @@
 {
   "name": "example-use-async-data",
   "private": true,
-  "devDependencies": {
-    "nuxt3": "latest"
-  },
   "scripts": {
-    "dev": "nuxi dev",
     "build": "nuxi build",
-    "start": "node .output/server/index.mjs"
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
+    "nuxt3": "latest"
   }
 }

examples/use-cookie/app.vue

@@ -1,30 +1,59 @@
-<script setup>
-const user = useCookie('user')
-const logins = useCookie('logins')
+<script setup lang="ts">
+const user = useCookie<{ name: string }>('user')
+const logins = useCookie<number>('logins')
+
+const name = ref('')
+const interacted = ref(false)
 
 const login = () => {
   logins.value = (logins.value || 0) + 1
-  user.value = { name: 'CookieLover.' + new Date().getMilliseconds() }
+  user.value = { name: name.value }
+  interacted.value = true
 }
 
 const logout = () => {
   user.value = null
+  interacted.value = true
 }
 </script>
 
 <template>
-  <div v-if="user">
-    <h1>Welcome {{ user.name }}</h1>
-    <button @click="logout">
-      Logout
-    </button>
-    <hr>
-    You have logged in {{ logins }} times!
-  </div>
-  <div v-else>
-    Click here to login:
-    <button @click="login">
-      Login
-    </button>
-  </div>
+  <NuxtExampleLayout :show-tips="interacted" class="h-50" example="use-cookie">
+    <template v-if="user">
+      <h1 class="text-3xl mb-3">
+        Welcome, {{ user.name }}! 👋
+      </h1>
+      <div>
+        <NTip n="green6" icon="carbon:idea" class="inline-flex">
+          You have logged in <b>{{ logins }} times</b>!
+        </NTip>
+      </div>
+      <div class="mt-3">
+        <NButton n="red" icon="carbon:logout" @click="logout">
+          Log out
+        </NButton>
+      </div>
+    </template>
+    <template v-else>
+      <h1 class="text-3xl mb-3">
+        Login
+      </h1>
+      <NTextInput v-model="name" n="lg" class="w-100 m-auto" placeholder="Enter your name..." @keypress.enter="login()" />
+      <div class="mt-3">
+        <NButton icon="carbon:user" :disabled="!name" @click="login">
+          Log in
+        </NButton>
+      </div>
+    </template>
+
+    <template #tips>
+      <div>
+        This demo showcases using the
+        <NLink href="https://v3.nuxtjs.org/docs/usage/cookies" target="_blank">
+          useCookie
+        </NLink>
+        API to persist small amounts of data that can be used both client-side and server-side.
+      </div>
+    </template>
+  </NuxtExampleLayout>
 </template>

examples/use-cookie/nuxt.config.ts

@@ -1,4 +1,7 @@
 import { defineNuxtConfig } from 'nuxt3'
 
 export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ]
 })

examples/use-cookie/package.json

@@ -1,12 +1,13 @@
 {
   "name": "example-use-cookie",
   "private": true,
-  "devDependencies": {
-    "nuxt3": "latest"
-  },
   "scripts": {
-    "dev": "nuxi dev",
     "build": "nuxi build",
-    "start": "node .output/server/index.mjs"
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
+    "nuxt3": "latest"
   }
 }

examples/use-fetch/app.vue

@@ -1,9 +1,20 @@
-<template>
-  <div>
-    Server response: {{ data }}
-  </div>
-</template>
-
 <script setup>
 const { data } = await useFetch('/api/hello', { params: { foo: 'bar' } })
 </script>
+
+<template>
+  <NuxtExampleLayout example="use-fetch" show-tips="true">
+    Server response
+    <pre class="text-left"><code>{{ data }}</code></pre>
+    <template #tips>
+      <div>
+        Nuxt will automatically read in files in the
+        <a href="https://v3.nuxtjs.org/docs/directory-structure/server#api-routes" target="_blank">
+          <code>~/server/api</code> directory
+        </a>
+        to create API endpoints. Learn more about
+        <a href="https://v3.nuxtjs.org/docs/usage/data-fetching" target="_blank">data fetching</a>.
+      </div>
+    </template>
+  </NuxtExampleLayout>
+</template>

examples/use-fetch/nuxt.config.ts

@@ -1,4 +1,7 @@
 import { defineNuxtConfig } from 'nuxt3'
 
 export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ]
 })

examples/use-fetch/package.json

@@ -1,12 +1,13 @@
 {
   "name": "example-use-fetch",
   "private": true,
-  "devDependencies": {
-    "nuxt3": "latest"
-  },
   "scripts": {
-    "dev": "nuxi dev",
     "build": "nuxi build",
-    "start": "node .output/server/index.mjs"
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
+    "nuxt3": "latest"
   }
 }

examples/use-meta/app.vue

@@ -1,23 +1,39 @@
 <template>
-  <div>
-    Hello World
+  <NuxtExampleLayout example="use-meta" :show-tips="true">
+    <div
+      class="bg-gray-400/10 border-2 border-dashed border-gray-400/50 rounded-xl py-8 px-2 op-80"
+    >
+      There are renderless <code>&lt;Html&gt;</code>, <code>&lt;Meta&gt;</code>, <code>&lt;Title&gt;</code> components
+      <br>that can magically bind the meta using Vue template.
+    </div>
 
     <Html :lang="String(dynamic)">
       <Head>
-        <Title>{{ dynamic }} title</Title>
+        <Title>Luck number: {{ dynamic }}</Title>
         <Meta name="description" :content="`My page's ${dynamic} description`" />
         <Link rel="preload" href="/test.txt" as="script" />
       </Head>
     </Html>
 
-    <button class="blue" @click="dynamic = Math.random() * 100">
-      Clickme
-    </button>
-  </div>
+    <div class="mt-5">
+      <NButton @click="dynamic = Math.round(Math.random() * 100)">
+        Click me and see the dynamic title
+      </NButton>
+    </div>
+
+    <template #tips>
+      <div class="flex-auto">
+        Learn more about
+        <NLink href="https://v3.nuxtjs.org/docs/usage/meta-tags" target="_blank">
+          Meta tags
+        </NLink>.
+        Open in editor to see the source code 👉
+      </div>
+    </template>
+  </NuxtExampleLayout>
 </template>
 
-<script lang="ts">
-
+<script>
 export default {
   setup () {
     useMeta({

examples/use-meta/nuxt.config.ts

@@ -1,4 +1,7 @@
 import { defineNuxtConfig } from 'nuxt3'
 
 export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ]
 })

examples/use-meta/package.json

@@ -1,12 +1,13 @@
 {
   "name": "example-use-meta",
   "private": true,
-  "devDependencies": {
-    "nuxt3": "latest"
-  },
   "scripts": {
-    "dev": "nuxi dev",
     "build": "nuxi build",
+    "dev": "nuxi dev",
     "start": "node .output/server"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
+    "nuxt3": "latest"
   }
 }

examples/use-state/app.vue

@@ -3,13 +3,26 @@ const counter = useState('counter', () => Math.round(Math.random() * 1000))
 </script>
 
 <template>
-  <div>
-    Counter: {{ counter }}
-    <button @click="counter++">
-      +
-    </button>
-    <button @click="counter--">
-      -
-    </button>
-  </div>
+  <NuxtExampleLayout :show-tips="true" example="use-state">
+    <div>Counter: {{ counter }}</div>
+    <div>
+      <NButton class="font-mono" @click="counter++">
+        +
+      </NButton>
+      <NButton class="font-mono" @click="counter--">
+        -
+      </NButton>
+    </div>
+
+    <template #tips>
+      <div>
+        <NLink href="https://v3.nuxtjs.org/docs/usage/state" target="_blank">
+          useState
+        </NLink>
+        is an SSR-friendly ref replacement.
+        Its value will be preserved after server-side rendering
+        and shared across all components using a unique key.
+      </div>
+    </template>
+  </NuxtExampleLayout>
 </template>

examples/use-state/nuxt.config.ts

@@ -1,4 +1,7 @@
 import { defineNuxtConfig } from 'nuxt3'
 
 export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ]
 })

examples/use-state/package.json

@@ -1,12 +1,13 @@
 {
   "name": "example-use-state",
   "private": true,
-  "devDependencies": {
-    "nuxt3": "latest"
-  },
   "scripts": {
-    "dev": "nuxi dev",
     "build": "nuxi build",
-    "start": "node .output/server/index.mjs"
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
+    "nuxt3": "latest"
   }
 }

examples/use-state/tsconfig.json

@@ -1,3 +1,3 @@
 {
-  "extends": "./.nuxt/tsconfig.json"
+  "extends": "./.nuxt/tsconfig.json",
 }

examples/with-components/app.vue

@@ -1,6 +1,23 @@
 <template>
-  <div>
-    <hello-world />
-    <nuxt3 />
-  </div>
+  <NuxtExampleLayout :show-tips="true" example="with-components">
+    <h1 class="text-xl opacity-50">
+      Auto Imported Components
+    </h1>
+    <div>
+      <!-- Auto Imported Components -->
+      <HelloWorld class="text-2xl" />
+      <Nuxt3 class="text-2xl" />
+      <ParentFolderHello class="mt-6" />
+    </div>
+
+    <template #tips>
+      <div>
+        Components under <code>components/</code> folder are auto imported and can be directly used in your templates.
+        Read more about
+        <NLink href="https://v3.nuxtjs.org/docs/directory-structure/components" target="_blank">
+          the components directory.
+        </NLink>
+      </div>
+    </template>
+  </NuxtExampleLayout>
 </template>

examples/with-components/components/parent-folder/Hello.vue

@@ -0,0 +1,8 @@
+<template>
+  <NCard class="flex flex-col gap-1 p-4">
+    Components in sub folders
+    <code class="op50">`components/parent-folder/hello.vue`</code>
+    can be auto imported with folder name as the prefix:
+    <code class="text-lime6">&lt;ParentFolderHello/&gt;</code>
+  </NCard>
+</template>

examples/with-components/components/parent-folder/index.vue

@@ -1,5 +0,0 @@
-<template>
-  <div>
-    Awesome Component
-  </div>
-</template>

examples/with-components/nuxt.config.ts

@@ -1,7 +1,9 @@
 import { defineNuxtConfig } from 'nuxt3'
 
 export default defineNuxtConfig({
-  vite: false,
+  modules: [
+    '@nuxt/ui'
+  ],
   components: {
     dirs: [
       '~/components',

examples/with-components/package.json

@@ -1,12 +1,13 @@
 {
   "name": "example-with-components",
   "private": true,
-  "devDependencies": {
-    "nuxt3": "latest"
-  },
   "scripts": {
-    "dev": "nuxi dev",
     "build": "nuxi build",
-    "start": "node .output/server/index.mjs"
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
+    "nuxt3": "latest"
   }
 }

examples/with-composables/nuxt.config.ts

@@ -1,4 +1,7 @@
 import { defineNuxtConfig } from 'nuxt3'
 
 export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ]
 })

examples/with-composables/package.json

@@ -1,12 +1,13 @@
 {
   "name": "example-with-composables",
   "private": true,
-  "devDependencies": {
-    "nuxt3": "latest"
-  },
   "scripts": {
-    "dev": "nuxi dev",
     "build": "nuxi build",
-    "start": "node .output/server/index.mjs"
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
+    "nuxt3": "latest"
   }
 }

examples/with-layouts/package.json

@@ -1,12 +1,13 @@
 {
   "name": "example-with-layouts",
   "private": true,
-  "devDependencies": {
-    "nuxt3": "latest"
-  },
   "scripts": {
-    "dev": "nuxi dev",
     "build": "nuxi build",
-    "start": "node .output/server/index.mjs"
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
+    "nuxt3": "latest"
   }
 }

examples/with-pages/app.vue

@@ -1,18 +1,32 @@
-<template>
-  <div>
-    <NuxtLink to="/">
-      Home
-    </NuxtLink>
-    <NuxtLink to="/about">
-      About
-    </NuxtLink>
-    <NuxtLink to="/parent">
-      Parent (index)
-    </NuxtLink>
-    <NuxtLink to="/parent/b">
-      Parent (b)
-    </NuxtLink>
+<script setup lang="ts">
+const route = useRoute()
+</script>
 
+<template>
+  <NuxtExampleLayout example="with-pages">
     <NuxtPage />
-  </div>
+
+    <template #nav>
+      <nav class="flex align-center gap-4 p-4">
+        <NuxtLink to="/" class="n-link-base">
+          Home
+        </NuxtLink>
+        <NuxtLink to="/about" class="n-link-base">
+          About
+        </NuxtLink>
+        <NuxtLink to="/parent" class="n-link-base">
+          Parent (index)
+        </NuxtLink>
+        <NuxtLink to="/parent/b" class="n-link-base">
+          Parent (b)
+        </NuxtLink>
+      </nav>
+    </template>
+
+    <template #footer>
+      <div class="text-center p-4 op-50">
+        Current route: <code>{{ route.path }}</code>
+      </div>
+    </template>
+  </NuxtExampleLayout>
 </template>

examples/with-pages/nuxt.config.ts

@@ -1,4 +1,7 @@
 import { defineNuxtConfig } from 'nuxt3'
 
 export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ]
 })

examples/with-pages/package.json

@@ -1,12 +1,13 @@
 {
   "name": "example-with-pages",
   "private": true,
-  "devDependencies": {
-    "nuxt3": "latest"
-  },
   "scripts": {
-    "dev": "nuxi dev",
     "build": "nuxi build",
-    "start": "node .output/server/index.mjs"
+    "dev": "nuxi dev",
+    "start": "nuxi preview"
+  },
+  "devDependencies": {
+    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
+    "nuxt3": "latest"
   }
 }

examples/with-wasm/app.vue

@@ -1,4 +1,3 @@
-
 <script setup>
 const a = ref(100)
 const b = ref(250)
@@ -9,11 +8,7 @@ const { data } = await useAsyncData('sum',
 </script>
 
 <template>
-  <div>
-    <input v-model="a" type="number" readonly>
-    +
-    <input v-model="b" type="number" readonly>
-    =
-    <input v-model="data.sum" type="number" readonly>
-  </div>
+  <NuxtExampleLayout example="with-wasm">
+    {{ a }} + {{ b }} = {{ data.sum }}
+  </NuxtExampleLayout>
 </template>

examples/with-wasm/nuxt.config.ts

@@ -5,5 +5,8 @@ export default defineNuxtConfig({
     experiments: {
       wasm: true
     }
-  }
+  },
+  modules: [
+    '@nuxt/ui'
+  ]
 })

examples/with-wasm/package.json

@@ -7,6 +7,6 @@
   "scripts": {
     "dev": "nuxi dev",
     "build": "nuxi build",
-    "start": "node .output/server/index.mjs"
+    "start": "nuxi preview"
   }
 }

package.json

@@ -28,10 +28,13 @@
   },
   "resolutions": {
     "nuxt3": "workspace:./packages/nuxt3",
+    "@nuxt/ui": "npm:@nuxt/ui-edge@^0.0.0-27337800.43e0b6e",
     "unbuild": "^0.6.7",
     "jiti": "^1.12.9"
   },
   "devDependencies": {
+    "@iconify-json/carbon": "^1.0.12",
+    "@nuxt/ui": "^0.0.0-alpha.5",
     "@nuxtjs/eslint-config": "^7.0.0",
     "@nuxtjs/eslint-config-typescript": "^7.0.2",
     "@types/chai": "^4.3.0",
@@ -39,6 +42,7 @@
     "@types/mocha": "^9.0.0",
     "@types/node": "^14.18.2",
     "@types/object-hash": "^2",
+    "@unocss/reset": "^0.15.5",
     "chai": "^4.3.4",
     "esbuild": "^0.14.8",
     "eslint": "^8.5.0",

playground/app.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app">
-    <img src="~/assets/logo.svg" height="40">
+    <img src="~/assets/logo.svg" class="h-20 mb-4">
     <h1 class="greeting">
       {{ hello }}, <br>Nuxt 3!
     </h1>

playground/nuxt.config.ts

@@ -1,4 +1,7 @@
 import { defineNuxtConfig } from 'nuxt3'
 
 export default defineNuxtConfig({
+  modules: [
+    '@nuxt/ui'
+  ]
 })

playground/package.json

@@ -7,6 +7,6 @@
   "scripts": {
     "dev": "nuxi dev",
     "build": "nuxi build",
-    "start": "node .output/server/index.mjs"
+    "start": "nuxi preview"
   }
 }