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

:rocket: Wordpress module for Vue Storefront based on GraphQL
https://github.com/develodesign/vsf-wp

Last synced: 4 days ago
JSON representation

:rocket: Wordpress module for Vue Storefront based on GraphQL

• Host: GitHub
• URL: https://github.com/develodesign/vsf-wp
• Owner: develodesign
• License: mit
• Created: 2019-02-05T09:07:10.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2020-02-19T18:39:30.000Z (over 4 years ago)
• Last Synced: 2024-05-22T18:31:30.595Z (6 months ago)
• Language: Vue
• Homepage:
• Size: 82 KB
• Stars: 47
• Watchers: 5
• Forks: 11
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vuestorefront - Wordpress integration

README

        
# 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

```shell

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`

```ts

import { Wordpress } from './wordpress'

...

export function registerClientModules () {

...

   registerModule(Wordpress)

)

```

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

```shell

"wordpress": {

    "graphql":{

      "url": "https://your-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:

```js

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'} }

]

```