Integrate this with wordpress rest api

[shubhra14]

Hi,

I am really impressed by how much effort has gone into this. Thank you for hosting this here to help others learn.

I am a student and has mostly worked with php/wordpress. I have only recently started dabbling in JS and got interested in Vue and thought this is the perfect example to practice on. However, since I am familiar with wordpress, I was wondering how I could integrate this whole setup but with the wordpress REST api as the backend.

I would be greatly obliged if you could help me out. Thank you.

[igeligel]

Hey @shubhra14 , thanks for the kind words :)

Unfortunately, there is no realworld version of the Wordpress available. I do not even know if it is possible but in general integrating Vue.js with wordpress is working:

• https://dev.to/workingwebsites/using-vue-in-wordpress-1b9l
• https://github.com/EvanAgee/vuejs-wordpress-theme-starter
• https://snipcart.com/blog/wordpress-vue-headless

The last blog article seems to be the nicest way around it because you are using a proper REST API.

In general you could also ask here: https://github.com/gothinkster/realworld/issues to create a wordpress backend version. Maybe you can find collaborators.

[shubhra14]

Hi,
Thank you for replying. I have asked this question in RealWorld repo and am awaiting a response.

I have been able to make wp+vue work before, including pagination, but that wasn't setup using Vuex. I'm not very familiar with Vuex at this point. Still learning.

I tried changing a few things in this app but I am getting a few errors. Maybe I can make this work and it needs a few minor adjustments. Maybe you can help me out. Here's what I did.

1. I changed the API_URL to my-site/wp-json/wp/v2/.

2. In api.service.js, I replaced articles endpoint to posts endpoint. The api url is working as I'm getting a status 200 in the network tab.

3. The WP api json response format is different from the conduit api response format. This is what the wp response looks like.

[
    {
        "id": 170,
        "date": "2019-06-12T20:22:57",
        "slug": "testing-the-post",
        "status": "publish",
        "type": "post",
        "link": "http://my-site/article/testing-the-post/",
        "title": {
            "rendered": "Testing the post"
        },
        "content": {
            "rendered": "<p>Some post content here.</p>\n",
            "protected": false
        },
        "author": 3,
        "featured_media": 169,
        "meta": [],
        "categories": [
            1
        ],
        "tags": []
    },
    {
        "id": 168,
        "date": "2019-06-12T20:22:57",
        "slug": "hello-world",
        "status": "publish",
        "type": "post",
        "link": "http://my-site/article/hello-world",
        "title": {
            "rendered": "Hello World"
        },
        "content": {
            "rendered": "<p>Some post content here.</p>\n",
            "protected": false
        },
        "author": 3,
        "featured_media": 150,
        "meta": [],
        "categories": [
            1
        ],
        "tags": []
    }
]

I think this is an issue and now i'm getting errors in the console.

[Vue warn]: Invalid prop: type check failed for prop "article". Expected Object, got Array 

found in

---> <RwvArticlePreview> at src/components/VArticlePreview.vue
       <RwvArticleList> at src/components/ArticleList.vue
         <RwvHomeGlobal> at src/views/HomeGlobal.vue
           <Home> at src/views/Home.vue
             <App> at src/App.vue
               <Root>

Vue devtools