How you can build a Headless WordPress with Vue
Tags: javascript, beginners, vue, wordpress
Published: 2022-04-12 17:24:29

WordPress is widely regarded as one of the most popular content management systems in the world.  

In fact, as of late 2021, [WordPress powered 35% of the top 1 million websites in the world.](https://gracethemes.com/wordpress-is-still-the-most-popular-cms-choice-top-trends-in-2020-and-predictions-for-2021/) And around 25% of all websites, period.  

Why is it so popular?  

First, it’s free to download and use. However, if you want to customize it, WordPress does charge a fee for some of their templates and plug-ins. Especially the best ones. 

Beyond being free, WordPress’s ubiquity means if you’re a content creator on the internet, you’ve probably used it before.  

And if you haven’t, that’s no problem because it’s extremely user-friendly. Plus, it’s versatile enough to not only work as a great as a blog, but for many different possible projects.  

## Downsides to WordPress 

However, there are serious downsides to using WordPress.  

One is security simply because it’s so popular. The logic used by hackers is, if it’s popular, it makes more sense to figure out how to hack inside. Then, once discovered, the process can be repeated.  

Another downside is that WordPress sites have slow download times. That means the audience is waiting for the site to load and could become disinterested and leave. Their use of redundant code and heavy themes certainly hurt their sites’ speeds.  

Finally, the necessity of plugins is a third drawback. Using many plugins at once will result in lethargic loading times. On top of that, many crucial plugins are only accessible by paying a yearly subscription fee. That means your “free” site is now much more to operate a year.  

## Solution: Headless WordPress with Vue.js and deploy with Fathym 

Here at Fathym, we’re not only a web host, but we offer a [micro frontends platform, too.](https://www.fathym.com/blog/articles/2022/march/2022-03-14-a-simple-micro-frontends-explainer)  

That means we offer [developers the freedom to choose whichever JavaScript framework](https://www.fathym.com/blog/articles/2022/february/2022-02-28-angular-vs-react-vs-vue-you-choose) they want to use for building sites with us. And in this case, we’re using Vue.js as the example.  

## Vue history 

Vue was introduced in 2014 and developed by Evan You. It's an open-source JavaScript framework which is supremely simple.  

While some enjoy using Angular or React, Vue is considered the easiest of the three to learn. It also features component-based architecture like those two competitors, has concise documentation and its tiny size helps sites run faster.  

Vue is on the rise in terms of popularity, too.  

## Build with Vue, display your content uniquely 

A headless WordPress means, basically, the user still creates content (blogs, photo galleries etc) in WordPress’s back end, but by using APIs, that content is displayed on the frontend, built by Vue.js.  

Why use Vue?  

### Customization 

Within WordPress, creators are limited. They’re boxed into whatever plugins the CMS has already built.  

Instead, developers have the ability to create new and unique design layouts. You can decide how best to display your content, and how your end-users interact with that content.  

Let’s say you’re a fashion company. You can have a gallery of the latest T-shirts you’ve designed. But, when the user clicks the picture, they’re taken to a new page, which is a video of the model walking through the streets in that shirt.  

The options are basically limitless!  

### Ease of use 

Again, Vue is one of the easiest JavaScript frameworks to learn. In fact, while it would be easier to get the site built with some coding experience, some argue there is no need to know any JavaScript when starting with Vue.js, while others contend knowing some JavaScript basics will certainly help.  

Past getting started, one of the best parts of using Vue.js as your frontend is improved scalability. WordPress sites can be difficult to scale, since they are of the old monolithic design. Since Vue functions with smaller, independent pieces, you can update one part of the site – blog, gallery, home page – without having to update the entire website.  

### Improved user experience 

Because of Vue’s smaller size, websites built with it will load much faster than they would on WordPress. That’s a big deal because, in 2022, when sites load slowly, sometimes users get disinterested and back out. Not only that, but load times can be indicative of professionalism, and for users with slower internet connections, the smaller size is needed, not just an added benefit. 

The user experience continues to improve with better security than Wordpress, too. Because WordPress sites are so common, hackers have spent time to get into them, sometimes with DDoS attacks. When using a headless WordPress option, because the front end is decoupled from the back end (where all the information is stored), it’s almost impossible for hackers to get to that info. 

## Let Fathym host 

Finally, bring that new headless WordPress site over to Fathym for your hosting needs. We utilize Microsoft Azure, have a free-to-start plan, and offer unique advantages like the Social UI for developers.  

Fathym is free to try, it’s extremely easy to use and it’s secure.  
 
 ## Join Fathym

We want you to come and [build a website at Fathym today.](https://auth.fathym.com/fathymcloudprd.onmicrosoft.com/oauth2/v2.0/authorize?p=b2c_1_sign_up_sign_in&client_id=98f014f1-2547-4bcc-a583-3edc8f1190f2&redirect_uri=https%3A%2F%2Fwww.lowcodeunit.com%2F.oauth%2FB2C_1_SIGN_UP_SIGN_IN&response_type=id_token&scope=openid%20profile&response_mode=form_post&nonce=637789907534834707.OWNhMWZkZGMtODQ2NC00YTg0LWFjZWQtYjlkNzg0YTIzMDhkYTcxMzVkZmYtN2E2Mi00ZDRlLWIxODQtZjMxMjBkNWI2OTEx&state=CfDJ8C5COa2dn0dMrEVjdLxcXm-FCakeBxrXIOHa_lF_u0ckh9rvLFuKJ30MWBprExUQA_N5HmWWWPdxqWlni-KFqpg_jVjPahrQdGw79U0sMBN8dTvgrlAMeT9--L-7VgMBsZfFPAho9dcKUN1jO6lAaxL13PM1_vGer-vJc6tcpigRpNr5jcHtitGIKjexLmQqkIslp3MFKCKAi-5IiVd3JbpibPm4gbmDQpYtgstmG9SSlpjvEqJk_2AIqtMHkiojK3kE4WSc5mcYS3FQ3hiRqVQRPlL3jI7U3bUsqGYtLuoJr_St6mGBbHvGmB6M0MCeFn_G5LDsRzyHZhBWf9a1qo6dktz_kEcsAahYPLWjAI_2&x-client-SKU=ID_NETSTANDARD2_0&x-client-ver=6.11.1.0)