DEV Community: Christopher Robin Chase

Headless Vue + WordPress Boilerplate v2.0.0

Christopher Robin Chase — Wed, 07 Oct 2026 01:58:21 +0000

Headless Vue + WordPress Boilerplate v2.0.0

Yes, Version 2.0.0 is here!!!

This boilerplate allows you to use Vue as the front-end for your WordPress theme in a headless architecture. WordPress handles the backend and REST API, while Vue powers the user interface using modern frontend tooling like Vite.

🧠 Key Features

🌟 Use Vue 3 with Vite for a fast and modern development experience
⚡ Hot Module Replacement inside WordPress: save a .vue file and see it instantly, no rebuild
🔌 One-line REST API routes in PHP and one-line calls in Vue (useApi, useWp)
🧭 WordPress pages, posts and menus work out of the box with Vue Router
🗂 Modular folder structure for components, pages, APIs, and stores
⚙️ Supports Vue Router and Pinia (Vue Store)
🎨 Style with Tailwind CSS, standard CSS or your preferred CSS preprocessor

📋 Requirements

WordPress 6.7+ and PHP 8.1+
Node.js 20+
Pretty permalinks (Settings > Permalinks, anything except "Plain")

📁 Folder Structure

themes/
└── vue-boilerplate/
    ├── functions/               # WordPress PHP functions
    │   ├── api.php              # Your REST API routes
    │   ├── api-helpers.php      # vue_theme_api_get(), vue_theme_api_post(), ...
    │   ├── vite.php             # Loads the Vue app (dev server or build)
    │   └── theme-settings.php   # Theme supports and menu locations
    ├── src/                     # Vue application root
    │   ├── api/                 # API client (index.js) and JS modules for API calls
    │   │   └── wp/
    │   ├── assets/              # Static assets like images and SVGs
    │   ├── components/          # Vue components (e.g., layout)
    │   ├── composables/         # useApi and useWp
    │   ├── page/                # Vue page views
    │   ├── router/              # Vue Router setup
    │   ├── stores/              # Pinia stores
    │   │   └── wp/
    │   ├── utils/               # HTML sanitizer and link helpers
    │   ├── App.vue              # Root Vue component
    │   ├── main.js              # Vue app entry point
    │   ├── settings.js          # Values passed from WordPress
    │   └── style.css            # Global styles
    ├── dist/                    # Production build (created by npm run build)
    ├── *.php                    # WordPress theme files (header.php, footer.php, etc.)
    ├── style.css                # Theme metadata
    └── vite.config.js           # Configuration file for Vite, a fast frontend build tool.

🚀 Getting Started

Download and put the files inside your themes folder, then activate the theme.
Download Latest Release
Install Dependencies

npm install

Run the Development Server

npm run dev

