{"id":21205652,"url":"https://github.com/isuke01/gravityform-nuxt-isu","last_synced_at":"2026-03-19T19:18:21.468Z","repository":{"id":133121061,"uuid":"493619580","full_name":"isuke01/gravityform-nuxt-isu","owner":"isuke01","description":"This is simple implementation for base elements for the Gravity form and Nuxt2, but it should work also with ","archived":false,"fork":false,"pushed_at":"2022-10-20T19:11:32.000Z","size":170,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-21T15:30:49.371Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/isuke01.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-18T10:42:41.000Z","updated_at":"2022-07-08T08:20:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"2065ae7e-7cf6-4db0-8b00-dc2b36b2912f","html_url":"https://github.com/isuke01/gravityform-nuxt-isu","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isuke01%2Fgravityform-nuxt-isu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isuke01%2Fgravityform-nuxt-isu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isuke01%2Fgravityform-nuxt-isu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isuke01%2Fgravityform-nuxt-isu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/isuke01","download_url":"https://codeload.github.com/isuke01/gravityform-nuxt-isu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243658270,"owners_count":20326467,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-20T20:45:53.088Z","updated_at":"2026-01-03T03:04:59.982Z","avatar_url":"https://github.com/isuke01.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NUXT/Vue2 Gravity Form component\n#### Tested with Gravity form 2.6.3 and WP 5.9.3\n\nThis is just example of usage the component.\n\nThis is simple implementation for base elements for the Gravity form and Nuxt2, but it should work also with VUE2.\n\n\n### IMPORTANT\nInspired by: https://bitbucket.org/gohike/gravity-forms/src/master/\nTo make this work we have to add extra endpoint to get GF.\nAnd enable Rest API for GF in Gravity form settings\n\n```php\nclass Headless_GravityForms\n{\n  public $rest_base = 'gf/forms';\n\n  public function __construct($namespace)\n  {\n    /**\n     * @api {get} /glamrock/v1/gf/forms/1\n     * @apiName GetForm\n     * @apiGroup GravityForms\n     * @apiDescription Retreive a single form\n     * @apiParam {Number} form_id ID of the form\n     *\n     * @apiSuccess {Object[]} GF_Form Object (excluding notifications)\n     */\n    register_rest_route($namespace, $this-\u003erest_base . '/(?P\u003cform_id\u003e[\\d]+)', [\n      [\n        'methods' =\u003e WP_REST_Server::READABLE,\n        'callback' =\u003e [$this, 'get_form'],\n        'args' =\u003e [\n          'context' =\u003e [\n            'default' =\u003e 'view',\n          ],\n        ],\n      ],\n    ]);\n  }\n\n  /**\n   * Retreive a single form and all fields and options (exluding notifications)\n   * @param WP_REST_Request $request\n   * @return WP_Error|WP_REST_Response\n   */\n  public function get_form(WP_REST_Request $request)\n  {\n    $form_id = $request['form_id'];\n    $form = GFAPI::get_form($form_id);\n\n    if ($form) {\n      // Strip data we do not want to share\n      unset($form['notifications']);\n      $form['max_upload_size'] = wp_max_upload_size();\n\n      return new WP_REST_Response($form, 200);\n    } else {\n      return new WP_Error('not_found', 'Form not found', ['status' =\u003e 404]);\n    }\n  }\n\n}\n\n/**\n * Register custom API routes\n */\nadd_action('rest_api_init', function () {\n  $api_namespace = 'glamrock/v1';\n  new Headless_GravityForms($api_namespace);\n});\n\n```\n\n## TO DO:\n    FIX LABEL FOR !!! \n\n    Nested inputes (?)\n    Paginated paged form\n    Add support for hidden labels\n    Add support for dynamic populated  values\n    Add support for datepickers\n    Add support to HTML dynamic fields\n    Add support for condition logic fields\n    Form settings for label placement\n    Number fields enable calculation (? whatever it is for GF)\n    Require mark based on Form settings\n    Numbers: Format number\n    Make label as Component\n    Checkboxes select all option\n    Better validations\n    Rewrite to standard vue 2 (?)\n    Rewrite to Vue 3 (?)\n    Rewrite to NPM package (?)\n    Create better logic functions with mixins\n\n    Create i18n support\n\n    \n\nTODO: Implement number min/max, these currently aren't fetch by the source plugin\nhttps://docs.gravityforms.com/field-object/#number\n\u003cdiv class=\"instruction \"\u003e\n    Please enter a number from \u003cstrong\u003e1\u003c/strong\u003e to \u003cstrong\u003e15\u003c/strong\u003e.\n\u003c/div\u003e\n\n# USAGE            \n\nExample usage: \n\n```js\n    \u003cGForm \n    :gformID=\"formId\" \n    :apiUrl=\"WPUrl\"\n    theme=\"gravity-theme my-form-class\"\n    \u003e\u003c/GForm\u003e\n```\n\nProps: \n    `gformID` ID of the Gravity form\n    `apiUrl` Url for our WP e.g https://headless.mypage.com or https://headless.mypage.com/{sitename} in case of multisite usage and pointing one (my case :) ).\n    `useDebug` Just for debugging purpose\n    `theme` Just calss for the form. Default: `gravity-theme`\n\nCallbacks:\n    `onFormSubmit` It triggered after form submission, it returns api response after submission or false in case of failure\n    `onFormLoad` It triggers after form loads, it returns response from the api or false in case of failure\n\nExample usage with custom component button: \n```js\n    \u003cGForm \n    :gformID=\"formId\" \n    :apiUrl=\"WPUrl\"\n    \u003e\n      \u003ctemplate v-slot:submitButton=\"slotProps\"\u003e\n          \u003cButton \n              v-bind=\"slotProps\"\n              button \n              type=\"submit\" \n              class=\"gform__button gform_button\" \n              icon=\"arrow\"\n          \u003e\n            \u003ctemplate v-if=\"slotProps.isSending\"\u003e\u003cspan class=\"gform__button__loading_span\"\u003eLoading ...\u003c/span\u003e\u003c/template\u003e\n            \u003ctemplate v-else\u003e\n                \u003cspan class=\"gravity_button_label\" v-if=\"slotProps.formButton.type === 'text'\"\u003e{{slotProps.formButton.text}}\u003c/span\u003e\n                \u003cspan class=\"gravity_button_image\" v-if=\"slotProps.formButton.imageUrl\"\u003e\u003cimg :src=\"slotProps.formButton.imageUrl\" /\u003e\u003c/span\u003e\n            \u003c/template\u003e\n          \u003c/Button\u003e\n        \u003c/template\u003e\n    \u003c/GForm\u003e\n```\nTip: \n`slotProps` are props passed by slot to the template, and we bind them into our custom `Button` in the example case. More: https://v2.vuejs.org/v2/guide/components-slots.html#Scoped-Slots\n### Custom submit button\n\nCustom submit button can be set using scoped slot named `submitButton`\nExample usage with custom component button:\n```html\n\u003ctemplate v-slot:submitButton=\"slotProps\"\u003e\n    \u003cVButton v-bind=\"slotProps\" button icon=\"arrowRight\" \u003eSlot button test?\u003c/VButton\u003e\n\u003c/template\u003e\n```\nThe `slotProps` also contain all buttons settngs from the gravity form, accessably by `slotProps.formButton` inside the element.\n\n### Multifile\n\n- Graivty form api v2 does not support multi select file, please go to https://www.gravityforms.com/gravity-forms-roadmap/ and add feature request so i can be implemented.\n- The issue: https://community.gravityforms.com/t/rest-api-multi-file-upload/11697\n- As for now We are using work around - merge multiple file fields. Add class to the each file field `multifile` to display them as one multi select on the front.\n- Max Files count will be dettermined by file fields count with this class, min files count will be dettermined by count of those fields that are set as required.\n- Custom vladiation message will be used from first file, also every other settings like extensions and file size. But just in case mirrow those settings for API validation side, which I can't do anything bout tih.\n- Field title and description is also taken from the first one\n\n\n\n## Road map\n\n## Form sizing and placing \n  - Done. This allow to use ling,short, next to each other etc form build from Gravity form. This will work only with default theme class.\n\n## GForm.vue\n - Re write a bit for smaller components - better logic \n\n## Honey pot\n\n## Required label  from GF setting\n\n### Base input \n [🗸] text\n [🗸] number\n [🗸] email\n [🗸] hidden\n [?] phone\n [?] date (?)\n\n### Select input\n [🗸] Done\n\n### Textarea \n [🗸] base textarea field\n\n### Multi select \n - multiselect\n Make multiselect nice, not default\n\n### Selectors\n [🗸] Radio\n [🗸] Checkbox\n\n### HTML\n\n### FILE\n - Single file supload -\u003e make it nice drop area\n - Multi select file -\u003e FOR NOW DOES NOT SUPPORTED BY GRAVITY FORM\n\n### Name (special field GF )\n\n### Captcha\n\n\n### LICENSE\n    OpenSource.\n    Take it and do whatever with it, Would be nice if you point me out somewhere if I'm inspired/helped you in any means :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisuke01%2Fgravityform-nuxt-isu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fisuke01%2Fgravityform-nuxt-isu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisuke01%2Fgravityform-nuxt-isu/lists"}