Skip to content

Update to Node 18+, Vue 3, and Nuxt 3#219

Open
abroadbent wants to merge 9 commits intomainfrom
update-nuxt3
Open

Update to Node 18+, Vue 3, and Nuxt 3#219
abroadbent wants to merge 9 commits intomainfrom
update-nuxt3

Conversation

@abroadbent
Copy link
Contributor

@abroadbent abroadbent commented Oct 29, 2025

Since I had this in progress, I decided to finish it. This is a significant change, but a good one long term if we don't replatform. Happy to keep this open until the other PRs are merged and I can resolve any conflicts then.

This updates to Vue 3 and Nuxt 3, and works with Node 18+ (I tested with Node 22). Tailwind goes from V1 to V3 as well. Styling is very close but not the same, so I am looking for feedback on whether there are any must-have changes.

abroadbent and others added 9 commits October 28, 2025 22:53
- Update Tailwind CSS v1 to v3 syntax (@tailwind preflight → @tailwind base)
- Fix deprecated @Variants directive using @layer utilities
- Add custom Tailwind config (w-1/7, blue colors, minHeight)
- Fix date-fns v3 format tokens (D → d, bracket literals → escaped quotes)
- Add VueFire SSR keys to prevent warnings
- Replace vue-js-popover with vue3-popper for Vue 3 compatibility
- Update navigation component Tailwind classes (pin-* → top-0/left-0/right-0)
- Fix section heading color props (explicitly set grey=false when blue=true)
- Standardize logo icon sizes across all icon types
- Center Lansing Codes logo in welcome section
- Adjust welcome section padding and background positioning
- Copy sponsor logos from static/ to public/ directory for Nuxt 3
- Fix 'Become a Sponsor' link sizing

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Resolved conflicts:
- components/card--event.vue: Kept Composition API (script setup) version and added safeDescription computed property
- package-lock.json: Regenerated after taking incoming changes

Changes from main:
- Updated CONTRIBUTING.md with Node.js version details
- Added windows-installer-nodejs.png image
- Added MITN sponsor logo
- Package dependency updates

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Nuxt 3 officially requires Node.js 18.0.0 or newer. Updated the engines
field in package.json to reflect this requirement and prevent issues
with users running older Node.js versions.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Add .output directory to .gitignore for Nuxt 3
- Remove nuxt.config.js.old (obsolete Nuxt 2 config)
- Update popover.js comments to reflect vue3-popper migration

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Move remaining static files (favicon.ico, resources image) to public/
- Remove static/ directory (Nuxt 2 - replaced by public/ in Nuxt 3)
- Remove store/ directory (Vuex stores - replaced by composables/)
  - events.js → composables/useEvents.js
  - groups.js → composables/useGroups.js
  - sponsors.js → composables/useSponsors.js

This completes the Nuxt 2 to Nuxt 3 folder structure migration.
All static assets now in public/ and state management via composables.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Remove legacy tailwind.js (884 lines, Tailwind v1 config from Nuxt 2)
- Migrate custom font families to tailwind.config.js:
  - font-heading: Montserrat with fallbacks
  - font-sans: System font stack with emoji support
  - font-serif: Georgia-based serif stack
  - font-mono: Consolas-based monospace stack
- Migrate custom screen breakpoints (Bootstrap-like):
  - sm: 576px, md: 768px, lg: 992px, xl: 1200px
- All customizations now in tailwind.config.js (Tailwind v3)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Set :grey="false" when :blue="true" in section-heading component
- Resolves color conflict where grey default was overriding blue
- "Lansing Codes" heading and horizontal bar now display in blue

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant