Skip to content

Upgrade frontend to Vue 3, Vuetify 3, and Vite#68

Open
Somainer wants to merge 1 commit into
masterfrom
claude/upgrade-vue-vuetify-I9QkU
Open

Upgrade frontend to Vue 3, Vuetify 3, and Vite#68
Somainer wants to merge 1 commit into
masterfrom
claude/upgrade-vue-vuetify-I9QkU

Conversation

@Somainer
Copy link
Copy Markdown
Owner

  • Replace Vue CLI/webpack build with Vite 5 (vite.config.ts,
    root-level index.html, vite-plugin-vuetify, vite-plugin-pwa,
    vite-plugin-monaco-editor).
  • Bump core deps: Vue 2.6 -> 3.5, Vuetify 2.1 -> 3.7, Vue Router 3 -> 4,
    Vuex 3 -> Pinia 2, plus axios/socket.io-client/marked/highlight.js
    major upgrades.
  • Convert main.ts, router, store.ts, and the Vuetify plugin to
    Vue 3 APIs (createApp, createRouter/createWebHistory,
    createVuetify, Pinia defineStore).
  • Remove class-component ecosystem (vue-class-component,
    vue-property-decorator, vuex-class, vue-tsx-support). All
    .vue, .vue.ts, and .tsx components now use defineComponent
    and the Composition/Options API.
  • Replace vue-progressbar with an nprogress-based plugin and
    vue-wechat-title with a lightweight v-page-title directive;
    drop materialize-css (BlogDigestNav/comments now use plain
    DOM/Vuetify helpers).
  • Update templates for Vuetify 3 breaking changes: v-content ->
    v-main, list-item slots, variant="text/outlined" on buttons,
    icon="mdi-..." syntax, new v-data-table, v-badge
    content/model-value, v-snackbar location, etc.
  • Migrate lifecycle hooks (beforeDestroy/destroyed ->
    beforeUnmount/unmounted), v-model to modelValue/
    update:modelValue, slot syntax to #name/v-slot, and remove
    .native modifiers.
  • Adapt RoseliaScript renderer to a local event bus so
    postUnload/postLoaded/aPlayerLoaded keep working without
    component $on/$once, and route theme/notification/goTo calls
    through Vuetify 3 composables + Pinia.
  • Refresh TypeScript config for Vite (moduleResolution: bundler,
    jsxImportSource: vue) and drop Vue-2 shim typings.

https://claude.ai/code/session_01LXfFAboCUo34FtmLJiRado

- Replace Vue CLI/webpack build with Vite 5 (`vite.config.ts`,
  root-level `index.html`, `vite-plugin-vuetify`, `vite-plugin-pwa`,
  `vite-plugin-monaco-editor`).
- Bump core deps: Vue 2.6 -> 3.5, Vuetify 2.1 -> 3.7, Vue Router 3 -> 4,
  Vuex 3 -> Pinia 2, plus axios/socket.io-client/marked/highlight.js
  major upgrades.
- Convert `main.ts`, `router`, `store.ts`, and the Vuetify plugin to
  Vue 3 APIs (`createApp`, `createRouter`/`createWebHistory`,
  `createVuetify`, Pinia `defineStore`).
- Remove class-component ecosystem (`vue-class-component`,
  `vue-property-decorator`, `vuex-class`, `vue-tsx-support`). All
  `.vue`, `.vue.ts`, and `.tsx` components now use `defineComponent`
  and the Composition/Options API.
- Replace `vue-progressbar` with an `nprogress`-based plugin and
  `vue-wechat-title` with a lightweight `v-page-title` directive;
  drop `materialize-css` (`BlogDigestNav`/`comments` now use plain
  DOM/Vuetify helpers).
- Update templates for Vuetify 3 breaking changes: `v-content` ->
  `v-main`, list-item slots, `variant="text/outlined"` on buttons,
  `icon="mdi-..."` syntax, new `v-data-table`, `v-badge`
  `content`/`model-value`, `v-snackbar` `location`, etc.
- Migrate lifecycle hooks (`beforeDestroy`/`destroyed` ->
  `beforeUnmount`/`unmounted`), `v-model` to `modelValue`/
  `update:modelValue`, slot syntax to `#name`/`v-slot`, and remove
  `.native` modifiers.
- Adapt `RoseliaScript` renderer to a local event bus so
  `postUnload`/`postLoaded`/`aPlayerLoaded` keep working without
  component `$on`/`$once`, and route theme/notification/goTo calls
  through Vuetify 3 composables + Pinia.
- Refresh TypeScript config for Vite (`moduleResolution: bundler`,
  `jsxImportSource: vue`) and drop Vue-2 shim typings.

https://claude.ai/code/session_01LXfFAboCUo34FtmLJiRado
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.

2 participants