Skip to content

Migrate from Vue 2 to Vue 3 with Vite and Pinia#87

Open
emonty wants to merge 2 commits into
17thshard:masterfrom
emonty:vue-v3
Open

Migrate from Vue 2 to Vue 3 with Vite and Pinia#87
emonty wants to merge 2 commits into
17thshard:masterfrom
emonty:vue-v3

Conversation

@emonty
Copy link
Copy Markdown

@emonty emonty commented Jan 30, 2026

Vue 2 is EOL. Update to the most recent Vue so we're in support. Obviously other shifts fall out of that.

  • Upgrade Vue 2 → Vue 3 with Composition API support
  • Replace Vue CLI with Vite for faster builds
  • Replace Vuex with Pinia for state management
  • Replace v-tooltip with floating-vue
  • Replace vue-feather-icons with lucide-vue-next
  • Replace vue-svg-pan-zoom with panzoom library directly

Breaking changes addressed:

  • Update directive lifecycle hooks (bind→mounted, unbind→unmounted)
  • Update Vue Router to v4 (createRouter, createWebHashHistory)
  • Fix reactivity for shared category objects across components
  • Replace custom Tooltip component with floating-vue v-tooltip directive

Add a new linear/list view alongside the circular visualization:
- New LinearDiagram, LinearEntry, and LinearArc components
- View toggle in Legend options (circular/linear)
- URL parameter ?view=linear for shareability
- Honors "Order by" sorting selector
- Filtered entries disappear (vs just dimming)
- Pan/zoom support via svg-pan-zoom

Updated yarn.lock because otherwise npm run serve just plain didn't
work.
Vue 2 is EOL. Update to the most recent Vue so we're
in support. Obviously other shifts fall out of that.

- Upgrade Vue 2 → Vue 3 with Composition API support
- Replace Vue CLI with Vite for faster builds
- Replace Vuex with Pinia for state management
- Replace v-tooltip with floating-vue
- Replace vue-feather-icons with lucide-vue-next
- Replace vue-svg-pan-zoom with panzoom library directly

Breaking changes addressed:
- Update directive lifecycle hooks (bind→mounted, unbind→unmounted)
- Update Vue Router to v4 (createRouter, createWebHashHistory)
- Fix reactivity for shared category objects across components
- Replace custom Tooltip component with floating-vue v-tooltip directive

Other improvements:
- Fix SVG focus outlines on click
- Fix linear view sizing with preserveAspectRatio="slice"
- Update tooltip options for floating-vue compatibility
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