Wordpress Integration


Wordpress integration for Vue Storefront based on GraphQL.

Author: Develodesign

Contact: info@develodesign.co.uk

Github: https://github.com/develodesign/vsf-wp


Here’s some screenshots of the module

Post Index Page

Post View Page

All Categories Page

Sub Category Page

@Monika can you please mentioned the requirements vsf-wp of that we need a wordpress on VPS or shared hosting working?

@zaasmi hosting doesn’t matter for WordPress because you get data from GraphQL. You must remember to install https://github.com/wp-graphql/wp-graphql to your WordPress. You can do that on VPS and shared hosting :slight_smile:

Thanks for your reply @przspa we installed and followed all these steps.
But we stuck installation point please guide, where we place that code manually.


git clone https://github.com/develodesign/vsf-wp.git vue-storefront/src/modules/wordpress

Import and register the module inside vue-storefront/src/modules/index.ts

import { Wordpress } from ‘./wordpress’ … export const registerModules: VueStorefrontModule[] = [ … Wordpress ]

Add settings to vue-storefront/config/local.json

“wordpress”: {
“url”: “https://you-wordpress-url/graphql
Open router configuration in your theme vue-storefront/src/themes/you-theme/router/index.js For default theme use path vue-storefront/src/themes/default/router/index.js And add some routes:

const PostsIndex = () => import(/* webpackChunkName: “vsf-wp-posts-index” / ‘src/modules/wordpress/pages/posts/Index’)
const PostsShow = () => import(/
webpackChunkName: “vsf-wp-posts-show” / ‘src/modules/wordpress/pages/posts/Show’)
const CategoriesIndex = () => import(/
webpackChunkName: “vsf-wp-categories-index” / ‘src/modules/wordpress/pages/categories/Index’)
const CategoriesShow = () => import(/
webpackChunkName: “vsf-wp-categories-show” */ ‘src/modules/wordpress/pages/categories/Show’)

let routes = [

{ name: ‘posts-index’, path: ‘/posts’, component: PostsIndex, props: {page: ‘posts’, title: ‘Posts’} },
{ name: ‘posts-show’, path: ‘/posts/:slug’, component: PostsShow, props: {page: ‘post’, title: ‘View Post’} },
{ name: ‘categories-index’, path: ‘/categories’, component: CategoriesIndex, props: {page: ‘categories’, title: ‘View Categories’} },
{ name: ‘categories-show’, path: ‘/categories/:slug’, component: CategoriesShow, props: {page: ‘category’, title: ‘View Category’} }

@zaasmi not on WordPress but in vue-storefront instance :slight_smile: