Various tools used in the Vue and React WordExpress Starter Kits.

WordExpress Tools consist of the following:

• WordExpress Helpers: These are various helper functions used by the WordExpress starter kits. They do things like parse page/post content

• WordExpress Shortcodes: resolving functions that work with the WordExpress Database connectors to resolver GraphQL Queries

npm install --save wordexpress-schema

• Using with Vue

• Custom Shortcodes

Tools are used as part of the core Vue Starter Kit as a Vue plugin. The plugin is installed when creating the main Vue app, like so:

...
import {WordExpressShortcodes, WordExpressHelpers} from 'wordexpress-tools'

Vue.use(WordExpressPlugin, {
  shortcodes: WordExpressShortcodes,
  helpers: WordExpressHelpers
})
...

You can add your own custom shortcodes and helpers by extending each object.

//my-custom-shortcode.js
import {GetShortCode} from 'wordexpress-tools'

const MyCustomShortcode = line => {
  const shortcode = GetShortCode(line)
  const {params, content} = shortcode

  // return custom html here
  return (`<div>${content}</div>`)
}

export default MyCustomShortcode

Then, when you install the Vue plugin, simplty extend WordExpressShortcodes.

import {WordExpressShortcodes, WordExpressHelpers} from 'wordexpress-tools'
import MyCustomPlugin from './path/to/my-custom-plugin.js'

const shortcodes = {
  ...WordExpressShortcodes,
  nameOfCustomShortcode: MyCustomShortcode
}

Vue.use(WordExpressPlugin, {
  shortcodes,
  helpers: WordExpressHelpers
})

Now, in your Wordpress WYSIWYG you can use something like [nameOfCustomShortcodes param1="param"]content[/nameOfCustomShortcode]. Please not that the name of the shortcode has to match the key in the extended shortcode object.