mockup-creation

Mockup Creation

Create polished, interactive UI mockups and prototypes using NuxtJS 4 (Vue) or Next.js (React) with TypeScript and TailwindCSS v4.

Overview

Rapid creation of production-quality mockups with:

NuxtJS 4 (Vue):

• Vue 3 Composition API with TypeScript
• Vite bundler (built-in)
• Auto-imports for components and composables
• Zero-config TypeScript with auto-generated types
• File-based routing from pages/ directory

Next.js (React):

• React 19 with TypeScript v5.1.0+
• Turbopack bundler (default, faster than Webpack)
• App Router with Server/Client Components
• Built-in TypeScript with zero configuration
• File-based routing from app/ directory

Common Features:

• TailwindCSS v4 with modern tooling
• Component-driven architecture
• Server-side rendering (SSR) or static site generation (SSG)
• Interactive reactivity
• Production-ready optimizations

Quick Start

Option A: NuxtJS 4 (Vue-based)

Option A: NuxtJS 4 (Vue-based)

1. Initialize Project

# Create NuxtJS 4 project (TypeScript enabled by default)
npx nuxi@latest init my-mockup
cd my-mockup
npm install

2. Install and Configure TailwindCSS

Install TailwindCSS v4 with Vite plugin:

npm install -D tailwindcss @tailwindcss/vite

Configure nuxt.config.ts:

// https://nuxt.com/docs/4.x/api/configuration/nuxt-config
import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
  devtools: { enabled: true },
  
  typescript: {
    strict: true,
    typeCheck: true
  },
  
  // Auto-import components and composables
  components: [
    {
      path: '~/components',
      pathPrefix: false,
    },
  ],
  
  // App configuration
  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
      title: 'My Mockup',
      meta: [
        { name: 'description', content: 'My mockup description' }
      ],
    }
  },
  
  // Vite configuration with TailwindCSS v4
  vite: {
    plugins: [
      tailwindcss()
    ],
    css: {
      devSourcemap: true
    }
  }
})