DEV Community: Christopher Robin Chase

Headless Vue + WordPress Boilerplate

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

Headless Vue + WordPress Boilerplate

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
🔌 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