Vue Wp Starter

screenshot of Vue Wp Starter

Vue Wp Starter

A WordPress Vue.js starter plugin


The Vue.js WordPress Starter is a plugin that allows developers to easily integrate Vue.js into their WordPress projects. This starter plugin comes pre-configured with essential tools and features that make it convenient to build modern PHP-based WordPress applications using Vue.js. It includes a range of features such as a pre-configured webpack config, Babel loader, CSS and LESS loaders, separate vendor scripts, Uglify JS for production, and more. With this plugin, developers can quickly set up a development environment, build frontend and backend apps, and even use a handy Vue List Table Component for creating WordPress list tables effortlessly.


  • Pre-configured webpack config: The plugin ships with a pre-configured webpack configuration, which saves developers time and effort in setting up their development environment.

  • Babel loader, Vue loader, CSS and LESS loader: This plugin includes loaders for Babel, Vue, CSS, and LESS, enabling developers to seamlessly integrate these technologies into their WordPress projects.

  • Separate vendor.js with all vendor scripts: The plugin allows for the separation of vendor scripts into a separate file, enhancing performance and maintainability of the application.

  • Uglify JS for production: To optimize the production build, the plugin includes Uglify JS, which minifies the JavaScript code, resulting in faster loading times.

  • Separate frontend.js and admin.js: Developers can separate their frontend and admin scripts, making it easier to manage and debug these components individually.

  • Extracted CSS/LESS to separate frontend.css and admin.css files: Similarly, CSS and LESS styles are extracted into separate files, making them easier to manage and customize.

  • Auto reloading with Browsersync: The plugin includes Browsersync, which provides auto-reloading functionality. This allows developers to instantly see their changes without manually refreshing the page.

  • Vue and Vue Router: The plugin comes bundled with Vue and Vue Router, making it simple to use these libraries for building powerful frontend applications.

  • Frontend (shortcode) and Backend starter app: The plugin provides a starter app for both the frontend and backend, allowing developers to quickly get started with building WordPress applications.

  • Modern PHP codebase with namespace support: The plugin is built using modern PHP practices and supports namespaces, providing a cleaner and more organized codebase.


To use the Vue.js WordPress Starter plugin, follow these steps:

  1. Clone this repository into your plugins folder.
  2. Activate the plugin.
  3. In the Base_Plugin class, change the class name to your desired name.
  4. Replace the PHP namespace "App" with your desired name.
  5. Replace any references to "baseplugin" or "BASEPLUGIN" in the files.
  6. Run npm install to install all required dependencies.
  7. To start developing, run npm run dev.
  8. For production build, run npm run build.


The Vue.js WordPress Starter is a handy plugin for WordPress developers who want to integrate Vue.js into their projects. With pre-configured webpack settings, essential loaders, separate vendor scripts, and auto-reloading capabilities, this plugin provides a seamless development experience. It also includes a starter app for both frontend and backend, making it easy to get started with building WordPress applications. Additionally, the plugin offers extra goodies such as a Vue List Table Component for creating WordPress list tables effortlessly. Overall, this plugin is a valuable tool for developers looking to leverage the power of Vue.js in their WordPress projects.


Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.


Less CSS is a dynamic stylesheet language that extends the capabilities of CSS, allowing developers to write cleaner, more modular, and reusable stylesheets with features like variables, mixins, and nested rules.


Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.