Skip to content

Commit 9fbe495

Browse files
alexwpenginealexwpengine
authored
Merge pull request #207 from wpengine/example-nuxt-data-fetch
docs(example): Nuxt Data Fetch
2 parents ca97a06 + e0b120d commit 9fbe495

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+6675
-1
lines changed

‎examples/next/hybrid-sitemap-apollo/example-app/src/pages/sitemap.xml.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,4 +116,4 @@ export async function getServerSideProps({ req, res }) {
116116

117117
export default function Sitemap() {
118118
return null;
119-
}
119+
}

‎examples/nuxt/template-hierarchy-data-fetching/.wp-env.json

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"phpVersion": "8.3",
3+
"plugins": [
4+
"https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip",
5+
"https://downloads.wordpress.org/plugin/classic-editor.latest-stable.zip",
6+
"https://downloads.wordpress.org/plugin/wpgraphql-ide.latest-stable.zip"
7+
],
8+
"themes": [
9+
"https://downloads.wordpress.org/theme/twentytwentyone.latest-stable.zip"
10+
],
11+
"env": {
12+
"development": {
13+
"port": 8890
14+
},
15+
"tests": {
16+
"port": 8891
17+
}
18+
},
19+
"config": {
20+
"WP_DEBUG": true,
21+
"SCRIPT_DEBUG": false,
22+
"GRAPHQL_DEBUG": true,
23+
"WP_DEBUG_LOG": true,
24+
"WP_DEBUG_DISPLAY": false,
25+
"SAVEQUERIES": false
26+
},
27+
"mappings": {
28+
"db": "./wp-env/db",
29+
"wp-content/uploads": "./wp-env/uploads",
30+
".htaccess": "./wp-env/setup/.htaccess"
31+
},
32+
"lifecycleScripts": {
33+
"afterStart": "wp-env run cli -- wp theme activate twentytwentyone && wp-env run cli -- wp theme delete --all && wp-env run cli -- wp plugin delete hello-dolly && wp-env run cli -- wp rewrite structure '/%postname%/' && wp-env run cli -- wp rewrite flush"
34+
}
35+
}

‎examples/nuxt/template-hierarchy-data-fetching/README.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Nuxt Data fetching
2+
3+
In this example we show how to implement the WP Template Hierarchy and Data Fetching in Nuxt for use with a Headless WordPress backend using WPGraphQL.
4+
5+
## Getting Started
6+
7+
> [!IMPORTANT]
8+
> Docker Desktop needs to be installed to run WordPress locally.
9+
10+
1. Run `npm run example:setup` to install dependencies and configure the local WP server.
11+
2. Run `npm run example:start` to start the WP server and Nuxt development server.
12+
13+
> [!NOTE]
14+
> When you kill the long running process this will not shutdown the local WP instance, only Nuxt. You must run `npm run example:stop` to kill the local WP server.
15+
16+
## Trouble Shooting
17+
18+
To reset the WP server and re-run setup you can run `npm run example:prune` and confirm "Yes" at any prompts.

‎examples/nuxt/template-hierarchy-data-fetching/example-app/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Nuxt dev/build outputs
2+
.output
3+
.data
4+
.nuxt
5+
.nitro
6+
.cache
7+
dist
8+
9+
# Node dependencies
10+
node_modules
11+
12+
# Logs
13+
logs
14+
*.log
15+
16+
# Misc
17+
.DS_Store
18+
.fleet
19+
.idea
20+
21+
# Local env files
22+
.env
23+
.env.*
24+
!.env.example

‎examples/nuxt/template-hierarchy-data-fetching/example-app/README.md

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Nuxt Minimal Starter
2+
3+
Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
4+
5+
## Setup
6+
7+
Make sure to install dependencies:
8+
9+
```bash
10+
# npm
11+
npm install
12+
13+
# pnpm
14+
pnpm install
15+
16+
# yarn
17+
yarn install
18+
19+
# bun
20+
bun install
21+
```
22+
23+
## Development Server
24+
25+
Start the development server on `http://localhost:3000`:
26+
27+
```bash
28+
# npm
29+
npm run dev
30+
31+
# pnpm
32+
pnpm dev
33+
34+
# yarn
35+
yarn dev
36+
37+
# bun
38+
bun run dev
39+
```
40+
41+
## Production
42+
43+
Build the application for production:
44+
45+
```bash
46+
# npm
47+
npm run build
48+
49+
# pnpm
50+
pnpm build
51+
52+
# yarn
53+
yarn build
54+
55+
# bun
56+
bun run build
57+
```
58+
59+
Locally preview production build:
60+
61+
```bash
62+
# npm
63+
npm run preview
64+
65+
# pnpm
66+
pnpm preview
67+
68+
# yarn
69+
yarn preview
70+
71+
# bun
72+
bun run preview
73+
```
74+
75+
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

