generator-alpine-pico

Yeoman generator for Alpine.js + Pico.css frontend projects

Installation

First, install Yeoman and generator-alpine-pico:

npm install -g yo
npm install -g generator-alpine-pico

Or link locally for development:

cd generator-alpine-pico
npm link

Usage

Generate your new project:

yo alpine-pico

The generator will prompt you for:

• Project name
• Project description
• Author name
• Whether to include example Alpine.js components

What's Generated

The generator creates a minimal frontend project with:

• index.html - Main HTML file with Alpine.js and Pico.css CDN links
• package.json - npm configuration with http-server for local development
• README.md - Project documentation
• .gitignore - Git ignore file

Optional Examples

If you choose to include examples, the generated HTML will contain:

• Counter component (basic reactivity)
• Toggle component (show/hide with transitions)
• Form component (two-way binding and form handling)

Development Server

After generation, run:

npm install
npm start

This starts a local server at http://localhost:8080

Technologies

• Alpine.js - Lightweight JavaScript framework
• Pico.css - Minimal CSS framework for semantic HTML

License

MIT