Custom post type routing

[twishapatel22]

Hello,

I am using this vue- wordpress theme, I have added custom post type but I am facing issue with routing. Could you show me where I can change for routing for custom post type.

I have tried changing in routes.js and path.js but it's not working for me. So please help me with this.

Expecting reply from your end ASAP.

Thank you in Advance.

[shubhra14]

This is how I have done it for CPT single posts:

1. Duplicate Single.vue, say SingleMovie.vue

name: 'SingleMovie',

return {
      request: {
        type: 'movie', **<-- YOUR CPT**
        slug: this.slug,
        showLoading: true }
    }

2. routes.js

import SingleMovie from '@/components/SingleMovie'

{
 path: '/movie/:slugs+',
 component: SingleMovie,
 name: 'SingleMovie',
 props: route => ({ slug: route.params.slugs.split('/').filter(s => s).pop() }),
},

Also create a single-movie.php file in the root

[twishapatel22]

Thank you @shubhra14 for your response.

I have created custom post type manually through code and copy single.vue file for SingleFotografen.vue
return { request: { type: 'fotografen', slug: this.slug, showLoading: true } }

in routes.js I have added following code:
import SingleFotografen from '@/components/SingleFotografen'

and
{ path: 'fotografen/:slugs+', component: SingleFotografen, name: 'SingleFotografen', props: route => ({ slug: route.params.slugs.split('/').filter(s => s).pop() }) }

Still it shows error. I don't understand what I miss. Please see the screenshot for error and let me know.
https://ibb.co/hdwh7MW

I have get JSON data for post type.
https://ibb.co/VNjFHXz

Hope you have some solution for this. Hope to here from your end soon.
Thanks in advance.

[twishapatel22]

@shubhra14 I forgot to create single-fotografen.php.

I have created single-forografen.php but the issue is it's not working with .vue file. It load php single-fotografen.php file so it refresh the page everyttime. I want to make it work with .vue file without refresh.

Do let me know what solution you have for this.

Thank you in advance. :)

[shubhra14]

You should install Vue devtools browser extension and have a look if routing is working as expected.

[twishapatel22]

@shubhra14 I have already installed this but routing is not correct and I don't know at which palce I still need to do changes. Please let me know if you have any clue aboue this.

[twishapatel22]

@shubhra14 Single page for custom post type is working now. But I have issue with custom post type listing page (Custom post type Archive page). Do you know how to manage this?

[shubhra14]

Duplicate Posts.vue.

routes.js

import Movies from '@/components/Movies'

{
  path: paths.postsPage('movies'),  <-- this needs to be the archive page slug
  component: Movies,
  name: 'Movies',
  props: route => (Object.assign(route.params, { page: pageFromPath(route.path) }))
}

Create the CPT php file as well.

[twishapatel22]

@shubhra14 I am not able to find Posts.vue file. Could you please check and share this file?

Thanks you so much for your help. :)

[twishapatel22]

@shubhra14 Please see attached images. I am able to get data but only issue with the display result. I have created archive.php file for the post type as well.

[twishapatel22]

@shubhra14 Have you looked into these screenshots? I realy appreciate your help.

[shubhra14]

The computed property is undefined. Might be some issue in Fotografen.vue

[twishapatel22]

@shubhra14 Thank you so much for the help. :)

[psntr]

Did you manage to solve the issue? I bumped on same today, and actually the error shows you that you are missing something related to the RADL functions.

Basically you did everything right except to edit the functions.php.

Example: if 'movie' is the custom post type:

new RADL('__VUE_WORDPRESS__', 'vue_wordpress.js', array(
    'routing' => RADL::callback('vue_wordpress_routing'),
    'state' => array(
        'categories' => RADL::endpoint('categories'),
        'media' => RADL::endpoint('media'),
        'menus' => RADL::callback('vue_wordpress_menus'),
        'pages' => RADL::endpoint('pages'),
        'posts' => RADL::endpoint('posts'),
        // Custom post type below
        'movie' => RADL::endpoint('movie'),

        'tags' => RADL::endpoint('tags'),
        'users' => RADL::endpoint('users'),
        'site' => RADL::callback('vue_wordpress_site'),
    ),
));

All the steps are explained here for custom post type:
#3