‎examples/nuxt/template-hierarchy-data-fetching/example-app/app.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script setup>
2+
import Header from "./components/Header.vue";
3+
import Footer from "./components/Footer.vue";
4+
</script>
5+
6+
<template>
7+
<div>
8+
<Header />
9+
<main id="main">
10+
<NuxtPage />
11+
</main>
12+
<Footer />
13+
</div>
14+
</template>

‎examples/nuxt/template-hierarchy-data-fetching/example-app/assets/scss/_variables.scss

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// Colors
2+
$primary-color: #0066cc;
3+
$secondary-color: #fff;
4+
$text-color: #777;
5+
$light-bg: #f8f8f8;
6+
$border-color: #eeeeee;
7+
$gutter: 1rem;
8+
// Spacing
9+
$spacing-unit: 8px;
10+
$spacing-small: $spacing-unit;
11+
$spacing-medium: $spacing-unit * 2;
12+
$spacing-large: $spacing-unit * 3;
13+
$spacing-xlarge: $spacing-unit * 4;
14+
15+
// Breakpoints
16+
$breakpoint-small: 576px;
17+
$breakpoint-medium: 768px;
18+
$breakpoint-large: 992px;
19+
$breakpoint-xlarge: 1200px;
20+
21+
// Typography
22+
$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
23+
$font-size-base: 16px;
24+
$line-height-base: 1.6;

‎examples/nuxt/template-hierarchy-data-fetching/example-app/assets/scss/components/button.scss

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@use "../variables" as *;
2+
@use "sass:color";
3+
4+
.button {
5+
padding: .5rem $gutter * 1.5;
6+
color: white;
7+
transition: 0.3s ease;
8+
cursor: pointer;
9+
10+
&.button-primary {
11+
background-color: $primary-color;
12+
border-color: $primary-color;
13+
&:hover {
14+
background-color: color.scale($primary-color, $lightness: -15%);
15+
}
16+
}
17+
18+
&.button-secondary {
19+
background-color: $secondary-color;
20+
color: #111;
21+
&:hover {
22+
background-color: #000;
23+
color: #fff;
24+
}
25+
}
26+
27+
&.button-link {
28+
background-color: transparent;
29+
color: $primary-color;
30+
border: 1px solid $primary-color;
31+
}
32+
33+
&.button-large {
34+
font-size: 1.2rem;
35+
padding: 1rem $gutter * 2;
36+
}
37+
38+
&.button-small {
39+
font-size: 0.75rem;
40+
padding: .25rem $gutter;
41+
}
42+
}

‎examples/nuxt/template-hierarchy-data-fetching/example-app/assets/scss/components/comments/comment-form.scss

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
#comment-form {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 1rem;
5+
background-color: #f9f9f9;
6+
padding: 1rem;
7+
margin-top: 1rem;
8+
}
9+
.message-container {
10+
margin-bottom: 1rem;
11+
}
12+
13+
.success-message,
14+
.error-message {
15+
display: flex;
16+
align-items: center;
17+
justify-content: space-between;
18+
padding: 12px 16px;
19+
border-radius: 4px;
20+
margin-bottom: 1rem;
21+
}
22+
23+
.success-message {
24+
background-color: #d4edda;
25+
border: 1px solid #c3e6cb;
26+
color: #155724;
27+
}
28+
29+
.error-message {
30+
background-color: #f8d7da;
31+
border: 1px solid #f5c6cb;
32+
color: #721c24;
33+
}
34+
35+
.message-content {
36+
display: flex;
37+
align-items: center;
38+
gap: 8px;
39+
}
40+
41+
.message-icon {
42+
font-weight: bold;
43+
font-size: 1.1em;
44+
}
45+
46+
.message-text {
47+
flex: 1;
48+
}
49+
50+
.dismiss-button {
51+
background: none;
52+
border: none;
53+
font-size: 1.2em;
54+
cursor: pointer;
55+
padding: 0;
56+
width: 20px;
57+
height: 20px;
58+
display: flex;
59+
align-items: center;
60+
justify-content: center;
61+
opacity: 0.7;
62+
}
63+
64+
.dismiss-button:hover {
65+
opacity: 1;
66+
}
67+
68+
.success-message .dismiss-button {
69+
color: #155724;
70+
}
71+
72+
.error-message .dismiss-button {
73+
color: #721c24;
74+
}
75+
input, textarea {
76+
width: 100%;
77+
padding: 0.5rem;
78+
border: 1px solid #ccc;
79+
border-radius: 4px;
80+
box-sizing: border-box;
81+
}

0 commit comments

Comments
 (0)