feat: playground nuxt3

playground/nuxt3/.gitignore

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

playground/nuxt3/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

playground/nuxt3/README.md

@@ -0,0 +1,42 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

playground/nuxt3/app.vue

@@ -0,0 +1,16 @@
+<template>
+ <div class="w-full h-full flex items-center justify-center">
+ <NuxtPage />
+ </div>
+</template>
+
+<style>
+body {
+ margin: 0;
+}
+
+html,body, #__nuxt {
+ height: 100%;
+ font-family: sans;
+}
+</style>

playground/nuxt3/nuxt.config.ts

@@ -0,0 +1,6 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+ modules: [
+ '@unocss/nuxt',
+ ],
+})

playground/nuxt3/package.json

@@ -0,0 +1,21 @@
+{
+ "name": "nuxt3-playground",
+ "private": true,
+ "scripts": {
+ "build": "nuxt build",
+ "dev": "nuxt dev",
+ "generate": "nuxt generate",
+ "preview": "nuxt preview",
+ "postinstall": "nuxt prepare"
+ },
+ "devDependencies": {
+ "@types/node": "^18",
+ "@unocss/nuxt": "^0.51.8",
+ "nuxt": "^3.4.3"
+ },
+ "dependencies": {
+ "@oku-ui/aspect-ratio": "workspace:^",
+ "@oku-ui/avatar": "workspace:^",
+ "@oku-ui/label": "workspace:^"
+ }
+}

playground/nuxt3/pages/aspect-ratio.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { OkuAspectRatio } from '@oku-ui/aspect-ratio'
+</script>
+
+<template>
+ <div>
+ <div class="w-[300px] rounded-sm overflow-hidden">
+ <OkuAspectRatio :ratio="16 / 9">
+ <img
+ class="object-cover w-full h-full rounded-lg"
+ src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
+ alt="Landscape photograph by Tobias Tullius"
+ >
+ </OkuAspectRatio>
+ </div>
+ </div>
+</template>

playground/nuxt3/pages/avatar.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { OkuAvatar, OkuAvatarFallback, OkuAvatarImage } from '@oku-ui/avatar'
+</script>
+
+<template>
+ <div class="mt-4">
+ <OkuAvatar class="w-40 h-40 bg-gray-400 items-center inline-block overflow-hidden rounded-full">
+ <OkuAvatarImage
+ class="w-full h-full object-cover"
+ src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
+ />
+ <OkuAvatarFallback
+ class="flex items-center text-white font-medium text-2xl h-full w-full justify-center"
+ :delayms="500"
+ >
+ CT
+ </OkuAvatarFallback>
+ </OkuAvatar>
+ </div>
+</template>

playground/nuxt3/pages/index.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Page {
+ name: string
+ path: string
+}
+const pages: Page[] = [
+ {
+ name: 'OkuLabel',
+ path: '/label',
+ },
+ {
+ name: 'OkuAvatar',
+ path: '/avatar',
+ },
+ {
+ name: 'OkuAspectRatio',
+ path: '/aspect-ratio',
+ },
+]
+</script>
+
+<template>
+ <div class="grid grid-cols-3 gap-6">
+ <nuxt-link
+ v-for="page in pages" :key="page.name" :to="page.path" class="bg-cyan-900 hover:text-white text-white cursor-pointer hover:bg-cyan-700 py-4 rounded-lg px-4"
+ >
+ {{ page.name }}
+ </nuxt-link>
+ </div>
+</template>

playground/nuxt3/pages/label.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { OkuLabel } from '@oku-ui/label'
+</script>
+
+<template>
+ <div>
+ <div class="flex flex-col">
+ <OkuLabel deneme class="text-black text-2xl" for="firstName">
+ Label
+ </OkuLabel>
+ <input id="firstName" class="mt-4" type="text" defaultValue="Pedro Duarte">
+ </div>
+ </div>
+</template>

playground/nuxt3/tsconfig.json

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

playground/nuxt3/uno.config.ts

@@ -0,0 +1,6 @@
+// uno.config.ts
+import { defineConfig } from 'unocss'
+
+export default defineConfig({
+ // ...UnoCSS options
+})