Vue 2 -> 3 PROOF OF CONCEPT #7
Conversation
…ews and components, update eslint
… some icons and styles
| "vue-typer": "^1.2.0", | ||
| "vuetify": "^2.4.0", | ||
| "vuex": "^3.4.0" | ||
| "vuetify": "^3.7.3", |
There was a problem hiding this comment.
Most of my effort so far has been in supporting this transition
| "vuetify": "^2.4.0", | ||
| "vuex": "^3.4.0" | ||
| "vuetify": "^3.7.3", | ||
| "vuex": "^4.1.0" |
| "vue": "^2.6.11", | ||
| "vue-async-computed": "^3.9.0", | ||
| "vite-plugin-vuetify": "^2.0.4", | ||
| "vue": "^3.5.12", |
There was a problem hiding this comment.
This is a surprisingly easy part of the transition, since the composition and options apis can be used side by side in the same file.
| "last 2 versions", | ||
| "not dead" | ||
| ] | ||
| ], |
There was a problem hiding this comment.
I am curious about your internal Browser stats, could the be made more accurate. This can shave some weight from the bundle size.
| use: { | ||
| /* Base URL to use in actions like `await page.goto('/')`. */ | ||
| baseURL: 'https://openalex.org/',//'http://127.0.0.1:3000', | ||
|
|
There was a problem hiding this comment.
This should be made configurable and might even be something that you can override with a comandline flag but for Dmo purposes this should be okay.
| > | ||
| <v-list-item-icon> | ||
| <span> | ||
| <v-icon :disabled="menuOptions.length === 1">{{ option.icon }}</v-icon> |
There was a problem hiding this comment.
I Converted these deprecated Veutify VListItemIcon components to spans incase we need a wrapper element. So far, I see no need for them and think they could be removed.
| @keyup.enter="onEnterKeyup" | ||
| > | ||
| <!-- Chip Slot --> | ||
| <template v-slot:chip> |
There was a problem hiding this comment.
There is a lot of very Important logic and functionality wrapped up in this element. I am lacking complete knowledge of everything that is expected of this element. If I was undertaking this conversions, I would spend some time writing test coverage for this functionality . I would want to be confident that it continues to work it does now.
| this.isLoading = true | ||
| <script setup lang="ts"> | ||
| import { ref, useTemplateRef, computed, watch, onMounted, onBeforeUnmount, toRaw } from 'vue'; |
There was a problem hiding this comment.
here you can see an alternative syntax for the composition api and the setup function.
Using <script setup> means you’re exclusively working with the Composition API in that file.
Options API Composition API (in <script setup>)
data ref or reactive
methods Define regular functions
computed computed function
watch watch or watchEffect
mounted onMounted lifecycle hook
props Automatically exposed or defineProps
emit defineEmits
Screen.Recording.2024-11-07.at.21.40.04.movOn the left of the split is Vue 3 and the right is Vue 2 
|
|
@jasonpriem @caseydm @h1-the-swan @nolanm1122 |
3 participants
Migration to Modern Tooling: Vue 3, Vite, TypeScript, and Vuetify 3+
This pull request serves as a Proof of Concept, demonstrating how the codebase can be modernized while aligning with our shared values of openness, progress, and community engagement. Given that this is a demo codebase, I’ve focused on converting the homepage and its core functionality to showcase my skills and willingness to take on this project.
Key updates include:
These changes reflect my understanding of current best practices, but they are by no means set in stone. I’m eager to collaborate with the team to refine these choices and ensure our tech stack aligns perfectly with the project’s mission and goals.
Installation and Running the Project
Using Yarn:
Using NPM:
Visual Regression Testing with Playwright
To ensure visual consistency, I’ve implemented Playwright for visual regression testing. Here’s how it works:
Run the following to create baseline images from the live site:
yarn test:vi --update-snapshots # or npm run test:vi --update-snapshotsUpdate the baseURL in playwright.config.ts to point to your localhost:
Then run:
yarn test:vi # or npm run test:viPlaywright will compare local changes to the baseline and generate an HTML report (only on test failure) highlighting any discrepancies. This ensures a pixel-perfect UI across browsers and states.
A Personal and Collaborative Approach
Joining your team would be an exciting opportunity to collaborate on a product that genuinely matters. My priority would be to immerse myself in the domain, understanding not only the technical aspects but also the user needs and business goals that drive our work.
I see this project as a collaborative effort where every decision is guided by user-centric values. I’m eager to engage in discussions, share ideas, and collectively shape the product’s future. I want my work to support the team, enhance the user experience, and align with our shared mission.
Why I’m Excited About This Opportunity
Working on a project like this aligns perfectly with my personal and professional values. Moving away from large-scale consumer products to something with deeper integrity feels incredibly fulfilling and promising.
I’m excited to contribute to a product that serves the community and drives positive change. The chance to collaborate with a passionate team on meaningful work is exactly what I’ve been looking for. Let’s build something impactful together.