A modern, browser-based Lorem Ipsum generator built with Nuxt 4 and Vuetify. This tool helps developers and writers create placeholder content for testing and layout purposes.

• Generate markdown-formatted placeholder text
• Customizable output options:
  • Headers (with optional underlining)
  • Code snippets (inline or block format)
  • Lists
  • External links (inline or reference-style)
  • Text styling (emphasis and strong)
• Adjustable content length
• Copy to clipboard functionality
• Download as .md, .txt, or .html files
• Dark/Light theme support
• No wrapping option for specific use cases
• Comprehensive accessibility testing with axe-core

https://ipsumify.com/

• Nuxt 4 - Vue.js framework
• Vuetify 3 - Material Design component framework
• Vue 3 - Progressive JavaScript framework
• ES6 Modules - Modern JavaScript module system
• axe-core - Accessibility testing engine
• Puppeteer - Headless browser automation for testing

This project has been migrated to Nuxt 4.2.x using the new directory structure. If you're migrating a similar project, see the comprehensive migration guide:

• Nuxt 4.0 → 4.2.x Migration Guide - Complete step-by-step migration guide
• Netlify Deployment Guide - Complete guide for deploying Nuxt 4 static sites to Netlify
• Accessibility Audit Report - Comprehensive accessibility testing report (WCAG 2.1 AA, IITA, ADA Title II)

The migration guide covers:

• Nuxt 4.0 → 4.2.x upgrade steps
• Directory structure migration (new app/ structure)
• Vuetify integration updates
• Nuxt Content 2.x → 3.x migration
• Configuration updates and common issues

• Node.js 22.x (recommended) or 20.x minimum
• Yarn 1.22.22

1. Clone the repository:

git clone https://github.com/ICJIA/ipsumify-2025
cd ipsumify-2025

2. Install dependencies:

yarn install

Start the development server:

yarn dev

The app will be available at http://localhost:3000

• yarn dev - Start the development server
• yarn build - Build the application for production
• yarn generate - Generate a static site
• yarn preview - Preview the production build locally
• yarn a11y:audit - Run a full accessibility audit (see below)

This project includes comprehensive accessibility testing using axe-core, the same engine powering Google Lighthouse and other industry-standard accessibility tools.

The accessibility audit script tests your application across multiple viewports and themes to ensure WCAG compliance:

1. Start the development server (required for the audit):

yarn dev

2. In a separate terminal, run the audit:

yarn a11y:audit

The audit script will:

• Check that the dev server is running on http://localhost:3000
• Read URLs from public/sitemap.xml
• Test each URL across multiple viewports:
  • Desktop (1920x1080)
  • Tablet (768x1024)
  • Mobile (375x812)
• Test both dark and light themes
• Generate comprehensive reports

After running the audit, you'll find the following files in public/documentation/accessibility/:

• index.html - Comprehensive HTML report with:

  • Summary statistics (violations, passes, pages tested)
  • Violations grouped by rule
  • Detailed violation information with impact levels
  • Full test results for all pages, viewports, and themes
  • Information about axe-core and accessibility standards

• violations.json - JSON file containing all accessibility violations

• errors.json - Same as violations.json (for compatibility)

The script will exit with:

• Exit code 0 if no violations are found
• Exit code 1 if violations are detected

The audit checks for WCAG 2.1 Level A and AA compliance, including:

• Semantic HTML and ARIA attributes
• Keyboard navigation
• Color contrast ratios
• Focus management
• Form labels
• Image alt text
• Heading structure
• Landmark regions
• Interactive element accessibility
• Language attributes

After running the audit, open public/documentation/accessibility/index.html in your browser to view the detailed report.

Generate a static site:

yarn generate

The generated files will be in .output/public (locally). For Netlify deployment, use dist as the publish directory (see Deployment section).

Preview the production build:

yarn preview

This project is configured for easy deployment to Netlify.

📖 See NETLIFY_DEPLOYMENT.md for the complete deployment guide with troubleshooting and best practices.

1. Push your code to a Git repository (GitHub, GitLab, or Bitbucket)
2. In Netlify dashboard, create a new site from Git
3. Netlify will automatically use the configuration from netlify.toml

The netlify.toml file must use these exact settings:

[build]
  command = "yarn generate"
  publish = "dist"

[build.environment]
  NODE_VERSION = "22"  # Match your .nvmrc

Important:

• ✅ Use publish = "dist" (NOT .output/public)
• ✅ Use command = "yarn generate" (no modifications)
• ✅ Match Node version to your .nvmrc file
• ✅ Let Netlify handle the directory mapping - no copy steps needed

The site will be automatically deployed on every push to your main branch.

1. Open the application in your web browser
2. Configure your desired options using the checkboxes
3. Set the number of markdown paragraphs you want to generate (default is 10)
4. Click "Generate some markdown!" to create your placeholder text
5. Use the copy or download buttons to export your content

ipsumify-2025/
├── app/                # Nuxt 4.2.x app directory (new structure)
│   ├── app.vue        # Root component
│   ├── components/    # Vue components
│   │   ├── ThemeToggle.vue
│   │   ├── ResetButton.vue
│   │   └── Toast.vue
│   └── pages/         # Nuxt pages
│       └── index.vue  # Main page
├── scripts/           # Build and testing scripts
│   └── accessibility-audit.mjs  # ES6 accessibility audit script
├── public/            # Static assets
│   ├── documentation/
│   │   └── accessibility/  # Accessibility audit reports
│   │       ├── index.html  # HTML audit report
│   │       ├── violations.json  # JSON violations data
│   │       └── errors.json  # JSON errors data
│   └── sitemap.xml    # Sitemap for audit script
├── nuxt.config.ts     # Nuxt configuration
├── netlify.toml       # Netlify deployment config
├── package.json       # Dependencies and scripts
└── NUXT_4_MIGRATION_GUIDE.md  # Migration guide for Nuxt 4.0 → 4.2.x

• ES6 Modules: The project uses ES6 module syntax (import/export)
• TypeScript: Configuration files use TypeScript
• Accessibility: WCAG 2.1 Level A and AA compliance
• Modern JavaScript: Leverages modern JavaScript features and syntax

Inspired by Lorem Markdownum.

MIT