├── .gitignore
├── .npmrc
├── README.md
├── app.vue
├── components
    ├── Block.vue
    ├── BlockRenderer.vue
    ├── CoreImage.vue
    ├── CoreParagraph.vue
    ├── Post.vue
    └── TheHeader.vue
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── pages
    ├── [...uri].vue
    └── index.vue
├── public
    └── favicon.ico
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | *.log*
 3 | .nuxt
 4 | .nitro
 5 | .cache
 6 | .output
 7 | .env
 8 | dist
 9 | .DS_Store
10 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt 3 WordPress Starter
 2 | 
 3 | This project is meant to be a flexible starting point for people interested in using [Nuxt 3](https://nuxt.com/) with WordPress as a headless CMS. If you want some additional resources to help get you started, check out the blog post and video linked below.
 4 | 
 5 | [✍️ Read the step-by-step tutorial](https://wpengine.com/builders/headless-wordpress-with-nuxt-3-vue-3/)
 6 | [📹 Watch the video]()
 7 | 
 8 | ## Requirements
 9 | - [WordPress](https://wordpress.org/)
10 | - [WPGraphQL](https://www.wpgraphql.com/docs/introduction)
11 | - Environment Variables
12 | 
13 | Update the `wordpressUrl` variable in `nuxt.config.ts` to your WordPress site and run `npm run dev`:
14 | 
15 | ```
16 | export default defineNuxtConfig({
17 |     modules: [
18 |         '@nuxt/devtools',
19 |         '@nuxtjs/tailwindcss' 
20 |     ],
21 |     runtimeConfig: {
22 |         public: {
23 |             wordpressUrl: 'https://yourwordpresssite/graphql'
24 |         }
25 |     }
26 | })
27 | 
28 | ```
29 | 
30 | 
31 | ## Headless WordPress Hosting with Atlas
32 | 
33 | WP Engine's Atlas platform provides a performant and user-friendly hosting platform for headless WordPress and Node-based JavaScript apps. [Create a free sandbox account](https://wpengine.com/atlas/) to try the platform, and check out our Astro deployment guide for instruction to deploy to the platform.
34 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <NuxtPage />
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/components/Block.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <CoreParagraph v-if="block.name === 'core/paragraph'" :block="block"></CoreParagraph>
 3 |     <CoreImage v-if="block.name === 'core/image'" :block="block"></CoreImage>
 4 |     </template>
 5 |     
 6 |     <script setup>
 7 |     const props = defineProps({
 8 |         block: Object
 9 |     })
10 |     
11 |     
12 |     </script>


--------------------------------------------------------------------------------
/components/BlockRenderer.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |     <Block v-for="block in blocks" :key="block.clientId" :block="block"></Block>
3 |     </template>
4 |     
5 |     <script setup>
6 |     const props = defineProps({
7 |         blocks: Array
8 |     });
9 |     </script>


--------------------------------------------------------------------------------
/components/CoreImage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <img :src="block?.attributes?.src" :alt="block?.attributes?.alt">
 3 | </template>
 4 | 
 5 | <script setup>
 6 | const props = defineProps({
 7 |     block: Object
 8 | })
 9 | 
10 | </script>


--------------------------------------------------------------------------------
/components/CoreParagraph.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <p v-html="block.attributes.content"></p>
 3 |    </template>
 4 |    
 5 |    <style >
 6 |    
 7 |    a {
 8 |        color: blue;
 9 |        text-decoration: underline;
10 |    }
11 |    
12 |    </style>
13 |    
14 |    <script setup>
15 |    const props = defineProps({
16 |        block: Object
17 |    })
18 |    
19 |    </script>


--------------------------------------------------------------------------------
/components/Post.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <NuxtLink :to='post.uri'>
 3 |         <div class="flex 
 4 |         items-center 
 5 |         bg-gradient-to-r
 6 |         from-cyan-500 
 7 |         to-blue-500 
 8 |         p-8 
 9 |         rounded-lg 
10 |         text-white 
11 |         transition-all 
12 |         hover:-translate-y-1 
13 |         hover:scale-105"
14 |         >
15 |             <div>
16 |                 <h2 class="font-semibold text-2xl">{{ post.title }}</h2>
17 |                 <p>{{ new Date(post.date).toLocaleDateString() }}</p>
18 |             </div>
19 |         </div>
20 |     </NuxtLink>
21 | </template>
22 | 
23 | <script setup lang="ts">
24 | const props = defineProps<{
25 |     post: Record<'title' | 'date' | 'excerpt' | 'uri', string>
26 | }>();
27 | 
28 | </script>


--------------------------------------------------------------------------------
/components/TheHeader.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |     <header className="relative w-full p-6 h-85px mx-auto bg-slate-200">
3 |         <h1 className="text-4xl">Nuxt WP</h1>
4 |     </header>
5 | </template>


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |     modules: [
 4 |         '@nuxt/devtools',
 5 |         '@nuxtjs/tailwindcss' 
 6 |     ],
 7 |     runtimeConfig: {
 8 |         public: {
 9 |             wordpressUrl: 'https://acfheadless.wpengine.local/graphql'
10 |         }
11 |     }
12 | })
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "build": "nuxt build",
 5 |     "dev": "nuxt dev",
 6 |     "generate": "nuxt generate",
 7 |     "preview": "nuxt preview",
 8 |     "postinstall": "nuxt prepare",
 9 |     "start" : "node .output/server/index.mjs"
10 |   },
11 |   "devDependencies": {
12 |     "nuxt": "^3.2.3"
13 |   },
14 |   "dependencies": {
15 |     "@nuxt/devtools": "^0.2.5",
16 |     "@nuxtjs/tailwindcss": "^6.4.1"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/pages/[...uri].vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |       <TheHeader></TheHeader>
 4 |         <main class="bg-gray-100 container mx-auto mt-6 p-6 rounded-lg">
 5 |             <h1 class="text-4xl">{{ data.title }}</h1>
 6 |             <div class="text-2xl mt-4">{{ new Date(data.date).toLocaleDateString() }}</div>
 7 |             <article class="mt-4 space-y-2" v-html="data.content"></article>
 8 |         </main>
 9 |     </div>
10 | </template>
11 | 
12 | <script setup>
13 | 
14 | const route = useRoute();
15 | const uri = route.params.uri.join('/');
16 | const config = useRuntimeConfig();
17 | const {data, pending, refresh, error} = await useFetch(config.public.wordpressUrl, {
18 |     method: 'get',
19 |     query: { 
20 |         query: `
21 |         query MyQuery3($uri: String!) {
22 |             nodeByUri(uri: $uri) {
23 |                 ... on Post {
24 |                     id
25 |                     title
26 |                     date
27 |                     content
28 |                 }
29 |             }
30 |         }
31 |         `,
32 |         variables: {
33 |             uri: uri
34 |         }
35 |     }, 
36 |     transform(data){
37 |         return data.data.nodeByUri
38 |     }
39 | })
40 | 
41 | useHead({
42 |     title: data.value.title
43 | })
44 | </script>


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const route = useRoute()
 3 | const config = useRuntimeConfig();
 4 | const { data, refresh, pending } = await useFetch(config.public.wordpressUrl, {
 5 |   method: 'get',
 6 |   query: {
 7 |     query: `
 8 |       query NewQuery {
 9 |         posts(first:10){
10 |           nodes {
11 |             title
12 |             date
13 |             excerpt
14 |             uri
15 |           }
16 |         }
17 |       }`
18 | }, 
19 | transform(data:any){
20 |  return data.data.posts.nodes as Array<Record<'title' | 'date' | 'excerpt' | 'uri', string>>;
21 | }
22 | });
23 | </script>
24 | 
25 | <template>
26 |   <div>
27 |     <TheHeader></TheHeader>
28 |     <div class="grid gap-8 grid-cols-1 lg:grid-cols-3 p-6">
29 |       <Post v-for="post in data" :key="post.uri" :post="post"></Post>
30 |     </div>
31 |   </div>
32 | </template>
33 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JEverhart383/nuxt-wordpress-starter/6d195feb27e6e3997d5f271bd0b9aa82265cf4fd/public/favicon.ico


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------