Migration from Vue.js SPA to Nuxt with Universal Rendering

[JhumanJ]

Migration of OpnForm from Vue.js SPA to Nuxt with Universal Rendering

Summary

We're looking for contributions to migrate our Vue.js Single Page Application (SPA) for OpnForm (OpnForm Repository) to a Nuxt application using universal rendering. This migration is crucial for enhancing performance, SEO, and accessibility across our projects, including NoteForms.

Key Objectives

• Transform to Nuxt App: Convert the Vue3 SPA to a Nuxt app with universal rendering.
• Scope: Focus on local functionality. Deployment pipeline and Docker image modifications will be addressed later.
• Project Structure: Maintain a single repo structure with the Nuxt app in a client folder.
• Preserve Existing Functionalities:
  • Maintain all routes and middleware.
  • Keep front-end route paths unchanged.
  • Implement server-side data fetching for specific routes.
  • Replace seo-meta mixin with useSeoMeta (Nuxt SEO Meta).
• Documentation: Update npm scripts and README for Nuxt-related changes.

Acceptance Criteria

• Create a Nuxt PR to the vue3 branch.
• Ensure the application functions correctly locally.
• Include updated documentation in the PR.

Collaboration

Feel free to ask questions or request clarifications anytime.

[JhumanJ]

/bounty $400

[algora-pbc[bot]]

💎 $400 bounty created by OpnForm 🙋 If you start working on this, comment /attempt #252 to notify everyone 👉 To claim this bounty, submit a pull request that includes the text /claim #252 somewhere in its body 📝 Before proceeding, please make sure you can receive payouts in your country 💵 Payment arrives in your account 2-5 days after the bounty is rewarded 💯 You keep 100% of the bounty award 🙏 Thank you for contributing to JhumanJ/OpnForm!

Attempt	Started (GMT+0)	Solution
🔴 @rishi-raj-jain	Dec 2, 2023, 10:16:33 AM	WIP
🔴 @nhedger	Dec 6, 2023, 5:40:25 PM	WIP
🔴 @deoxzyKun	Dec 8, 2023, 6:39:33 PM	WIP

[ezhil56x]

@JhumanJ Can I work on this?

[JhumanJ]

Hey, thanks for reaching out @ezhil56x . Are you experienced with nuxt and vue? Also I discussed few hours ago about this task with @rishi-raj-jain, and he said he'd do it. Let's give me a few hours to see if it's still the case.

[ezhil56x]

Hey, thanks for reaching out @ezhil56x . Are you experienced with nuxt and vue? Also I discussed few hours ago about this task with @rishi-raj-jain, and he said he'd do it. Let's give me a few hours to see if it's still the case.

Yeah I can do this. Also open to collaborate with @rishi-raj-jain, if he is interested

[rishi-raj-jain]

/attempt #252

Options

• Cancel my attempt

[rishi-raj-jain]

@JhumanJ

Yes, I'm more than hella interested in getting this done!

[rishi-raj-jain]

Please assign this to me?

[rishi-raj-jain]

Thank you 🙏

[JhumanJ]

I just assigned it to you @rishi-raj-jain. Please update us on progress :) I'll let you guys discuss and see if you feel like collaborating @ezhil56x

[rishi-raj-jain]

Sure thing!

[ezhil56x]

@rishi-raj-jain Are you up for collaborating?

[rishi-raj-jain]

@ezhil56x

Would like to attempt this first, I've been taking on migrations recently and wanting to getting good at them.

Will definitely loop you in if require your any help!

[rishi-raj-jain]

I've reached out to @danielroe for his guidance if there's any integration of Laravel + Nuxt3 that can replace the things and help smoothly migrate to Nuxt3.

[JhumanJ]

Just took a detailed look to https://github.com/fumeapp/laranuxt, and it's a great inspiration, especially for config and folder structure!

[nhedger]

I would have loved to take on the challenge, but since @rishi-raj-jain is already assigned to the issue, I'll instead take the opportunity to say that my https://github.com/nhedger/nuxt-sanctum package could help with the authentication part (sanctum).

If you end up not doing it, I'd appreciate it if you let me know @rishi-raj-jain.

Good luck!

[rishi-raj-jain]

Hey @nhedger,

I'm in discussions with @JhumanJ on the approach we're gonna take. Currently, swinging between custom routing and default routing.

As far as I remember, per @JhumanJ we're gonna use APIs instead of integration Laravel, right @JhumanJ?

[nhedger]

With Sanctum you would also call your Laravel API, the only difference being that you do not need to handle tokens for authenticating the first-party frontend. You use session cookies that handle that for you, which is more convenient and more secure. Backend and frontend apps must share the same top-level domain, though.

[JhumanJ]

Thanks for your interest @nhedger! Sanctum is great, tbh we didn't use it this project is a fork from another project, which I created when I didn't know about Sanctum. I guess for now it's just easier to not use it (less code changes), but it could be interesting to investigate this later on

[rishi-raj-jain]

@ezhil56x @nhedger

Feel free to take this up, I am not able to make the existing route files + middleware without using Nuxt pages as the approach..

Here's what you can refer to in the router config of Nuxt: https://nuxt.com/docs/api/nuxt-config#router

[nhedger]

Is there a requirement NOT to use Nuxt pages here?

[JhumanJ]

There isn't, but the existing route path can't change :(

[nhedger]

/attempt #252

Options

• Cancel my attempt

[rishi-raj-jain]

Wohoo, all the best!

Looking forward to learning :D

[viveknyx]

/attempt #252

Options

• Cancel my attempt

[algora-pbc[bot]]

[!NOTE] The user @nhedger is already attempting to complete issue #252 and claim the bounty. We recommend checking in on @nhedger's progress, and potentially collaborating, before starting a new solution.

[algora-pbc[bot]]

@nhedger: Reminder that in 7 days the bounty will become up for grabs, so please submit a pull request before then 🙏

[nhedger]

I find myself unable to continue, so I've canceled my attempt.

[algora-pbc[bot]]

@deoxzyKun: Reminder that in 7 days the bounty will become up for grabs, so please submit a pull request before then 🙏

[algora-pbc[bot]]

The bounty is up for grabs! Everyone is welcome to /attempt #252 🙌

[JhumanJ]

We're working on this internally, so closing this!