Skip to content

chore: Add/nuxt gforms example #137

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 10 commits into from
May 14, 2025
Merged

chore: Add/nuxt gforms example #137

merged 10 commits into from
May 14, 2025
+1,803 −0

Conversation

Fran-A-Dev
Copy link
Contributor

@Fran-A-Dev Fran-A-Dev commented Apr 8, 2025 •
edited by moonmeister
Loading

Description

This is the example repo from my article on the topic.
https://github.com/Fran-A-Dev/nuxt3-headlesswp-gravity-forms

This will have updates for the form-field support with dynamic mapping to components using the input/inputType prop support at a later time.

Related Issue

Dependant PRs

Type of Change

  • 📄 Example update (no functional changes)

How Has This Been Tested?

Screenshots

Checklist

  • I have read the CONTRIBUTING document
  • My code follows the project's coding standards
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation (if applicable)
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works (if applicable)
  • Any dependent changes have been highlighted, merged or published

Sorry, something went wrong.

@Fran-A-Dev
Squashed 'examples/nuxt/nuxt-headlesswp-gravity-forms/' content from …
5307ef2 
…commit 15e0273

git-subtree-dir: examples/nuxt/nuxt-headlesswp-gravity-forms
git-subtree-split: 15e027342276366dd8449eef2d974dc376982d41
@Fran-A-Dev
Merge commit '5307ef2c1fd2ac7279f7cec132549a0b1b39d159' as 'examples/…
Loading
Loading status checks…
52f7e37 
…nuxt/nuxt-headlesswp-gravity-forms'
@Fran-A-Dev Fran-A-Dev requested a review from a team as a code owner April 8, 2025 18:42
moonmeister
moonmeister requested changes Apr 9, 2025
View reviewed changes
Copy link
Member

@moonmeister moonmeister left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @Fran-A-Dev! Couple things to clean up. We'll also want to get a working WP instance via wp-env with this. @colinmurphy can maybe help with that. He may need a database backup from your WP instance you used with this.

@colinmurphy
Copy link
Member

Thanks @Fran-A-Dev! Couple things to clean up. We'll also want to get a working WP instance via wp-env with this. @colinmurphy can maybe help with that. He may need a database backup from your WP instance you used with this.

@Fran-A-Dev Happy to help with wp-env setup 🚀

@Fran-A-Dev
Copy link
Contributor Author

Thanks @Fran-A-Dev! Couple things to clean up. We'll also want to get a working WP instance via wp-env with this. @colinmurphy can maybe help with that. He may need a database backup from your WP instance you used with this.

@Fran-A-Dev Happy to help with wp-env setup 🚀

Great @colinmurphy ! Stoked!

@Fran-A-Dev
removed package lock json, vscode settings and scripts for llm
Loading
Loading status checks…
ce5fd26
@Fran-A-Dev Fran-A-Dev requested a review from moonmeister April 9, 2025 18:04
@moonmeister
Copy link
Member

@Fran-A-Dev How's this coming along?

@Fran-A-Dev
Copy link
Contributor Author

@Fran-A-Dev How's this coming along?

Oh, it's finished, I just have to get with @colinmurphy for the wp-env part. We have not yet, we will this week.

@Fran-A-Dev
added a wp-env folder with necessary files to spin up a WordPress exa…
Loading
Loading status checks…
fd88975 
…mple
colinmurphy
colinmurphy reviewed Apr 23, 2025
View reviewed changes
colinmurphy
colinmurphy reviewed Apr 23, 2025
View reviewed changes
colinmurphy
colinmurphy reviewed Apr 23, 2025
View reviewed changes
@colinmurphy colinmurphy changed the title Add/nuxt gforms example example: Add/nuxt gforms example Apr 23, 2025
@colinmurphy
Copy link
Member

@Fran-A-Dev

Thanks so much for adding the wp-env setup ❤️

Tried testing this but I couldn't as examples/nuxt/nuxt-headlesswp-gravity-forms/wp-env/package.json should be moved to examples/nuxt/nuxt-headlesswp-gravity-forms/package.json.

Can we also add Nuxt either in this PR (or as a follow on PR) to the examples README.md too please - https://github.com/wpengine/hwptoolkit/blob/main/docs/README.md (Sorry this was updated since you created the PR)

@colinmurphy colinmurphy changed the title example: Add/nuxt gforms example chore: Add/nuxt gforms example Apr 23, 2025
moonmeister
moonmeister reviewed Apr 23, 2025
View reviewed changes
@Fran-A-Dev
changed README.md to assume npm and changed the WPGraphQL for Gravity…
Loading
Loading status checks…
3e7d30d 
… Forms URL to pull down latest version
@Fran-A-Dev Fran-A-Dev requested a review from colinmurphy April 24, 2025 13:11
@colinmurphy
Copy link
Member

