first commit

.gitignore

@@ -0,0 +1,9 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist
+.DS_Store

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "nuxt.isNuxtApp": false
+}

README.md

@@ -0,0 +1,50 @@
+# Nuxt 3 Template
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Features
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Nuxtlab-UI](ui.nuxtlabs.com)
+- [color-mode](color-mode.nuxtjs.org)
+- Auto-Dark Mode powered by [color-mode](color-mode.nuxtjs.org) imported by Nuxtlab-UI
+
+## Setup
+
+Make sure to install the dependencies:
+```bash
+yarn
+```
+
+## Nuxt DevTools
+
+Enable the Nuxt DevTools to get access to the Nuxt 3 DevTools in your browser:
+```bash
+npx nuxi@latest devtools enable
+```
+Disable the Nuxt DevTools:
+
+```bash
+npx nuxi@latest devtools disable
+```
+Check out the [Nuxt DevTools documentation](https://devtools.nuxtjs.org/guide) to learn more.
+
+## Development Server
+
+Start the development server on `http://localhost:3000`
+```bash
+yarn dev
+```
+
+## Production
+Build the application for production:
+
+```bash
+yarn build
+```
+
+Locally preview production build:
+```bash
+yarn preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,7 @@
+<template>
+  <!-- <div> -->
+    <!-- <NuxtWelcome /> -->
+  <!-- </div> -->
+  <NuxtPage />
+  <UNotifications />
+</template>

components/HelloWorld.vue

@@ -0,0 +1,145 @@
+<template>
+    <UContainer>
+        <div class="sm:text-center">
+            <UAvatar size="3xl"
+                src="https://avatars.githubusercontent.com/u/15265627?s=400&u=d2d9280bdbc5b88bd3573702e5be258dc3c61c2a&v=4"
+                alt="Harry Wong" chip-color="primary" chip-position="top-right" />
+            <br />
+            <UBadge size="lg">Fast</UBadge>
+            <UBadge size="lg">Light</UBadge>
+            <UBadge size="lg">Tailwind</UBadge>
+            <UBadge size="lg">Nuxtlab-UI</UBadge>
+            <br>
+            <br>
+            <UContainer>
+                <UIcon name="i-heroicons-light-bulb" />
+                <h1>A fast start Nuxt.js template</h1>
+            </UContainer>
+            <br>
+            <UButtonGroup size="xl">
+                <UButton label="Button" color="white" />
+                <UButton icon="i-heroicons-chevron-down-20-solid" color="gray" />
+                <UButton label="Groups" color="white" />
+            </UButtonGroup>
+            <UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
+                <UButton color="white" label="Dropdown" trailing-icon="i-heroicons-chevron-down-20-solid" />
+            </UDropdown>
+            <br>
+            <br>
+            <UInput loading icon="i-heroicons-magnifying-glass-20-solid" size="xl" color="primary" variant="outline"
+                placeholder="Search..." />
+            <UInput icon="i-heroicons-magnifying-glass-20-solid" size="xl" color="primary" variant="outline"
+                placeholder="Search..." />
+            <br>
+            <UTextarea color="primary" variant="outline" placeholder="Textarea" />
+            <USelect size="sm" color="primary" variant="outline" placeholder="Select"
+                :options="['United States', 'Canada', 'Mexico']" />
+
+            <USelectMenu v-model="selected" :options="people" />
+            <br>
+            <UCheckbox label="Label" />
+            <UCheckbox label="Label" help="Please check this box" />
+            <UCheckbox label="Label" disabled />
+            <br>
+            <URadio label="Label" />
+            <URadio label="Label" />
+            <URadio label="Label" />
+            <br>
+            <!-- <UToggle /> -->
+            <!-- <UToggle /> -->
+            <!-- <UToggle /> -->
+            <br>
+            <!-- <UFormGroup label="Email" required>
+                <UInput placeholder="[email protected]" icon="i-heroicons-envelope" />
+            </UFormGroup> -->
+            <br>
+            <UButtonGroup>
+                <UButton label="Open Modal" @click="isModalOpen = true" />
+                <UButton color="red" label="Open Slideover" @click="isSlideoverOpen = true" />
+                <UButton label="Show toast" @click="toast.add({ title: 'Hello world!' })" />
+            </UButtonGroup>
+            <UModal v-model="isModalOpen">
+                <UContainer>
+                    <h1>Hi, this is a modal</h1>
+                </UContainer>
+            </UModal>
+
+            <USlideover v-model="isSlideoverOpen">
+                <!-- Content -->
+                <UContainer>
+                    <h1>Hi, this is a Slideover</h1>
+                </UContainer>
+            </USlideover>
+
+            <UPopover>
+                <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
+                <template #panel>
+                    <!-- Content -->
+                    <h1>Hi, this is a Popover</h1>
+                </template>
+            </UPopover>
+            <br>
+            <br>
+            <UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']">
+                <UButton color="gray" label="Hover me" />
+            </UTooltip>
+
+        </div>
+    </UContainer>
+</template>
+
+<script setup lang="ts">
+const items = [
+    [{
+        label: 'Profile',
+        avatar: {
+            src: "https://avatars.githubusercontent.com/u/15265627?s=400&u=d2d9280bdbc5b88bd3573702e5be258dc3c61c2a&v=4"
+            // src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+        }
+    }], [{
+        label: 'Edit',
+        icon: 'i-heroicons-pencil-square-20-solid',
+        shortcuts: ['E'],
+        click: () => {
+            console.log('Edit')
+        }
+    }, {
+        label: 'Duplicate',
+        icon: 'i-heroicons-document-duplicate-20-solid',
+        shortcuts: ['D'],
+        disabled: true
+    }], [{
+        label: 'Archive',
+        icon: 'i-heroicons-archive-box-20-solid'
+    }, {
+        label: 'Move',
+        icon: 'i-heroicons-arrow-right-circle-20-solid'
+    }], [{
+        label: 'Delete',
+        icon: 'i-heroicons-trash-20-solid',
+        shortcuts: ['⌘', 'D']
+    }]
+]
+
+const people = ['Wade Cooper', 'Arlene Mccoy', 'Devon Webb', 'Tom Cook', 'Tanya Fox', 'Hellen Schmidt', 'Caroline Schultz', 'Mason Heaney', 'Claudie Smitham', 'Emil Schaefer']
+
+const selected = ref(people[0])
+
+const isModalOpen = ref(false)
+const isSlideoverOpen = ref(false)
+
+const toast = useToast()
+
+</script>
+
+
+
+<style lang="postcss" scoped>
+.center-body {
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+</style>

nuxt.config.ts

@@ -0,0 +1,7 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: {
+    enabled: true
+  },
+  modules: ["@nuxthq/ui"]
+})

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "^0.5.5",
+    "@nuxthq/ui": "^2.2.0",
+    "@types/node": "^18",
+    "nuxt": "^3.5.1"
+  }
+}

pages/index.vue

@@ -0,0 +1,10 @@
+<template>
+    <!-- <div class="center-body"> -->
+<!-- <div class="sm:text-center">
+        <UAvatar size="3xl"
+            src="https://avatars.githubusercontent.com/u/15265627?s=400&u=d2d9280bdbc5b88bd3573702e5be258dc3c61c2a&v=4"
+            alt="Avatar" />
+        <h1>A fast start Nuxt.js template</h1>
+    </div> -->
+    <HelloWorld />
+</template>

server/tsconfig.json

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

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}