Skip to content
🚀 Wordpress module for Vue Storefront based on GraphQL
Vue CSS TypeScript
Branch: master
Clone or download
collymore Merge pull request #30 from cnviradiya/master-cv-pr-1
Fixed anchor link hover effect design issue
Latest commit 3ff087d Jun 8, 2019

README.md

vsf-wp

Wordpress module for Vue Storefront based on GraphQL

Requirements

Wordpress doesn't yet support GraphQL natively. So to get started install following free open source Wordpress Plugin into your WP store https://github.com/wp-graphql/wp-graphql

Installation

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": {
    "graphql":{
      "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'} }
]
You can’t perform that action at this time.