Creating a Basic Vue Plugin: A Quick And Practical Example
First, a bit of backstory: I’m working on a project called VuePress that uses Vue and GraphQL to build out WordPress sites. WordPress stores post content as a long string of HTML. I need to be able to parse that string of HTML for things like shortcodes. For this example, it’s not really important what shortcodes are or how they work — just know that 1) I have to parse content and pick out shortcodes and 2) I want the user to be able to create custom shortcodes.
Lets take a look at how I can make a Vue plugin so that anybody developing a site using my project can use some built in shortcodes, and possibly add their own custom ones.
The Plugin
The plugin simply adds a $parseContent instance method that I can use inside of any component. I just need to pass it some content to parse. Note the options that are passed in: we pass in shortcodes and helpers.
Next, we need to tell Vue to use the plugin and the pass in the shortcodes and helpers we want to use.
I’ve created a base set of shortcodes and helpers in an npm package called wordexpress-tools. Here, we’re just telling our plugin to use these shortcodes and helpers. But hey! Now we have an opportunity to extend WordExpressShortcodes with a custom shortcode!
Okay! Now, lets see how we can use $parseContent in a component.
Sweet! Now $parseContent can be used anywhere in any component that needs to parse HTML content from a WordPress content editor!
