[TRI-1250] Framework: support for Nuxt

[samejr]

trafficstars

Build support for Nuxt into Trigger.dev

Please make sure to use Typescript for all code

Task 1 - Nuxt Adaptor

• [ ] Create a new folder in packages called nuxt
• [ ] Create the adaptor for Nuxt. Use this Next.js adaptor code as reference when creating yours. Include all setup configurations to fully support the framework, e.g. Next.js requires adaptor support for both App and Pages routers.
• [ ] Create a basic Nuxt project that uses the adaptor in examples/nuxt folder. Include a basic Job in Trigger.dev, e.g. a simple Job that just does a delay inside it. Screen grab the full Run dashboard page showing it successfully worked. Here are examples of how to do cross-project references in package.json and tsconfig.json.
• [ ] Provide a screen grab of your terminal showing the Adaptor is working

Task 2 – Add a README.md file

• [ ] Create a new README.md file inside the packages/nuxt folder and copy in the contents from packages/nextjs/README.md. Adjust the wording to reference Nuxt where needed, including updating the the URLs.

Task 3 – Write the documentation

• [ ] Locate the manual-setup-nuxt.mdx folder in /docs/_snippets/. Use this file to write your documentation, overwriting any contents of that file. Follow the structure of this Next.js example for reference when writing yours.
• [ ] Update the table at the bottom of the client-adaptors.mdx page with the framework you’ve worked on.

Task 4 – Update the webapp onboarding

• [ ] In the route.tsx page located in _app.orgs.$organizationSlug.projects.$projectParam.setup.nuxt replace the <FrameworkComingSoon/> component with your new onboarding steps. Follow the same structure as the Next.js example when creating your own. Ignore the very top step for adding this framework to a new project, just focus on the steps to add it to an existing project (so don’t include the <RadioGroup/> toggle selector at the top). Make sure you also include the useProjectSetupComplete(); hook at the top of the page – this triggers a particle effect when the new job is successfully created and redirects to the Jobs list 🥳 .
• [ ] In the FrameworkSelector.tsx file, add “supported” to the framework you’ve worked on.

_{From SyncLinear.com | TRI-1250}

[samejr]

/bounty $200

[algora-pbc[bot]]

~~## 💎 $200 bounty • Trigger.dev (YC W23)~~

~~### Steps to solve:~~ ~~1. Start working: Comment /attempt #447 with your implementation plan~~ ~~2. Submit work: Create a pull request including /claim #447 in the PR body to claim the bounty~~ ~~3. Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts~~

~~Thank you for contributing to triggerdotdev/trigger.dev!~~

~~Add a bounty • Share on socials~~

[neo773]

/attempt #447

Options

• Cancel my attempt

[neo773]

@samejr Can I assigned to this as I was the first one to claim the issue?

[samejr]

@neo773 i've just assigned you to this issue for this attempt.

[algora-pbc[bot]]

💡 @neo773 submitted a pull request that claims the bounty. You can visit your org dashboard to reward.

[playgude2]

Is this issue is still open ? Can I look into this issue?

[algora-pbc[bot]]

🎉🎈 @neo773 has been awarded $200! 🎈🎊

[rishi-raj-jain]

@samejr

I think this issue is resolved?

[samejr]

This issue hasn't been merged yet, but I've awarded the bounty as the PR is good. We're still working out how best to proceed with some of these frameworks.

[IvanBernatovic]

Any news on this? #460 looks good, why not merge the framework/nuxt branch and put Beta label on it or something to get more people testing it out? I'd be happy to test if needed.

[genu]

I'd like to try this out in a nuxt project. Is there anything left pending for this?

[nikuscs]

Sorry for the pressure, but when will this eventually make it to the master?

[samejr]

There is a branch with the Nuxt package from that PR but we haven't had time to test and add CLI automatic installation support.

For now, you can use this file as reference: https://github.com/triggerdotdev/trigger.dev/blob/frameworks/nuxt/packages/nuxtjs/src/index.ts

That is the only code required to create an api/trigger POST route in your app. This is all that the framework packages do. You will have to follow some other steps like setting up environment variables, you can use the Express manual setup guide for now: https://trigger.dev/docs/documentation/guides/manual/express

[IvanBernatovic]

@samejr I tested those PR diffs in my Nuxt project and managed to get it working. To everyone who's gonna test Nuxt integration like this: The biggest bump was verifying the Dev environment key. To validate it I had to run npx @trigger.dev/cli@latest init which also wrongfully recognized Nuxt project as Remix project and added unnecessary npm dependency. But it's easy to clean it up and kind of expected since published npm package doesn't have Nuxt support yet.

@samejr The reason this took a long time is I assumed npx @trigger.dev/cli@latest init only adds required dependencies and fields to package.json so I ignored it. During that time I couldn't get setup working due to unverified API key, as mentioned before.

[platform-kit]

Hi @IvanBernatovic, any update on shipping Nuxt compatability?

[madebyfabian]

Hi there! Would love to see this supported by default, since I successfully used trigger.dev in a Next.js project, I want to also migrate to it in other Nuxt projects. Is there anything we can do to get this merged?

Managed to get it to run somehow. But it's only registering jobs when directly defined inside the same file where the server gets created (/server/api/trigger.ts). But not they are in a /jobs folder and imported with import '@/jobs'. Did somebody experience the same?

[robinsimonklein]

Hi, any news on this @samejr ? 👀

[samejr]

Hey, we won’t be providing an official Nuxt package for v2. But if someone has created a good working example we’re more than happy to share it widely.

Instead, v3 will be shipping next month and will not require any framework specific code: https://trigger.dev/blog/v3-announcement

[Flowko]

that sounds great, but how long till v3 is out of beta ? would love to use trigger.dev, now kinda stuck as i cant use neither of them on my nuxt project without an easy plug in

[samejr]

Hey @Flowko - we're about 1 week away from releasing the developer preview. We'll be dropping an announcement as soon as it's ready on Twitter(X) and in our Discord if you want to get notified.

[pi0]

Hi. Nitro/Nuxt maintainer here! Please let me know if need any helps, particularly I'm interested to see how we can integrate triggerdev with nitro tasks API and good luck with v3 release 👍🏼

[samejr]

Hey @pi0 thanks for offering to help 👍. We're slowly letting people into v3 now which is framework agnostic so it should just work with Nuxt. We do have users with Nuxt apps so I might reach out for help if we have any issues testing as none of us have used Nuxt. 😀 Very happy to discuss nitro tasks too – maybe on our Discord is best for that discussion.

[DavidDeSloovere]

If you get Pooya on board for this, it will only get better.

[matt-aitken]

I'm closing this issue because in v3 the product is framework independent and works with Nuxt. https://trigger.dev/docs/quick-start