Creating a Basic Vue Plugin: A Quick And Practical Example

Ramsay Lanier
codeburst
Published in
2 min readJan 9, 2018

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!

Ramsay is a full-stack JavaScript developer for a data analytics company in Springfield, VA. You can follow him on twitter or github. He likes when you do that.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in codeburst

Bursts of code to power through your day. Web Development articles, tutorials, and news.

Written by Ramsay Lanier

I’m a senior web developer at @Novettasol and senior dad-joke developer at home.

Responses (1)

What are your thoughts?