How to integrate VueJS & WordPress

In today’s day and age, it’s not uncommon to come across websites that are powered by both VueJS and WordPress. This unique combination allows for the best of both worlds – VueJS provides the smooth and responsive user experience, while WordPress offers the power and flexibility of a content management system. In this guide, we’ll walk you through the process of integrating VueJS and WordPress, providing you with all the knowledge and tools you need to create a seamless and dynamic website. So, let’s dive in and explore the world of VueJS and WordPress integration!

Requirements:

• A working WordPress site
• Access to your site source code
• A working VueJS app

To review the code for yourself, you can visit our Github.

I. Create and config VueJS application

1. Create a new VueJS application

Let’s start by creating a new application, open your terminal and run

npm init vue@latest

VueJS will ask you a couple more questions, but for the simplicity of this demo, we will not choose any of them, and I will name my project: my-app

✔ Project name: … my-app
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
Scaffolding project in my-app...
Done.

After this, you can navigate to the app’s folder, install dependencies and start the app like normal.

VueJS version 3 comes with Vite as its default bundler, so in this tutorial, we’ll stick with Vite instead of attempting to use Webpack.

2. Config Vite

In order to make the app easier for us to embedded it into WordPress, we can config Vite to compile CSS (styles) into Javascript. We can use a Vite plugin to handle this, let start by installing a new dependency:

npm install -D vite-plugin-css-injected-by-js

Next, open the vite.config.js and add this plugin:

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"; // Import the plugin
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), cssInjectedByJsPlugin()], // Add plugin here
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: { 
    rollupOptions: {
      output: {
        // Add this build config to skip chunking the source
        manualChunks: undefined,
        // Add this line to remove the hash file name.
        // So instead of index-somethinghashed.js, it will be index.js all the time
        entryFileNames: 'assets/[name].js'
      },
    },
  },
})

 

Vite is a fast and efficient modern build tool for front-end web development, with hot module reloading, efficient bundling, and created by Evan You, the creator of Vue.js.

3. Handling asset files

When attempting to embed VueJS into WordPress, relying on relative paths to add asset files such as images can be unreliable, but fortunately, there is a workaround available. This method is simple and only requires 2 additional steps:

a) Manually copy the image to WP site (wp-content/<your-theme>/<vue-app>/assets/)

b) Build URL for the image’s src

We will need to build the URL for our image instead of using the relative import. In general, in script, we will add

<script setup>
const imageUrl = new URL(`${import.meta.url}/../logo.svg`)
</script>

To use it, simply use :src

<img :src="imageUrl" alt="img" class="logo" width="125" height="125" />

II. Update WordPress site to use the VueJS app

1. Copy the build folder into your WordPress theme folder

2. Create a new page template for our VueJS app

As you may know, in Vue applications, the app needs to attach to an element in the DOM to perform its tasks. By default, this element is usually a <div> with an id of “app”, although this can be changed to a different element or ID as needed. For this tutorial, let’s create a new file in your theme folder called “page-vue.php” to get started.

<?php /* Template Name: Vue page */ ?>
<div id="app"></div>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri() . '/dist/index.js' ?>"></script>

The name of the template is up to you, but the file name convention needs to follow the instruction page-xxxx.php. Read more

The result:

 

III. Conclusion

Combining VueJS with WordPress brings forth a multitude of benefits. VueJS offers an intuitive and responsive user interface, while WordPress provides a powerful and flexible content management system, making it a perfect pairing for modern web development. By integrating VueJS with WordPress, developers can create dynamic and efficient websites that are both visually appealing and easy to manage. So, if you’re looking to build a website that offers the best of both worlds, we highly recommend using VueJS with WordPress. The possibilities are endless!

Thank you for taking the time to read about the integration of VueJS and WordPress. We hope that this information has been helpful and informative for you. By combining these two technologies, you can create a website that is both visually appealing and highly functional, offering an exceptional user experience. If you have any questions or would like to learn more about integrating VueJS with WordPress, please don’t hesitate to reach out. Thank you again for your time, and we wish you all the best in your website development endeavors.

---

If you’re interested in building a website using VueJS and WordPress, we’re here to help. Our team of experienced developers and designers can work with you to create a website that meets all of your needs and exceeds your expectations. From the initial planning stages to the final.