@@ -22,21 +22,24 @@ This example shows you how to wire up a full headless WordPress backend—comple
22
22
## Project Structure
23
23
24
24
```
25
+
25
26
```
27
+
26
28
example-app/
27
- ├── components/ # Vue form-field components & barrel file
28
- ├── composables/ # useGravityForm.js & useFormFields.js
29
- ├── pages/ # Nuxt page (index.vue) that renders the form
30
- └── nuxt.config.ts # Nuxt application config
29
+ ├── components/ # Vue form-field components & barrel file
30
+ ├── composables/ # useGravityForm.js & useFormFields.js
31
+ ├── pages/ # Nuxt page (index.vue) that renders the form
32
+ └── nuxt.config.ts # Nuxt application config
31
33
wp-env/
32
- │ ├── db/
33
- │ │ └── database.sql # WordPress + Gravity Forms schema & data
34
- │ ├── setup/
35
- │ │ └── .htaccess # CORS + pretty-permalinks for wp-env
36
- │ └── uploads.zip # wp-content/uploads media files
37
- ├── .wp-env.json # @wordpress/env configuration
38
- ├── package.json # wp-env + Nuxt dev scripts
39
- ```
34
+ │ ├── db/
35
+ │ │ └── database.sql # WordPress + Gravity Forms schema & data
36
+ │ ├── setup/
37
+ │ │ └── .htaccess # CORS + pretty-permalinks for wp-env
38
+ │ └── uploads.zip # wp-content/uploads media files
39
+ ├── .wp-env.json # @wordpress/env configuration
40
+ ├── package.json # wp-env + Nuxt dev scripts
41
+
42
+ ````
40
43
41
44
## Running the Example with wp-env
42
45
@@ -51,33 +54,33 @@ wp-env/
51
54
```bash
52
55
git clone https://github.com/your-org/nuxt-gravityforms-example.git
53
56
cd nuxt-gravityforms-example
54
- pnpm install
57
+ npm install
55
58
56
59
echo "NUXT_PUBLIC_WORDPRESS_URL=http://localhost:8888" > example-app/.env
57
- ```
60
+ ````
58
61
59
62
### Quick Start
60
63
61
64
1 . Unzip uploads, start WP, import DB, then launch Nuxt:
62
65
63
66
``` bash
64
- pnpm example:build
67
+ npm run example:build
65
68
```
66
69
67
70
2 . Or run steps separately:
68
71
69
72
``` bash
70
73
# Start WP
71
- pnpm wp:start
74
+ npm run wp:start
72
75
73
76
# Import DB
74
- pnpm wp:db:import
77
+ npm run wp:db:import
75
78
76
79
# Unzip uploads
77
- pnpm wp:images:unzip
80
+ npm run wp:images:unzip
78
81
79
82
# Start Nuxt dev server
80
- pnpm dev
83
+ npm run dev
81
84
```
82
85
83
86
By the end, you will have:
@@ -88,20 +91,20 @@ By the end, you will have:
88
91
89
92
## Scripts
90
93
91
- | Command | Description |
92
- | ---------------------- | ---------------------------------------------------------------- |
93
- | ` pnpm example:build` | Unzip media → start WP env → import DB → launch Nuxt dev server |
94
- | ` pnpm example:start` | Start WP env, then Nuxt dev server |
95
- | ` pnpm example:stop` | Stop the WordPress environment (wp-env stop) |
96
- | ` pnpm example:prune` | Destroy & rebuild the WP environment, then restart—all in one go |
97
- | ` pnpm wp:start` | @wordpress/env start (launches PHP/MySQL container with WP) |
98
- | ` pnpm wp:stop` | @wordpress/env stop |
99
- | ` pnpm wp:db:import` | Import the SQL dump into the running WP container |
100
- | ` pnpm wp:db:export` | Export the current WP database back to wp-env/db/database.sql |
101
- | ` pnpm wp:images:unzip` | Clear & unzip wp-env/uploads.zip → populates wp-content/uploads |
102
- | ` pnpm dev` | Start the Nuxt 3 development server on port 3000 |
103
-
104
- > ** Tip:** You can also run any arbitrary WP-CLI command inside the container via ` pnpm wp:cli -- <wp-cli-command>`
94
+ | Command | Description |
95
+ | ------------------------- | ---------------------------------------------------------------- |
96
+ | ` npm run example:build` | Unzip media → start WP env → import DB → launch Nuxt dev server |
97
+ | ` npm run example:start` | Start WP env, then Nuxt dev server |
98
+ | ` npm run example:stop` | Stop the WordPress environment (wp-env stop) |
99
+ | ` npm run example:prune` | Destroy & rebuild the WP environment, then restart—all in one go |
100
+ | ` npm run wp:start` | @wordpress/env start (launches PHP/MySQL container with WP) |
101
+ | ` npm run wp:stop` | @wordpress/env stop |
102
+ | ` npm run wp:db:import` | Import the SQL dump into the running WP container |
103
+ | ` npm run wp:db:export` | Export the current WP database back to wp-env/db/database.sql |
104
+ | ` npm run wp:images:unzip` | Clear & unzip wp-env/uploads.zip → populates wp-content/uploads |
105
+ | ` npm run dev` | Start the Nuxt 3 development server on port 3000 |
106
+
107
+ > ** Tip:** You can also run any arbitrary WP-CLI command inside the container via ` npm run wp:cli -- <wp-cli-command>`
105
108
106
109
## Database Access
107
110
0 commit comments