alexmacarthur / wp-vue

A simple Vue blog template that displays posts from any WordPress REST API endpoint.

WP Vue

This is just a simple Vue application (scaffolded using the Vue CLI) that pulls posts from a WordPress REST API endpoint. Clone or fork this sucka & rip it apart to suit your own needs. If you have ideas to make it better for everyone else, contribute!

Install

In the root of the project, run npm install.

Usage

Set Your Environment Variables

Various important values are loaded into the application via Node environment variables, which you'll need to define. Locally, run cp .env.sample .env.local to create a local file for defining the following:

• REST_ENDPOINT - The WordPress REST API endpoint from which data will be pulled. Leave off the trailing slash. Example: https://blah-blah-blah.com/wp-json/wp/v2
• POSTS_PER_PAGE - The default number of posts per page that will be displayed.
• GA_TRACKING_ID - A Google Analytics tracking ID.
• REQUEST_CACHE_MAX - The maximum number of AJAX requests that will be cached in memory.

When deploying this on your own, you'll need to have these values set through a .env file you ship yourself, or if you're using something like Netlify, you can define them in your dashboard.

Spin Up Locally

Run npm run serve to spin up a running version from localhost.

Build for Production

Run npm run build.

Deploy to Netlify

Netlify is amazing, so if you're in need of somewhere to host your own version of this project, I highly recommend it.

Caching

Out of the box, WP Vue will locally cache AJAX requests in memory, and then load them as needed. This first happens on page load, when all queried posts on the current and adjacent pages are cached for quick access later.

To keep things from getting out of control, a maximum request cache value is set. Once your cache reaches this max (regardless of how large each request is), the first request in memory will deleted as a new one is added. So, you shouldn't have to worry too much about an insane amount of data being locally stored as you move through posts.

Manually reloading the page will kill this cache. It will not persist.

Set Endpoint via URL Parameter

If you'd like to share link to a version of WP Vue that uses a different endpoint than what's set via the code, you can pass that endpoint in as a URL parameter:

Example: https://wp.netlify.com?endpoint=https://css-tricks.com/wp-json/wp/v2

Instead of using the default, this will use whatever endpoint you provide in the URL.

Contribute

Please do! See the <CONTRIBUTING.md> for details.

License

MIT © Alex MacArthur

wp-vue's Issues

ACF REST API endpoint not working

Hi, is there any way this would work with ACF?
I'm currently using this plugin: https://github.com/airesvsg/acf-to-rest-api
to add ACF data to the REST API, but would love to see this working with wp-vue as well.
Hope to hear from you. Thanks!

Use Fetch.

Slim down the dependencies by removing Axios and using fetch for grabbing post content from the API.

Security Alerts by Github

Github alerts for wp-vue packages:

• eslint-utils
• serialize-javascript

Erro ENV_NODE

Estava com problema ao rodar o comando "npm run serve", aparecia um erro sobre ENV_NODE. Resolvi esse problema retirando "ENV_NODE=development" e "ENV_NODE=production" das linhas 6 e 7, respectivamente do arquivo: package.json.

Deploy on Netlify button throws error once it's built without any code changes

See subject above, pretty much I get a page not found before even adjusting the endpoint. I'm wondering what I can do to fix this, thanks.

Make it Multi Website

Hi, this is not an issue but only the request, am new on Vue but I like this project a lot, I will like to add multi-site on this project but I don't know-how.

I was thinking to add it in "Change Endpoint", in this place you will get a list of the sites when you click the icon "Change Endpoint" and when you choose one of the sites the cache will be updated and display content from that site... Can anyone do this..?

I know you need to update this file, but i don't know-how. Am new in Vue

Changing endpoint when deploying?

This might be another topic that has nothing to do with this project per se. Sorry if that's the case.

I was wondering if there's an easy way to change the endpoint when deploying the site to Netlify? In my local environment I'm using an endpoint that's also running locally through MAMP. So I thought that it would be very handy if you somehow could tell Netlify to change the endpoint upon building/deploying the site, in that case to another endpoint that I'm hosting on another server.

That would really make things easier for me at the start so that the production and development environment are connecting to different endpoints. Or is that a bad idea?

REQUEST: Add categories to sort list by category

REQUEST: Make a live filter search would be awesome!

If you can add a live search filter to your project that would be so awesome!!

ISSUE: Feature images are not showing up in Post view

Although your src/POSTS.vue shows the function to grab feature images to show in the post view, it is not showing. But is showing fine in the archive view