@Fran-A-Dev

Just reviewed again and really happy to help out with the wp-env setup. So the main issue at the moment is that the package.json file in wp-env should be a level above. I think what you need to do is move all Nuxt related files into "example-app" and move "package.json" and "README.md" up a directory in the wp-env.

Happy to jump on a call too :)

@Fran-A-Dev
Copy link
Contributor Author

@Fran-A-Dev

Just reviewed again and really happy to help out with the wp-env setup. So the main issue at the moment is that the package.json file in wp-env should be a level above. I think what you need to do is move all Nuxt related files into "example-app" and move "package.json" and "README.md" up a directory in the wp-env.

Happy to jump on a call too :)

Ahhhh got it! Ok I will make that change and push it up. Thanks Colin!

@colinmurphy
Copy link
Member

@Fran-A-Dev
Just reviewed again and really happy to help out with the wp-env setup. So the main issue at the moment is that the package.json file in wp-env should be a level above. I think what you need to do is move all Nuxt related files into "example-app" and move "package.json" and "README.md" up a directory in the wp-env.
Happy to jump on a call too :)

Ahhhh got it! Ok I will make that change and push it up. Thanks Colin!

No worries :) Happy to help also :)

@Fran-A-Dev
Copy link
Contributor Author

@colinmurphy thanks again for your help on this!

@Fran-A-Dev
Copy link
Contributor Author

@colinmurphy, just let me know anything else you need from me before we merge! stoked!

@colinmurphy
Copy link
Member

@Fran-A-Dev

No worries. I will test this in the next few hours and get back to you 🚀 🚀 🚀

@colinmurphy
Fixed package.json and you can now run the headless app with "pnpm ex…
Loading
Loading status checks…
a9bd00c 
…ample:build"
@colinmurphy
Copy link
Member

@Fran-A-Dev

I didn't want to overwrite your great work here so I created another branch off your's here. I created a draft PR so you can see the changes - #150

Feel free to merge in if your happy with it ❤️

I have added a "pnpm example:build" command and see screenshots of this working below.

One thing I didn't see was a database for importing

Screenshot 2025-05-02 at 20 18 39 Screenshot 2025-05-02 at 20 18 50

Let me know if I can do anything else to help out 🚀

@colinmurphy colinmurphy mentioned this pull request May 2, 2025
Merged
15 tasks
@Fran-A-Dev
Merge pull request #150 from wpengine/chore-update-wp-env-setup-for-n…

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode
Loading
Loading status checks…
b0a489b 
…uxt-gforms-pr

Chore update wp env setup for nuxt gforms pr
@Fran-A-Dev
Copy link
Contributor Author

@Fran-A-Dev

I didn't want to overwrite your great work here so I created another branch off your's here. I created a draft PR so you can see the changes - #150

Feel free to merge in if your happy with it ❤️

I have added a "pnpm example:build" command and see screenshots of this working below.

One thing I didn't see was a database for importing

Screenshot 2025-05-02 at 20 18 39 Screenshot 2025-05-02 at 20 18 50
Let me know if I can do anything else to help out 🚀

Looked awesome @colinmurphy ! Just merged!

@Fran-A-Dev Fran-A-Dev enabled auto-merge May 2, 2025 20:52
colinmurphy
colinmurphy previously approved these changes May 6, 2025
View reviewed changes
Copy link
Member

@colinmurphy colinmurphy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🚀

moonmeister
moonmeister previously approved these changes May 13, 2025
View reviewed changes
@moonmeister
chore: cleanup pnpm references
Loading
Loading status checks…
bdc7ac8
@moonmeister moonmeister dismissed stale reviews from colinmurphy and themself via bdc7ac8 May 13, 2025 22:18
@moonmeister moonmeister requested a review from colinmurphy May 13, 2025 22:19
@moonmeister
Copy link
Member

I didn't run commands in docs after converting to npm...hoping the commands are about the same.

@Fran-A-Dev Fran-A-Dev added this pull request to the merge queue May 14, 2025
Merged via the queue into main with commit ba4b028 May 14, 2025
2 checks passed
@Fran-A-Dev Fran-A-Dev deleted the add/nuxt-gforms-example branch May 14, 2025 12:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@colinmurphy colinmurphy

@moonmeister moonmeister

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@Fran-A-Dev @colinmurphy @moonmeister