{"id":133,"date":"2021-03-12T05:49:39","date_gmt":"2021-03-12T11:49:39","guid":{"rendered":"https:\/\/developers.wpengine.com\/blog\/?p=133"},"modified":"2024-02-15T13:20:03","modified_gmt":"2024-02-15T19:20:03","slug":"headless-wordpress-vue-nuxt-js","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/headless-wordpress-vue-nuxt-js\/","title":{"rendered":"Headless WordPress With Vue and Nuxt.js"},"content":{"rendered":"\n

If you have not already read our post on Headless WordPress With Next.js<\/a> I encourage you to go through it if you are interested in learning how to create a Headless WordPress site with React Next.js. This post is going to cover a similar topic, but with Vue <\/a>and Nuxt.js<\/a> instead.<\/p>\n\n\n\n

What Is Nuxt.js?<\/h2>\n\n\n\n

Nuxt.js (or simply Nuxt) is a server-side framework for writing frontend applications using Vue. Vue is a frontend framework similar to Angular or React… kinda. There are plenty of comparison articles on React versus Vue, and most will point out that Vue is more a framework while React is a library. Let’s not get into that for this post. For this post, we will assume Vue and React offer essentially the same thing for frontend developers and work with their respective Nuxt and Next server counterparts.<\/p>\n\n\n\n

You can think of Nuxt as Next but for Vue instead of React. So if you are looking to write a Headless WordPress site and want to use Vue, Nuxt may be an excellent option for you to use as your server-side framework. It supports Server-Side Rendering and Static Site Generation similar to Next and is generally an opinionated framework that helps you build a frontend website. Before we dive into Nuxt let’s first discuss how to setup WordPress for headless.<\/p>\n\n\n\n

Setting Up WordPress For Headless<\/h2>\n\n\n\n

If you haven’t already, check out our post about\u00a0setting up WordPress for headless<\/a>. For this post, you will need to install and configure the following plugins (outlined in the post linked above):<\/p>\n\n\n\n

    \n
  1. WPGraphQL<\/a><\/li>\n\n\n\n
  2. Faust.js<\/a><\/li>\n<\/ol>\n\n\n\n

    Make sure you follow the instructions in the post for configuring Faust.js. In the Faust.js settings (found in Settings > Faust), set Front-end site URL<\/strong> to http:\/\/localhost:3000\/<\/code>. This will eventually be the URL that serves where our frontend site.<\/p>\n\n\n\n

    Creating The Nuxt Site<\/h2>\n\n\n\n

    Now that you have your WordPress site hooked up, let’s dive into creating our Nuxt app. We will be following the create-nuxt-app<\/code> installation instructions from the Nuxt documentation<\/a> for the most part, with some configuration. You can start by opening a terminal to where you want to create your app and running the following:<\/p>\n\n\n

    $ npx create-nuxt-app <project-name<\/span>><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    For this project, I will use the name nuxt-headless-wp<\/code>, but you can use whatever name you want. create-nuxt-app<\/code> is going to ask you some configuration questions, such as:<\/p>\n\n\n
    create-nuxt-app v3.5.2\n<\/span><\/span>\u2728  Generating Nuxt.js project in nuxt-headless-wp\n<\/span><\/span>? Project name: nuxt-headless-wp\n<\/span><\/span>? Programming language: TypeScript\n<\/span><\/span>? Package manager: Npm\n<\/span><\/span>? UI framework: Bootstrap Vue\n<\/span><\/span>? Nuxt.js modules: (Press <space<\/span>><\/span> to select, <a<\/span>><\/span> to toggle all, <i<\/span>><\/span> to invert selection)\n<\/span><\/span>? Linting tools: ESLint, Prettier\n<\/span><\/span>? Testing framework: Jest\n<\/span><\/span>? Rendering mode: Universal (SSR \/ SSG)\n<\/span><\/span>? Deployment target: Server (Node.js hosting)\n<\/span><\/span>? Development tools: (Press <space<\/span>><\/span> to select, <a<\/span>><\/span> to toggle all, <i<\/span>><\/span> to invert selection)\n<\/span><\/span>? Continuous integration: None\n<\/span><\/span>? Version control system: Git\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    After your Nuxt app is generated you will get instructions on how to run your site, which should look something like the following:<\/p>\n\n\n
    $ cd nuxt-headless-wp\n<\/span><\/span>$ npm run dev\n<\/span><\/span><\/code><\/span><\/pre>\n\n\n
    <\/p>\n\n\n\n
    <\/p>\n\n\n\n
    Not! Now is when things get interesting.<\/p>\n\n\n\n
    Building Pages For The Blog<\/h3>\n\n\n\n
    We’re going to keep with a simple UI using only Bootstrap CSS classes. Let’s first scaffold out our HTML with some dummy data and style it a little before adding in data from our WordPress CMS. We will want the index page to show a list of posts and let you navigate to an individual post. Let’s start with the index page.<\/p>\n\n\n\n
    Showing A List Of Posts<\/h4>\n\n\n\n
    In pages\/index.vue<\/code>, remove all of the styles in the <style><\/style><\/code> tags. We won’t be needing this. Next, let’s add some dummy data in the TS area of our index.vue<\/code>. Add the following script<\/code>:<\/p>\n\n\n
    import<\/span> Vue from<\/span> 'vue'<\/span>\n<\/span><\/span>\n<\/span><\/span>export<\/span> default<\/span> Vue.extend({\n<\/span><\/span>  computed<\/span>: {\n<\/span><\/span>    posts() {\n<\/span><\/span>      return<\/span> [\n<\/span><\/span>        {\n<\/span><\/span>          title<\/span>: 'Test Post'<\/span>,\n<\/span><\/span>          slug<\/span>: 'test-post'<\/span>,\n<\/span><\/span>          content<\/span>: '<p>This is a test post<\/p>'<\/span>,\n<\/span><\/span>          excerpt<\/span>: '<p>This is a test post<\/p>'<\/span>,\n<\/span><\/span>        },\n<\/span><\/span>      ]\n<\/span><\/span>    },\n<\/span><\/span>    pageInfo() {\n<\/span><\/span>      return<\/span> {\n<\/span><\/span>        endCursor<\/span>: ''<\/span>,\n<\/span><\/span>        hasNextPage<\/span>: false<\/span>,\n<\/span><\/span>        hasPreviousPage<\/span>: false<\/span>,\n<\/span><\/span>        startCursor<\/span>: ''<\/span>,\n<\/span><\/span>      }\n<\/span><\/span>    },\n<\/span><\/span>  },\n<\/span><\/span>})\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    The code above sets up two computed properties with default values for a list of posts and page information. We are using computed properties because later, we will populate these with values from a Vuex store.<\/p>\n\n\n\n
    Now that we have some sample data let’s build out our list of posts. Use the following template:<\/p>\n\n\n
    <template<\/span>><\/span>\n<\/span><\/span>  <div<\/span> class<\/span>=\"container\"<\/span>><\/span>\n<\/span><\/span>    <div<\/span>><\/span>\n<\/span><\/span>      <h1<\/span> class<\/span>=\"text-center\"<\/span>><\/span>Nuxt Headless WordPress Demo<\/h1<\/span>><\/span>\n<\/span><\/span>      <div<\/span> class<\/span>=\"container py-4 posts\"<\/span>><\/span>\n<\/span><\/span>        <div<\/span> class<\/span>=\"row\"<\/span>><\/span>\n<\/span><\/span>          <post-card<\/span> v-for<\/span>=\"post in posts\"<\/span> :key<\/span>=\"post.slug\"<\/span> :post<\/span>=\"post\"<\/span> \/><\/span>\n<\/span><\/span>          <div<\/span> class<\/span>=\"d-flex w-100\"<\/span>><\/span>\n<\/span><\/span>            <div<\/span> class<\/span>=\"ml-auto\"<\/span> v-if<\/span>=\"pageInfo.hasNextPage\"<\/span>><\/span>\n<\/span><\/span>              <NuxtLink<\/span> :to<\/span>=\"{ query: { after: pageInfo.endCursor } }\"<\/span><\/span>\n<\/span><\/span>                ><\/span><span<\/span>><\/span>Next Page<\/span<\/span>><\/span><\/NuxtLink<\/span><\/span>\n<\/span><\/span>              ><\/span><\/span><\/span>\n<\/span><\/span>            <\/div<\/span>><\/span><\/span><\/span>\n<\/span><\/span>          <\/div<\/span>><\/span><\/span><\/span><\/span>\n<\/span><\/span>        <\/div<\/span>><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>      <\/div<\/span>><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>    <\/div<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span>  <\/div<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/template<\/span>><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    This code is going to iterate through our posts<\/code> computed property and render a post-card<\/code> for each post. It will also show a link to view the next page of posts if there is one. You might be wondering what post-card<\/code> is. We need to create our post-card<\/code> component so that we can show our posts as cards. Add a components\/PostCard.vue<\/code> and put the following code in it:<\/p>\n\n\n
    <template<\/span>><\/span>\n<\/span><\/span>  <article<\/span> class<\/span>=\"col-12 py-5\"<\/span>><\/span>\n<\/span><\/span>    <div<\/span> class<\/span>=\"card shadow\"<\/span>><\/span>\n<\/span><\/span>      <div<\/span> class<\/span>=\"card-body\"<\/span>><\/span>\n<\/span><\/span>        <h5<\/span> class<\/span>=\"card-title\"<\/span>><\/span>\n<\/span><\/span>          <NuxtLink<\/span> :to<\/span>=\"{ name: 'slug', params: { slug: post.slug } }\"<\/span>><\/span>{{\n<\/span><\/span>            post.title\n<\/span><\/span>          }}<\/NuxtLink<\/span>><\/span>\n<\/span><\/span>        <\/h5<\/span>><\/span>\n<\/span><\/span>        <!-- eslint-disable-next-line vue\/no-v-html --><\/span>\n<\/span><\/span>        <div<\/span> class<\/span>=\"card-text\"<\/span> v-html<\/span>=\"post.excerpt\"<\/span>><\/span><\/div<\/span>><\/span>\n<\/span><\/span>      <\/div<\/span>><\/span>\n<\/span><\/span>    <\/div<\/span>><\/span>\n<\/span><\/span>  <\/article<\/span>><\/span>\n<\/span><\/span><\/template<\/span>><\/span>\n<\/span><\/span>\n<\/span><\/span><script<\/span> lang<\/span>=\"ts\"<\/span>><\/span><\/span>\n<\/span><\/span>import<\/span> { PropsDefinition } from<\/span> 'vue\/types\/options'<\/span><\/span><\/span>\n<\/span><\/span>import<\/span> { Post } from<\/span> '~\/store\/posts'<\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span>\n<\/span><\/span>export<\/span> default<\/span> {<\/span><\/span>\n<\/span><\/span>  props<\/span>: ['post'<\/span>] as<\/span> PropsDefinition<{ post<\/span>: Post }>,<\/span><\/span>\n<\/span><\/span>}<\/span><\/span>\n<\/span><\/span><\/span><\/script<\/span>><\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    The PostCard<\/code> component expects a post<\/code> prop and will render the post title and excerpt in a Bootstrap card. It will also link to what will eventually be our single post page. Before you continue, run your app and make sure you see the test post.<\/p>\n\n\n\n
    Showing A Single Post<\/h4>\n\n\n\n
    Now that we have our list of posts displaying let’s add a single post page. If you look at the PostCard.vue<\/code> component, you will see that we link to a slug<\/code> page that takes in a slug<\/code> parameter. Create a pages\/_slug.vue<\/code> that will receive the slug URL parameter and use it to display a post. Put the following code into the _slug.vue<\/code> page:<\/p>\n\n\n
    <template<\/span>><\/span>\n<\/span><\/span>  <div<\/span> class<\/span>=\"container\"<\/span>><\/span>\n<\/span><\/span>    <h1<\/span> class<\/span>=\"text-center\"<\/span>><\/span>{{ post.title }}<\/h1<\/span>><\/span>\n<\/span><\/span>    <!-- eslint-disable-next-line vue\/no-v-html --><\/span>\n<\/span><\/span>    <article<\/span> class<\/span>=\"py-5\"<\/span> v-html<\/span>=\"post.content\"<\/span>><\/span><\/article<\/span>><\/span>\n<\/span><\/span>  <\/div<\/span>><\/span>\n<\/span><\/span><\/template<\/span>><\/span>\n<\/span><\/span>\n<\/span><\/span><script<\/span> lang<\/span>=\"ts\"<\/span>><\/span><\/span>\n<\/span><\/span>import<\/span> Vue from<\/span> 'vue'<\/span><\/span><\/span>\n<\/span><\/span><\/span><\/span>\n<\/span><\/span>export<\/span> default<\/span> Vue.extend({<\/span><\/span>\n<\/span><\/span>  computed<\/span>: {<\/span><\/span>\n<\/span><\/span>    post() {<\/span><\/span>\n<\/span><\/span>      return<\/span> {<\/span><\/span>\n<\/span><\/span>        title<\/span>: 'Test Post'<\/span>,<\/span><\/span>\n<\/span><\/span>        slug<\/span>: 'test-post'<\/span>,<\/span><\/span>\n<\/span><\/span>        content<\/span>: '<p>This is a test post<\/p>'<\/span>,<\/span><\/span>\n<\/span><\/span>        excerpt<\/span>: '<p>This is a test post<\/p>'<\/span>,<\/span><\/span>\n<\/span><\/span>      }<\/span><\/span>\n<\/span><\/span>    },<\/span><\/span>\n<\/span><\/span>  },<\/span><\/span>\n<\/span><\/span>})<\/span><\/span>\n<\/span><\/span><\/span><\/script<\/span>><\/span><\/span>\n<\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    When you run your app, you will be able to navigate from the list of posts to a single post. Now we have to actually populate our list of posts with data from our WordPress site. <\/p>\n\n\n\n
    Building The Posts Store<\/h3>\n\n\n\n
    To get data from WordPress, we need a store, but we need to install some dependencies. Run the following commands from the root directory of your project:<\/p>\n\n\n
    $ npm i apollo-boost graphql isomorphic-fetch vue-apollo\n<\/span><\/span>$ npm i -D @types\/isomorphic-fetch\n<\/span><\/span><\/code><\/span><\/pre>\n\n\n
    This will install the dependencies we need to call our WordPress GraphQL API and retrieve our lists of posts and individual posts. The next thing we need to do is set up a store for our posts. Add a store\/posts.ts<\/code> file. This file is going to have a number of things:<\/p>\n\n\n\n
      \n
    1. TypeScript interfaces for our data<\/li>\n\n\n\n
    2. GQL query strings<\/li>\n\n\n\n
    3. Apollo client setup<\/li>\n\n\n\n
    4. State definition<\/li>\n\n\n\n
    5. Mutation methods<\/li>\n\n\n\n
    6. Action methods<\/li>\n<\/ol>\n\n\n\n
      Let’s step through this 1-by-1. We’re going to need to import the following dependencies at the top of our posts.ts<\/code> file:<\/p>\n\n\n
      import<\/span> { ActionContext } from<\/span> 'vuex'<\/span>\n<\/span><\/span>import<\/span> ApolloClient, { gql } from<\/span> 'apollo-boost'<\/span>\n<\/span><\/span>import<\/span> fetch from<\/span> 'isomorphic-fetch'<\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      Next, let’s create our TypeScript interfaces, so we know the shape of the data we’re trying to fetch. In your posts.ts<\/code> file put the following interfaces:<\/p>\n\n\n
      export<\/span> interface<\/span> Post<\/span> {\n<\/span><\/span>  id<\/span>: string\n<\/span><\/span>  slug: string\n<\/span><\/span>  title: string\n<\/span><\/span>  content: string\n<\/span><\/span>  excerpt: string\n<\/span><\/span>  uri: string\n<\/span><\/span>  status: string\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>export<\/span> interface<\/span> PageInfo<\/span> {\n<\/span><\/span>  endCursor<\/span>: string\n<\/span><\/span>  hasNextPage: boolean\n<\/span><\/span>  hasPreviousPage: boolean\n<\/span><\/span>  startCursor: string\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>export<\/span> interface<\/span> PostsState<\/span> {\n<\/span><\/span>  nodes<\/span>: Post[]\n<\/span><\/span>  pageInfo: PageInfo\n<\/span><\/span>  post: Post\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
      Now, let’s use the gql<\/code> library to format our GQL queries. Earlier, we installed the WPGraphQL plugin for WordPress, so we need to use its schema. Put the following queries in your posts.ts<\/code> file:<\/p>\n\n\n
      const<\/span> postsQuery = gql`\n<\/span><\/span>  fragment pageInfoData on WPPageInfo {\n<\/span><\/span>    endCursor\n<\/span><\/span>    hasNextPage\n<\/span><\/span>    hasPreviousPage\n<\/span><\/span>    startCursor\n<\/span><\/span>  }\n<\/span><\/span>  fragment listPostData on Post {\n<\/span><\/span>    id\n<\/span><\/span>    slug\n<\/span><\/span>    title\n<\/span><\/span>    content\n<\/span><\/span>    excerpt\n<\/span><\/span>    uri\n<\/span><\/span>    status\n<\/span><\/span>  }\n<\/span><\/span>  query GetPosts(\n<\/span><\/span>    $where: RootQueryToPostConnectionWhereArgs\n<\/span><\/span>    $after: String\n<\/span><\/span>    $before: String\n<\/span><\/span>    $first: Int\n<\/span><\/span>    $last: Int\n<\/span><\/span>  ) {\n<\/span><\/span>    posts(\n<\/span><\/span>      where: $where\n<\/span><\/span>      after: $after\n<\/span><\/span>      before: $before\n<\/span><\/span>      first: $first\n<\/span><\/span>      last: $last\n<\/span><\/span>    ) {\n<\/span><\/span>      pageInfo {\n<\/span><\/span>        ...pageInfoData\n<\/span><\/span>      }\n<\/span><\/span>      nodes {\n<\/span><\/span>        ...listPostData\n<\/span><\/span>      }\n<\/span><\/span>    }\n<\/span><\/span>  }\n<\/span><\/span>`\n<\/span><\/span>\n<\/span><\/span>const<\/span> postQuery = gql`\n<\/span><\/span>  fragment postData on Post {\n<\/span><\/span>    id\n<\/span><\/span>    slug\n<\/span><\/span>    title\n<\/span><\/span>    content\n<\/span><\/span>    uri\n<\/span><\/span>    status\n<\/span><\/span>  }\n<\/span><\/span>  fragment pageData on Page {\n<\/span><\/span>    id\n<\/span><\/span>    slug\n<\/span><\/span>    title\n<\/span><\/span>    content\n<\/span><\/span>    uri\n<\/span><\/span>    status\n<\/span><\/span>  }\n<\/span><\/span>  query GetContentNode($id: ID!) {\n<\/span><\/span>    contentNode(id: $id, idType: URI) {\n<\/span><\/span>      ... on Post {\n<\/span><\/span>        ...postData\n<\/span><\/span>      }\n<\/span><\/span>      ... on Page {\n<\/span><\/span>        ...pageData\n<\/span><\/span>      }\n<\/span><\/span>    }\n<\/span><\/span>  }\n<\/span><\/span>`\n<\/span><\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
      Use the first query to get a list of posts and the second an individual post. Note that the fields in our query match the fields in the TypeScript interfaces.<\/p>\n\n\n\n
      Next, let’s set up our Apollo client. I am going to use a demo WordPress site, but you can use your own:<\/p>\n\n\n
      const<\/span> client = new<\/span> ApolloClient({\n<\/span><\/span>  uri<\/span>: `https:\/\/headlessfw.wpengine.com\/graphql`<\/span>,\n<\/span><\/span>  fetch,\n<\/span><\/span>})\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      Now we need to define our state<\/code>:<\/p>\n\n\n
      export<\/span> function<\/span> state<\/span>(<\/span>): PostsState<\/span> <\/span>{\n<\/span><\/span>  return<\/span> {\n<\/span><\/span>    nodes<\/span>: [],\n<\/span><\/span>    pageInfo<\/span>: {\n<\/span><\/span>      endCursor<\/span>: ''<\/span>,\n<\/span><\/span>      hasNextPage<\/span>: false<\/span>,\n<\/span><\/span>      hasPreviousPage<\/span>: false<\/span>,\n<\/span><\/span>      startCursor<\/span>: ''<\/span>,\n<\/span><\/span>    },\n<\/span><\/span>    post<\/span>: {\n<\/span><\/span>      id<\/span>: ''<\/span>,\n<\/span><\/span>      slug<\/span>: ''<\/span>,\n<\/span><\/span>      title<\/span>: ''<\/span>,\n<\/span><\/span>      content<\/span>: ''<\/span>,\n<\/span><\/span>      excerpt<\/span>: ''<\/span>,\n<\/span><\/span>      uri<\/span>: ''<\/span>,\n<\/span><\/span>      status<\/span>: ''<\/span>,\n<\/span><\/span>    },\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      The last piece of this puzzle is to create the functions that will fetch our data and provide it to the view. Create the following mutations:<\/p>\n\n\n
      export<\/span> const<\/span> mutations = {\n<\/span><\/span>  setPosts(state: PostsState, posts<\/span>: any[]) {\n<\/span><\/span>    state.nodes = posts\n<\/span><\/span>  },\n<\/span><\/span>  setPost(state: PostsState, post<\/span>: any) {\n<\/span><\/span>    state.post = post\n<\/span><\/span>  },\n<\/span><\/span>  setPageInfo(state: PostsState, pageInfo<\/span>: any) {\n<\/span><\/span>    state.pageInfo = pageInfo\n<\/span><\/span>  },\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      These mutations will let us set a state and provide a list of posts, page information, and an individual post. Next, create the following actions:<\/p>\n\n\n
      \n<\/span><\/span>export<\/span> const<\/span> actions = {\n<\/span><\/span>  async<\/span> getPosts(\n<\/span><\/span>    { commit }: ActionContext<PostsState, PostsState>,\n<\/span><\/span>    variables<\/span>: any\n<\/span><\/span>  ) {\n<\/span><\/span>    const<\/span> result = await<\/span> client.query({\n<\/span><\/span>      query<\/span>: postsQuery,\n<\/span><\/span>      variables,\n<\/span><\/span>    })\n<\/span><\/span>\n<\/span><\/span>    const<\/span> { nodes, pageInfo } = result.data?.posts\n<\/span><\/span>\n<\/span><\/span>    commit('setPosts'<\/span>, nodes)\n<\/span><\/span>    commit('setPageInfo'<\/span>, pageInfo)\n<\/span><\/span>  },\n<\/span><\/span>  async<\/span> getPost(\n<\/span><\/span>    { commit }: ActionContext<PostsState, PostsState>,\n<\/span><\/span>    slug<\/span>: string\n<\/span><\/span>  ) {\n<\/span><\/span>    const<\/span> result = await<\/span> client.query({\n<\/span><\/span>      query<\/span>: postQuery,\n<\/span><\/span>      variables<\/span>: {\n<\/span><\/span>        id<\/span>: slug,\n<\/span><\/span>      },\n<\/span><\/span>    })\n<\/span><\/span>\n<\/span><\/span>    const<\/span> post = result.data?.contentNode\n<\/span><\/span>    commit('setPost'<\/span>, post)\n<\/span><\/span>  },\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      We have two actions: getting the list of posts and the other for getting an individual post. Both use our GQL queries and the Apollo client to make requests to our WordPress site for data, and then they commit the data to the state by calling the mutations. Now we have our store, the last piece we need is to wire it up to our views.<\/p>\n\n\n\n
      Wiring Up The Data<\/h3>\n\n\n\n
      To wire up the state from our store to our view, we will need to modify our index.vue<\/code> and _slug.vue<\/code> pages. Modify the script<\/code> in the index.vue<\/code> page to look like the following:<\/p>\n\n\n
      import<\/span> Vue from<\/span> 'vue'<\/span>\n<\/span><\/span>import<\/span> { PostsState } from<\/span> '~\/store\/posts'<\/span>\n<\/span><\/span>\n<\/span><\/span>const<\/span> pageCount = 5<\/span>\n<\/span><\/span>\n<\/span><\/span>export<\/span> default<\/span> Vue.extend({\n<\/span><\/span>  computed<\/span>: {\n<\/span><\/span>    posts() {\n<\/span><\/span>      return<\/span> (this<\/span>.$store.state.posts as<\/span> PostsState).nodes\n<\/span><\/span>    },\n<\/span><\/span>    pageInfo() {\n<\/span><\/span>      return<\/span> (this<\/span>.$store.state.posts as<\/span> PostsState).pageInfo\n<\/span><\/span>    },\n<\/span><\/span>  },\n<\/span><\/span>  watch<\/span>: {\n<\/span><\/span>    async<\/span> $route() {\n<\/span><\/span>      await<\/span> this<\/span>.$nuxt.refresh()\n<\/span><\/span>      window<\/span>.scrollTo(0<\/span>, 0<\/span>)\n<\/span><\/span>    },\n<\/span><\/span>  },\n<\/span><\/span>  async<\/span> asyncData({ store, query }) {\n<\/span><\/span>    await<\/span> store.dispatch('posts\/getPosts'<\/span>, {\n<\/span><\/span>      after<\/span>: query.after,\n<\/span><\/span>      before<\/span>: query.before,\n<\/span><\/span>      first<\/span>: query.before ? undefined<\/span> : pageCount,\n<\/span><\/span>      last<\/span>: query.before ? pageCount : undefined<\/span>,\n<\/span><\/span>    })\n<\/span><\/span>  },\n<\/span><\/span>})\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      This accomplishes a few goals. First, it changes our computed properties from being hardcoded to using the posts<\/code> state values. Second, it sets up a $route<\/code> watcher that will refresh our data when the route changes and scroll to the top of the page. This is used for pagination (note we are using a pageCount of 10). The next page will create a query string with the appropriate parameters and refresh the data when you go to the next page. The last thing this code does is implement the asyncData hook to dispatch the posts\/getPosts<\/code> action, retrieve the list of posts, and then set them on the state. Now let’s modify the _slug.vue<\/code> to have the following script<\/code>:<\/p>\n\n\n
      import<\/span> Vue from<\/span> 'vue'<\/span>\n<\/span><\/span>\n<\/span><\/span>export<\/span> default<\/span> Vue.extend({\n<\/span><\/span>  computed<\/span>: {\n<\/span><\/span>    post() {\n<\/span><\/span>      return<\/span> this<\/span>.$store.state.posts.post\n<\/span><\/span>    },\n<\/span><\/span>  },\n<\/span><\/span>  async<\/span> asyncData({ store, params }) {\n<\/span><\/span>    await<\/span> store.dispatch('posts\/getPost'<\/span>, params.slug)\n<\/span><\/span>  },\n<\/span><\/span>})\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
      This is much more straightforward. All we need to do in the _slug.vue<\/code> page is dispatch the action to get a single post.<\/p>\n\n\n\n
      There you have it; you have successfully set up a Headless WordPress blog using Vue and Nuxt! Now when you run your site, you should see a paginated list of posts. If you have more than 10 posts, you will be able to page through them. Click on the title of a post, that title will take you to the individual page for that post, where you see all of the content.<\/p>\n\n\n\n
      When you are still struggling to get your site setup, check out the code for this post<\/a>. If you haven’t already and are interested, be sure to check out our post on Headless WordPress Using NextJS<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
      If you have not already read our post on Headless WordPress With Next.js I encourage you to go through it if you are interested in learning how to create a Headless […]<\/p>\n","protected":false},"author":22,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"categories":[23],"tags":[],"class_list":["post-133","post","type-post","status-publish","format-standard","hentry","category-headless"],"yoast_head":"\nHeadless WordPress With Vue and Nuxt.js - Builders<\/title>\n<meta name=\"description\" content=\"Setup a Headless WordPress site with a Nuxt.js and Vue frontend! This guide will help you create a headless blog using WordPress as your CMS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpengine.com\/builders\/headless-wordpress-vue-nuxt-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Headless WordPress With Vue and Nuxt.js\" \/>\n<meta property=\"og:description\" content=\"Setup a Headless WordPress site with a Nuxt.js and Vue frontend! This guide will help you create a headless blog using WordPress as your CMS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/builders\/headless-wordpress-vue-nuxt-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Builders\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-12T11:49:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-15T19:20:03+00:00\" \/>\n<meta name=\"author\" content=\"Will Johnston\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Headless WordPress With Vue and Nuxt.js\" \/>\n<meta name=\"twitter:description\" content=\"Setup a Headless WordPress site with a Nuxt.js and Vue frontend! This guide will help you create a headless blog using WordPress as your CMS.\" \/>\n<meta name=\"twitter:creator\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:site\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Will Johnston\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-vue-nuxt-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-vue-nuxt-js\\\/\"},\"author\":{\"name\":\"Will Johnston\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/12c2a773cdc5451ead7cb8c7f2f1fd83\"},\"headline\":\"Headless WordPress With Vue and Nuxt.js\",\"datePublished\":\"2021-03-12T11:49:39+00:00\",\"dateModified\":\"2024-02-15T19:20:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-vue-nuxt-js\\\/\"},\"wordCount\":1454,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"articleSection\":[\"Headless\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-vue-nuxt-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-vue-nuxt-js\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-vue-nuxt-js\\\/\",\"name\":\"Headless WordPress With Vue and Nuxt.js - Builders\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\"},\"datePublished\":\"2021-03-12T11:49:39+00:00\",\"dateModified\":\"2024-02-15T19:20:03+00:00\",\"description\":\"Setup a Headless WordPress site with a Nuxt.js and Vue frontend! This guide will help you create a headless blog using WordPress as your CMS.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-vue-nuxt-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-vue-nuxt-js\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-vue-nuxt-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Headless WordPress With Vue and Nuxt.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"name\":\"Builders\",\"description\":\"Reimagining the way we build with WordPress.\",\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\",\"name\":\"WP Engine\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"width\":348,\"height\":68,\"caption\":\"WP Engine\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/wpebuilders\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCh1WuL54XFb9ZI6m6goFv1g\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/12c2a773cdc5451ead7cb8c7f2f1fd83\",\"name\":\"Will Johnston\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/711cc598460b8cfa41e03d26343818356d4c0560269da54d2ac27bece492cd50?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/711cc598460b8cfa41e03d26343818356d4c0560269da54d2ac27bece492cd50?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/711cc598460b8cfa41e03d26343818356d4c0560269da54d2ac27bece492cd50?s=96&d=mm&r=g\",\"caption\":\"Will Johnston\"},\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/author\\\/wjohnsto\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Headless WordPress With Vue and Nuxt.js - Builders","description":"Setup a Headless WordPress site with a Nuxt.js and Vue frontend! This guide will help you create a headless blog using WordPress as your CMS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wpengine.com\/builders\/headless-wordpress-vue-nuxt-js\/","og_locale":"en_US","og_type":"article","og_title":"Headless WordPress With Vue and Nuxt.js","og_description":"Setup a Headless WordPress site with a Nuxt.js and Vue frontend! This guide will help you create a headless blog using WordPress as your CMS.","og_url":"https:\/\/wpengine.com\/builders\/headless-wordpress-vue-nuxt-js\/","og_site_name":"Builders","article_published_time":"2021-03-12T11:49:39+00:00","article_modified_time":"2024-02-15T19:20:03+00:00","author":"Will Johnston","twitter_card":"summary_large_image","twitter_title":"Headless WordPress With Vue and Nuxt.js","twitter_description":"Setup a Headless WordPress site with a Nuxt.js and Vue frontend! This guide will help you create a headless blog using WordPress as your CMS.","twitter_creator":"@wpebuilders","twitter_site":"@wpebuilders","twitter_misc":{"Written by":"Will Johnston","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wpengine.com\/builders\/headless-wordpress-vue-nuxt-js\/#article","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/headless-wordpress-vue-nuxt-js\/"},"author":{"name":"Will Johnston","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/12c2a773cdc5451ead7cb8c7f2f1fd83"},"headline":"Headless WordPress With Vue and Nuxt.js","datePublished":"2021-03-12T11:49:39+00:00","dateModified":"2024-02-15T19:20:03+00:00","mainEntityOfPage":{"@id":"https:\/\/wpengine.com\/builders\/headless-wordpress-vue-nuxt-js\/"},"wordCount":1454,"commentCount":0,"publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"articleSection":["Headless"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wpengine.com\/builders\/headless-wordpress-vue-nuxt-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wpengine.com\/builders\/headless-wordpress-vue-nuxt-js\/","url":"https:\/\/wpengine.com\/builders\/headless-wordpress-vue-nuxt-js\/","name":"Headless WordPress With Vue and Nuxt.js - Builders","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/#website"},"datePublished":"2021-03-12T11:49:39+00:00","dateModified":"2024-02-15T19:20:03+00:00","description":"Setup a Headless WordPress site with a Nuxt.js and Vue frontend! This guide will help you create a headless blog using WordPress as your CMS.","breadcrumb":{"@id":"https:\/\/wpengine.com\/builders\/headless-wordpress-vue-nuxt-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/builders\/headless-wordpress-vue-nuxt-js\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/builders\/headless-wordpress-vue-nuxt-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/builders\/"},{"@type":"ListItem","position":2,"name":"Headless WordPress With Vue and Nuxt.js"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/builders\/#website","url":"https:\/\/wpengine.com\/builders\/","name":"Builders","description":"Reimagining the way we build with WordPress.","publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/builders\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wpengine.com\/builders\/#organization","name":"WP Engine","url":"https:\/\/wpengine.com\/builders\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","width":348,"height":68,"caption":"WP Engine"},"image":{"@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/wpebuilders","https:\/\/www.youtube.com\/channel\/UCh1WuL54XFb9ZI6m6goFv1g"]},{"@type":"Person","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/12c2a773cdc5451ead7cb8c7f2f1fd83","name":"Will Johnston","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/711cc598460b8cfa41e03d26343818356d4c0560269da54d2ac27bece492cd50?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/711cc598460b8cfa41e03d26343818356d4c0560269da54d2ac27bece492cd50?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/711cc598460b8cfa41e03d26343818356d4c0560269da54d2ac27bece492cd50?s=96&d=mm&r=g","caption":"Will Johnston"},"url":"https:\/\/wpengine.com\/builders\/author\/wjohnsto\/"}]}},"_links":{"self":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/133","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/comments?post=133"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/133\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media?parent=133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/categories?post=133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/tags?post=133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
    If you don’t get any errors, your site should be running on http:\/\/localhost:3000\/<\/a>. We’re done… <\/p>\n\n\n\n