Open your WordPress site URL (e.g. http://mysite.local), not the Vite URL.

While npm run dev is running, WordPress loads the app from the Vite dev server. Vue and CSS changes show up instantly, and PHP changes reload the page. Stop the dev server and WordPress goes back to the production build.

Make sure WordPress is running locally (e.g., with LocalWP or Laragon) and that the theme is activated.

📦 Build for Production

npm run build

This will compile and optimize your Vue app into dist/. Upload the theme with the dist folder, you don't need node_modules or src on the server.

🔌 Working with the API

Add a route (PHP)

Add it at the bottom of functions/api.php. Routes live under /wp-json/vue-theme/v1/.

vue_theme_api_get('/books', function () {
    return get_posts(['post_type' => 'book']);
});

// URL parameter
vue_theme_api_get('/books/{id}', function ($request) {
    $book = get_post((int) $request['id']);

    if (!$book) {
        return new WP_Error('not_found', 'Book not found.', ['status' => 404]);
    }

    return $book;
});

// JSON body
vue_theme_api_post('/contact', function ($request) {
    $email = sanitize_email($request['email']);

    return ['sent' => true];
});

// Logged in users only, or users with a capability
vue_theme_api_post('/notes', 'my_callback', ['permission' => true]);
vue_theme_api_delete('/notes/{id}', 'my_callback', ['permission' => 'edit_posts']);

Use it (Vue)

In a component, useApi and useWp are auto-imported and give you reactive state:

<script setup>
const { data: books, loading, error } = useApi('books')

// WordPress core API: posts, pages, categories, media, your custom post types...
const page = ref(1)
const { data: posts, totalPages } = useWp('posts', () => ({ per_page: 6, page: page.value }))
</script>

<template>
    <p v-if="loading">Loading...</p>
    <p v-else-if="error">{{ error }}</p>
    <ul v-else>
        <li v-for="book in books" :key="book.ID">{{ book.post_title }}</li>
    </ul>
</template>

Anywhere else (stores, event handlers), use the clients:

import { api, wp } from '@/api' // or a relative path like '../api'

const books = await api.get('books')
const result = await api.post('contact', { email, message })
const posts = await wp.get('posts', { per_page: 5, search: 'vue' })
const { data, total, totalPages } = await wp.paginate('posts', { page: 2 })

Failed requests throw an ApiError with message, status and code. The nonce for logged in users is sent automatically.

🧭 Routing

Add your own routes in src/router/index.js.
Any other URL is looked up in WordPress: src/page/Content.vue shows the page or post with that slug, or a "Page not found" message.
Menus assigned to Primary Menu and Footer Menu (Appearance > Menus) are rendered by Header.vue and Footer.vue.

🛠 Integration Tips

Site title, logo and menus are available without a request: useSiteStore()
Pass your own PHP data to Vue with the vue_theme_app_config filter, then read it from window.wpVueTheme
Always use sanitizeHtml() from src/utils/html.js before rendering WordPress content with v-html
Import images from src/assets so they get the right URL after the build
Set show_in_rest to true on your custom post types to load them with useWp('your-post-type')

❓ Troubleshooting

"The Vue app is not built yet": run npm install and npm run build, or start npm run dev.
Changes don't show up: check that npm run dev is still running and that you opened the WordPress URL.
Port 5173 is already in use: create .env.local with VITE_DEV_PORT=5174.
Local domain is not localhost, *.local, *.loc or *.test: add VITE_WP_ORIGIN=http://your-domain to .env.local.
WordPress runs in Docker: PHP can't see the dev server on your machine, so add add_filter('vue_theme_check_dev_server', '__return_false'); to functions.php while developing.
Vue routes return a server 404: enable pretty permalinks in Settings > Permalinks.

⬆️ Upgrading from 1.x

See CHANGELOG.md for the breaking changes.

Github Repo

See Headless Vue + WordPress Boilerplate v2.0.0

License

See MIT License

Prepared by: Christopher Robin Chase

Headless Vue + WordPress Boilerplate

Christopher Robin Chase — Tue, 15 Apr 2025 08:12:43 +0000

Headless Vue + WordPress Boilerplate

🧠 Key Features

🌟 Use Vue 3 with Vite for a fast and modern development experience
🔌 Connects to WordPress REST API for dynamic content
🗂 Modular folder structure for components, pages, APIs, and stores
♻️ Supports Vue Router and Pinia (Vue Store)
🎨 Style with standard CSS or your preferred CSS preprocessor

📁 Folder Structure

themes/
└── vue-boilerplate/
    ├── functions/               # WordPress PHP functions
    ├── public/                  # Public assets
    ├── src/                     # Vue application root
    │   ├── api/                 # JS modules for API calls
    │   │   └── wp/
    │   ├── assets/              # Static assets like images and SVGs
    │   ├── components/          # Vue components (e.g., layout)
    │   ├── page/                # Vue page views
    │   ├── router/              # Vue Router setup
    │   └── stores/              # Pinia stores
    │       └── wp/
    │   ├─── App.vue             # Root Vue component
    │   ├─── main.js             # Vue app entry point
    │   └─── style.css           # Global styles
    ├── index.html               # Entry HTML for the Vue app
    ├── *.php                    # WordPress theme files (header.php, footer.php, etc.)
    ├── style.css                # Wordpress Global styles + Theme metadata
    ├── vite.config.js           # Configuration file for Vite, a fast frontend build tool.

🚀 Getting Started

Download and put the files inside your themes folder.
Download Latest Release
Install Dependencies

npm install

Run the Development Server

npm run start

This will start the Vite development server and compile your Vue frontend.

Make sure WordPress is running locally (e.g., with LocalWP or Laragon) and that the theme is activated.

📦 Build for Production

npm run build

This will compile and optimize your Vue app for production inside the WordPress theme.

🛠 Integration Tips

Use the functions.php file to enqueue the compiled assets
Use WordPress routes to serve the base HTML (index.php)
Connect your Vue app to the WP REST API through src/api/wp/

Feel free to clone or fork the repository and customize it for your projects.

Contributions and feedback are always welcome! 😃

Repository: https://github.com/chrischase011/wordpress-vue-theme-boilerplate

Star it if you find it useful! ⭐😉

Prepared by: Christopher Robin Chase

.bashrc Cheatsheet - Shortcut Commands

Christopher Robin Chase — Thu, 12 Sep 2024 15:02:05 +0000

My own .bashrc file uses aliases that you can use in your development. This file can speed up your development without typing long commands.

Note: You must have Git Bash, WSL, Linux OS, macOS, or any platform/software that can run a Bash shell (or a compatible shell) to make it work.

This .bashrc provides shortcut command for:

Basic Bash commands

NPM Core
Nuxt
Git
Vite
Laravel

Please visit the Github repository stated below to clone and check the available commands. You can also send a pull request to provide more shortcut commands to this .bashrc file.

Github Link: https://github.com/chrischase011/bashrc-cheatsheet

Prepared by: Christopher Robin Chase - Software Engineer

Termux-Ngrok Configuration

Christopher Robin Chase — Wed, 11 Sep 2024 13:57:47 +0000

Procedures to configure ngrok on termux to run nginx webserver

Steps to Configure Nginx on Termux with Ngrok

Download Termux at Playstore
Open Termux app after download
Update apt-get or pkg using this command you can use apt-get or pkg in installing package

apt-get update
pkg upgrade

Access shared and external storage using this command

termux-setup-storage

Then navigate to the home directory to check if the internal storage folder is present.

  cd ~
  ls

If the storage folder is in the list, then you're good to go.

Install nginx

pkg install nginx

After installing Nginx, you can access localhost using your phone's browser. Just type: localhost:8080.
If the Nginx welcome page appears, then the installation was successful.

Note: You can also stop the Nginx service by typing the following command

  nginx -s stop

The default location for Nginx HTML files is /usr/share/nginx/html. You can use the following command to navigate to that directory:

cd ~
cd ..
cd /usr/share/nginx/html

To view the contents of the folder, type the following command:

ls

Note: This is where you deploy HTML files to run on the Nginx web server. You’ll find the default Nginx web page named index.html in this directory.

8.1 If you want to configure the Nginx .conf file (for example, to change the port), you can navigate to /etc/nginx to locate the nginx.conf file. To do so, type the following command:

cd ~
cd ..
cd /usr/etc/nginx
ls

Then, you can find the nginx.conf file there. To view its contents, type the following command:

cat nginx.conf

If you want to edit the file, make sure to install the nano package.

pkg install nano

After installing nano, you can now edit the file using the following command:

nano nginx.conf

Note: locate the

server {

   listen     8080;
   server_name    localhost;

To edit the port from 8080 to your choice.

Warning: Editing this file can disrupt the web server service, so be careful when modifying the conf file.

To access localhost on a different device, we will use ngrok.

Ngrok is a cross-platform application that exposes local server ports to the internet.

To get started, download ngrok from: https://ngrok.com/download.

Note: Register on the ngrok website, as we will use your own Auth Token to save it on Termux and enable at least the free plan.

Note: Make sure that the ngrok zip file is in the Download folder of your internal storage so that it can be easily accessed from Termux.

After installing ngrok, navigate to the "Download" folder in your internal storage.

cd ~
cd storage
ls   // to check if the download folder exists

cd download
ls // to check the ngrok zip file

After that, type the following command to unzip the file and extract it to the home directory:

unzip ngrok.zip -d ~

Note: The file name of ngrok may differ, so you need to type the exact filename of the zip file in order to unzip it.

After you unzipped the file, lets go to home folder.

cd ~ 
ls

If you see ngrok in the list, then it's good. Next, let's change its permissions to make it executable. Type the following command:

chmod +x ngrok
ls

If ngrok is now displayed in green, it is ready to be launched.

Now, it's time to log in to the ngrok website and copy your auth_token to Termux.

In the dashboard, you will find the command to save your token in Termux. To do this, type the following command:

./ngrok <auth_token>

Example:

./ngrok 3yfi69Hf9ekfpsh&dhjPsnfu&dhdoapBs7znao7adn

Make sure you see a success message or at least "Auth Saved" after doing this.

Now, let's try to connect our localhost to ngrok. We know that it uses port 8080. To do so, type the following command:

./ngrok http 8080

Then, Termux will switch to the ngrok connection service, where you can see:

ngrok by @inconshreveable
Version
Status
Region, etc.

Now, let's look at the Session Status. It will always say "Reconnecting" and loop indefinitely. This happens because the latest version of ngrok may not work directly in Termux as it requires /etc/resolv.conf. To resolve this, let's install another package.

pkg install proot
pkg install proot resolve-conf

Note (Important): After installing proot, every time you use ngrok, you must run this command to use ngrok properly each time you close Termux.

termux-chroot

termux-chroot gives ngrok access to start a tunneling service, allowing us to expose our localhost to the internet.

After that, you are now ready to use ngrok anytime, anywhere, as long as you have an internet connection. Type this command again:

ngrok http 8080

Now, the Session Status will turn green and say "online." You will see two Forwarding links, one for HTTP and one for HTTPS. We will use the HTTP link to browse it in your browser.

Now, let's open it in your browser. Just copy the HTTP domain and paste it into the search bar.

Example:

http://4488-136-158-8-66.ngrok.io

And you will see the Welcome to Nginx page.

Remember:

To deploy web files, always refer to procedure number 8.

The default location for Nginx HTML files is /usr/share/nginx/html. You can use the following command to navigate to that directory:

cd ~
cd ..
cd /usr/share/nginx/html

And always remember to type

   termux-chroot

Everytime we open termux app to run ngrok.

That's all thank you.

Prepared by Christopher Robin Chase