Vue 3 Migration #2178
Merged
Vue 3 Migration #2178
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Options used: ✔ Project name: … dandi-archive ✔ Which preset would you like to install? › Default (Adds routing, ESLint & SASS variables) ✔ Use TypeScript? … Yes ✔ Would you like to install dependencies with yarn, npm, pnpm, or bun? › yarn
[plugin:vite:vue] <template v-for> key should be placed on the <template> tag.
Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/filesize.js?v=b525104e' does not provide an export named 'default'
Required by json-schema-ref-parser, see https://github.com/APIDevTools/json-schema-ref-parser#browser-support
This library is not compatible with Vue 3. Removing temporarily until a replacement is found.
The `vue-social-sharing` package is not compatible with Vue 3. We will need to find an alternative package or implement the functionality ourselves.
This requires a rewrite to work with Vue 3, so it will be done in a separate PR.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
#2167
Vue 3 Migration
This is the first in a series of PRs that upgrade the web client from Vue 2 to Vue 3. This PR bootstraps the Vue 3 app, configures Vite, updates most of the typescript code to Vue 3 syntax, and updates all Vuetify components for the breaking changes introduced in Vuetify v3 (there are many).
Approach / how are the commits organized?
My plan is to open a series of PRs for the Vue 3 migration, all targeting the
vue3-feature-branchbranch. Once all the Vue 3 migration work has been merged into that branch, we can merge it intomaster.This initial PR has a substantial number of commits. I took care to commit things in the same order that I worked. So, you should be able to more or less follow the exact process that I took to implement this by going in commit order.
The approach I took to doing this migration was the following:
vue3/subdirectory, parallel to the existingweb/directory containing the current Vuetify 2 app.web/directory (one by one when possible, or in groups in the case of shared components) into thevue3/subdirectory, applying any changes as needed.vue3/until the UI renders properlyAlong the way, I kept running the
eslint-plugin-vuetifyeslint plugin, which automatically applied a lot of the Vuetify changes needed. However, this plugin doesn't account for all the breaking changes, so in many cases I needed to follow the Vuetify 3 upgrade guide an fix things manually.Finally, there were some cases where Vuetify 3 simply broke things visually (this was the case for a lot of
v-row/v-colusage; it appears they've switched away from using Flexbox for those); most of those issues I fixed by hand in the commit titledFix vuetify styles manually.Once the
vue3-feature-branchis fully converted to Vue 3, I'll rename thevue3/directory back to the oldweb/.Remaining work
To keep the scope/complexity of the PR as low as possible, I left out some other work that needs to be done to completely migrate to Vue 3. These will all be done in follow up PRs to the
vue3-feature-branch.vue-social-sharingpackage with a Vue 3-compatible alternativevue-cookie-lawpackage with a Vue 3-compatible alternative (or implement this manually, maybe a 3rd party package isn't needed)