• Stars
    star
    458
  • Rank 95,591 (Top 2 %)
  • Language Vue
  • License
    MIT License
  • Created over 7 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

WP Vue

Build Status Netlify Status

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.

Deploy to Netlify

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

More Repositories

1

typeit

The most versatile JavaScript typewriter effect library on the planet.
JavaScript
3,056
star
2

local-docker-db

A bunch o' Docker Compose files used to quickly spin up local databases.
Go
284
star
3

striff

Real simple string diffing.
TypeScript
203
star
4

slide-element

A < 750 byte Promise-based library for animating elements with dynamic heights open & closed. Basically, a modern variant of jQuery's slideUp(), slideDown(), and slideToggle().
TypeScript
178
star
5

christian-git

A wrapper for Git to sanctify your version control workflow. ✝️
JavaScript
99
star
6

netlify-lambda-function-example

An example Netlify Lambda function that processes payments with Stripe.
JavaScript
97
star
7

probaclick

Do something when someone is probably going to click something.
JavaScript
78
star
8

wp-skateboard

My local WordPress development built with Docker and Docker Compose.
Shell
58
star
9

typeit-react

A React component for TypeIt, the most versatile JavaScript animated typing utility on the planet.
TypeScript
34
star
10

vite-plugin-proxy-page

A Vite plugin for projecting your application onto a remote page during development.
TypeScript
28
star
11

wp-complete-open-graph

A WordPress plugin for simple, comprehensive, customizable Open Graph management.
PHP
25
star
12

gatsby-source-dropbox-paper

A source plugin for Gatsby that pulls data from the Dropbox Paper API.
JavaScript
24
star
13

current-time-api

Keep your website's footer up-to-date with ease.
TypeScript
22
star
14

graphql-quest

Ultra-minimal library for making GraphQL requests in the browser and Node (with a quick polyfill).
TypeScript
20
star
15

wp-better-resource-hints

A WordPress plugin to help better manage resource hinting (preloading, prefetching, server pushing).
PHP
18
star
16

css-by-js

Turn your CSS into JS that turns it into inline CSS.
JavaScript
10
star
17

macarthur-me-astro

My site built with Astro.
Astro
9
star
18

wp-typeit

Easily add typewriter effects to your WordPress site with TypeIt, the most versatile animated typing utility on the planet.
PHP
8
star
19

cloudflare-image-proxying

The Cloudflare Worker I use to serve Notion images on my statically-generated website.
TypeScript
7
star
20

jam-comments-javascript

A monorepo for the JamComments packages that power the JavaScript-based integrations.
TypeScript
6
star
21

power-plant

A dependency injection framework built on native decorators.
TypeScript
5
star
22

macarthur-me-next

My site on NextJS.
TypeScript
4
star
23

wp-plugin-update-lambda

A Vercel serverless function for managing WordPress plugin updates.
TypeScript
4
star
24

macarthur-me-gatsby

My website, built with Gatsby.
JavaScript
3
star
25

wp-sniff

A Python script that searches a site's source code for signs that it runs on WordPress.
Python
3
star
26

binding-pry-js

binding.pry for JavaScript, for the Ruby devs who can't shake the habit.
JavaScript
3
star
27

scrappy

A simple, scrappy set up for testing page performance with different front-end scenarios.
HTML
3
star
28

gatsby-plugin-jam-comments

The official plugin for easily integrating JamComments into your Gatsby blog.
JavaScript
2
star
29

statamic-picperf

PHP
2
star
30

image-transformation-demo

A Cloudflare Worker demonstrating how to transform image URLs for use with PicPerf.io.
JavaScript
2
star
31

picperf-javascript

JavaScript utilities for using PicPerf.dev.
TypeScript
2
star
32

picperf-wordpress

WordPress plugin for upgrading your images with PicPerf.io.
PHP
2
star
33

typeit-site-gatsby

The official site for TypeIt, the most versatile JavaScript typewriter effect library on the planet.
JavaScript
2
star
34

jQuery-CenterIt

A very simple jQuery plugin that vertically & horizontally centers a selected element within the parent element.
JavaScript
2
star
35

bundler-experiments

Just experimenting with bundlers like Rollup, Webpack, and Parcel.
JavaScript
1
star
36

jekyll-jam-comments

A Ruby gem for setting up JamComments in your Jekyll site.
Ruby
1
star
37

browser-unload-testing

Exploring what happens to AJAX requests when the browser is about to unload.
HTML
1
star
38

eleventy-plugin-jam-comments

The official plugin for easily integrating JamComments into your Eleventy blog.
JavaScript
1
star
39

vite-proxy-demo

A demo for using Vite to proxy/project a small SPA onto a deployed, production page during local development.
HTML
1
star
40

dom-updates-and-browser-repaints

A playground for experimenting with DOM updates and how they impact browser repaints.
HTML
1
star
41

github-actions-sandbox

A repo for getting started with GitHub Actions.
JavaScript
1
star
42

alexmacarthur

My personal README.
1
star
43

preload-testing

A little sandbox for experimenting with asset preloading.
HTML
1
star
44

jam-comments-site

The marketing site for JamComments.
Nunjucks
1
star
45

expand-text-nodes

Expand text within HTML to be composed of one text node per character.
JavaScript
1
star
46

typeit-site-docusaurus

The website for typeitjs.com.
TypeScript
1
star
47

generate-magnolia-key

Run a command to generate a Magnolia key and update your local public instance.
JavaScript
1
star
48

wp-sahlstroms

Wordpress theme designed & developed for a local HVAC company.
PHP
1
star
49

rudimentary-react

A bare-bones React starter built on Vite.
JavaScript
1
star
50

speed-limit-with-cloudflare

1
star
51

map-everything

Add a map() method to the prototypes of Object, String, Set, and Map.
JavaScript
1
star
52

color

A tiny Svelte app for rendering colors in the browser.
Svelte
1
star
53

alexmacarthur.github.io

Built with Jekyll.
HTML
1
star
54

bridgetown-jam-comments

The official Bridgetown plugin for JamComments.
Ruby
1
star