Creating Vue Components

Creating Vue Components

Vue 3 component patterns with glass-morphism design for AnimeList.

Component Template

<script setup lang="ts">
import { ref } from "vue";

interface Props {
    title: string;
    count?: number;
}

const props = withDefaults(defineProps<Props>(), {
    count: 0,
});

const emit = defineEmits<{
    (e: "update", value: number): void;
}>();
</script>

<template>
    <div
        data-testid="component-name"
        class="rounded-xl border border-white/20 bg-white/10 p-6 backdrop-blur-xs"
    >
        <!-- Content -->
    </div>
</template>

Design System

Background Gradients

<!-- Full-screen gradient -->
<div class="bg-gradient-to-br from-purple-600 via-purple-700 to-pink-600">

<!-- Animated particles (optional) -->
<div class="fixed inset-0 opacity-10">
    <div class="absolute left-8 top-12 h-3 w-3 animate-pulse rounded-full bg-white"></div>
    <div class="absolute right-16 top-20 h-2 w-2 animate-ping rounded-full bg-pink-300"></div>
</div>

Glass Cards

<!-- Primary card -->
<div class="rounded-2xl border border-white/20 bg-white/10 p-8 backdrop-blur-xs">

<!-- Interactive card -->
<div class="rounded-xl border border-white/20 bg-white/10 p-6 backdrop-blur-xs
            transition-all duration-300 hover:border-white/30 hover:bg-white/15
            hover:shadow-lg hover:shadow-black/20">

Typography

<!-- Headings -->
<h1 class="text-3xl font-bold text-white drop-shadow-md">Page Title</h1>
<h2 class="text-2xl font-bold text-white drop-shadow-md">Section</h2>
<h3 class="text-lg font-semibold text-white drop-shadow-xs">Card Title</h3>

<!-- Body text -->
<p class="leading-relaxed text-white/90 drop-shadow-xs">Description</p>
<p class="text-lg text-white/80 drop-shadow-xs">Subtitle</p>

<!-- Stats -->
<p class="text-2xl font-bold text-purple-200 drop-shadow-xs">12</p>
<p class="text-2xl font-bold text-green-200 drop-shadow-xs">87</p>

Buttons

<!-- Primary -->
<button class="rounded-xl border border-white/30 bg-white/20 px-6 py-3
               font-medium text-white backdrop-blur-xs transition-all duration-200
               hover:border-white/40 hover:bg-white/30 hover:shadow-lg
               hover:shadow-black/20 active:scale-95">
    Button
</button>

<!-- Secondary -->
<button class="rounded-lg border border-white/20 bg-white/10 px-4 py-2
               text-sm font-medium text-white/90 backdrop-blur-xs
               transition-all duration-200 hover:bg-white/20 active:scale-95">
    Secondary
</button>

Navigation

<RouterLink
    class="group flex items-center gap-3 rounded-xl border border-transparent
           px-4 py-3 text-sm font-medium text-white/90 transition-all duration-200
           hover:border-white/20 hover:bg-white/10 hover:text-white
           hover:shadow-md hover:shadow-black/20 active:scale-95"
    :class="{
        'border-white/30 bg-white/15 text-white shadow-md shadow-black/20': isActive,
    }"
>
    <span class="text-lg drop-shadow-xs">📺</span>
    <span>Watch Lists</span>
</RouterLink>

Icons (Emoji System)

<span class="text-lg drop-shadow-xs">🏠</span>  <!-- Home -->
<span class="text-lg drop-shadow-xs">📺</span>  <!-- Watch Lists -->
<span class="text-lg drop-shadow-xs">⭐</span>  <!-- Favorites -->
<span class="text-lg drop-shadow-xs">⚙️</span>  <!-- Settings -->
<span class="text-2xl drop-shadow-xs">▶️</span> <!-- Currently Watching -->
<span class="text-2xl drop-shadow-xs">📝</span> <!-- Plan to Watch -->

Brand Icon

<div class="flex h-8 w-8 items-center justify-center rounded-lg
            border border-white/30 bg-white/20 backdrop-blur-xs">
    <img src="/assets/images/darkness_32x32.png"
         alt="Darkness from KonoSuba"
         class="h-6 w-6 rounded-sm" />
</div>

Layout Patterns

Sidebar

<aside class="flex w-64 flex-col border-r border-white/20 bg-black/30
              text-white backdrop-blur-xs">
    <div class="flex h-16 items-center justify-center border-b border-white/20 bg-black/40">
        <!-- Brand -->
    </div>
    <nav class="flex-1 space-y-2 p-4">
        <!-- Nav items -->
    </nav>
</aside>

Header

<header class="border-b border-white/20 bg-black/20 px-6 py-4 backdrop-blur-xs">
    <div class="flex items-center justify-between">
        <nav class="flex items-center space-x-2 text-sm text-white/80">
            <!-- Breadcrumbs -->
        </nav>
    </div>
</header>

Grids

<div class="grid grid-cols-1 gap-6 md:grid-cols-3">  <!-- 3-col -->
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">  <!-- 2-col -->
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">  <!-- 4-col -->

Color Palette

Testing Requirements

Always include data-testid attributes:

<div data-testid="anime-card">
<button data-testid="submit-button">
<input data-testid="search-input" />

Test pattern:

import { mount } from "@vue/test-utils";

it("should render", () => {
    const wrapper = mount(Component);
    expect(wrapper.find('[data-testid="anime-card"]').exists()).toBe(true);
});

Popup Constraints

<!-- Fixed 320x240 dimensions -->
<div class="h-60 w-80 overflow-hidden">

Checklist

• Use <script setup lang="ts">
• Apply glass-morphism (bg-white/10 backdrop-blur-xs border-white/20)
• Include data-testid attributes
• Use typography with drop-shadow-xs/md
• Add hover/active transitions
• Mobile-first responsive design
• Proper semantic HTML