Mockup Creation

Mockup Creation

Create polished, interactive UI mockups and prototypes using Vue.js 3 with TypeScript, Vite, and TailwindCSS.

Overview

Rapid creation of production-quality mockups with:

• Vue.js 3 Composition API with TypeScript
• Vite for fast development
• TailwindCSS v4+ with Vite plugin integration
• Component-driven architecture
• Interactive reactivity

Quick Start

1. Initialize Project

# Create Vite + Vue + TypeScript project
npm create vite@latest my-mockup -- --template vue-ts
cd my-mockup
npm install

2. Install and Configure TailwindCSS

Install TailwindCSS with Vite plugin (v4+):

npm install tailwindcss @tailwindcss/vite

Configure vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss()
  ]
})

Import in src/style.css:

@import "tailwindcss";

Import in src/main.ts:

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

3. Start Development

npm run dev
# Opens http://localhost:5173

Workflow

1. Define Structure

Identify mockup requirements:

• Layout type (single page, dashboard, multi-page)
• Sections needed (header, hero, features, footer, sidebar)
• Responsive breakpoints (mobile, tablet, desktop)
• Interactive elements (forms, modals, dropdowns)

2. Create Component Architecture

Organize by functionality:

src/
├── components/
│   ├── layout/        # Header, Footer, Sidebar
│   ├── ui/            # Button, Card, Modal, Input
│   └── sections/      # Hero, Features, Testimonials
├── views/             # Page-level components
├── composables/       # Shared logic (useModal, useForm)
└── types/             # TypeScript interfaces

3. Build Components

Example: Type-safe Button Component

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  variant?: 'primary' | 'secondary' | 'outline'
  size?: 'sm' | 'md' | 'lg'
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
  size: 'md'
})

const buttonClasses = computed(() => {
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-600 text-white hover:bg-gray-700',
    outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50'
  }
  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg'
  }
  return `font-semibold rounded-lg transition ${variants[props.variant]} ${sizes[props.size]}`
})
</script>

<template>
  <button :class="buttonClasses">
    <slot />
  </button>
</template>

4. Apply Responsive Design

Use TailwindCSS breakpoints:

• sm: (640px), md: (768px), lg: (1024px), xl: (1280px), 2xl: (1536px)

Responsive Grid Example:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <Card v-for="item in items" :key="item.id" />
</div>

5. Add Interactivity

Composable Pattern:

// composables/useModal.ts
import { ref } from 'vue'

export function useModal() {
  const isOpen = ref(false)
  const open = () => { isOpen.value = true }
  const close = () => { isOpen.value = false }
  return { isOpen, open, close }
}

6. Build for Production

npm run build      # Build to dist/
npm run preview    # Preview production build

Common Patterns

Landing Page

<template>
  <div class="min-h-screen flex flex-col">
    <Header />
    <main class="flex-1">
      <Hero />
      <Features />
    </main>
    <Footer />
  </div>
</template>

Dashboard Layout

<template>
  <div class="flex h-screen bg-gray-100">
    <Sidebar class="w-64 bg-white shadow-lg" />
    <div class="flex-1 flex flex-col">
      <TopBar class="bg-white shadow-sm" />
      <main class="flex-1 overflow-y-auto p-6">
        <router-view />
      </main>
    </div>
  </div>
</template>

Design System

Colors

• Primary: blue-600, Secondary: gray-600
• Success: green-600, Warning: yellow-600, Error: red-600
• Neutral: gray-100 to gray-900

Spacing

Use consistent scale: p-1 (4px), p-2 (8px), p-4 (16px), p-6 (24px), p-8 (32px)

Typography

• Headings: text-4xl, text-3xl, text-2xl, text-xl
• Body: text-base (16px)
• Weights: font-normal, font-medium, font-semibold, font-bold

Advanced Guides

For detailed implementations:

• Component Library - Complete reusable components
• TailwindCSS Patterns - Advanced styling
• Vue Composition API - State management
• Animations - Transitions and effects
• Examples - Complete mockup examples
• Deployment - Build and hosting

Scripts

Helper scripts available in scripts/ (Bash and PowerShell versions):

create-component.sh / .ps1 - Generate Vue components with TypeScript boilerplate

# Linux/macOS
./scripts/create-component.sh ComponentName ui

# Windows
.\scripts\create-component.ps1 -ComponentName ComponentName -Type ui

build-deploy.sh / .ps1 - Build and prepare for deployment

# Linux/macOS
./scripts/build-deploy.sh

# Windows
.\scripts\build-deploy.ps1

Troubleshooting

TailwindCSS not working:

• Restart dev server after vite.config.ts changes
• Verify @import "tailwindcss"; in CSS file
• Check Vite plugin is correctly configured

TypeScript errors:

• Install Volar extension (not Vetur)
• Enable "Take Over Mode" in VS Code

HMR issues:

rm -rf node_modules/.vite
npm run dev

Large bundle size:

• Use dynamic imports: () => import('./Component.vue')
• Analyze with: npm run build -- --mode analyze

Best Practices

1. Component Design: Small, single-purpose, reusable
2. TypeScript: Clear interfaces for props and emits
3. TailwindCSS: Prefer utilities over custom CSS
4. Composables: Extract shared logic
5. Responsive: Mobile-first approach
6. Performance: Lazy load routes and large components
7. Accessibility: ARIA labels and keyboard navigation