Vuejs Wordpress Theme Starter

A WordPress theme with the guts ripped out and replaced with Vue.
Alternatives To Vuejs Wordpress Theme Starter
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Iconpark6,931387 months ago35July 04, 2022493apache-2.0TypeScript
🍎Transform an SVG icon into multiple themes, and generate React icons,Vue icons,svg icons
Vuepress Theme Vdoing3,6821611 days ago80August 04, 202354mitVue
2 days ago131mitVue
:tomato: Simple and visually-pleasing Pomodoro timer
Simpleui3,040133a month ago112December 18, 202214mitPython
A modern theme based on vue+element-ui for django admin.一款基于vue+element-ui的django admin现代化主题。全球20000+网站都在使用!喜欢可以点个star✨
Vuepress Next1,8913,1264,31812 days ago224August 28, 202338mitTypeScript
Repo for VuePress 2
Vuepress Theme Reco 1.x1,62514295 months ago265July 27, 20233mitVue
🎨 This is the repo for vuepress-theme-reco 1.
Tailwind Config Viewer1,608306 months ago22September 08, 202227Vue
A local UI tool for visualizing your Tailwind CSS configuration file.
Vuejs Wordpress Theme Starter1,547
10 months ago36JavaScript
A WordPress theme with the guts ripped out and replaced with Vue.
Hexo Theme Aurora1,00529 days ago35September 16, 202341mitVue
🏳️‍🌈 Futuristic auroral Hexo theme.
Md Editor V3789916 hours ago83November 06, 20223mitTypeScript
Markdown editor for vue3, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...
Alternatives To Vuejs Wordpress Theme Starter
Select To Compare

Alternative Project Comparisons


Tweet Twitter Follow

VueWordPress Theme Starter

A true WordPress theme with the guts ripped out and replaced with Vue. Looking to create a Vue-powered WordPress plugin? I've got a starter for that too!

Who's this for? When I started diving into using Vue in WordPress I found plenty of great starters for headless WordPress, but I had the added constraint of needing to run the front and backend on the same host, thus this project was created.

Need help? Join the VueWordPress Slack.


  • Tailwind is built in! If you don't want Tailwindcss in your project you can easily disable it by removing the import statement in styles.css.
  • Hot reloading/browsersync for local development.
  • VueRouter integrated
  • Vuex integrated (with sample WordPress-centric modules)
  • Axios for API requests
  • Follows the development guidelines/structure set forth by Vuejs
  • Bare essentials needed for a functional WordPress theme
  • All requests are redirected back to the index.php so your Vue routing is respected.
  • PostCSS baby

Getting started

Watch the getting started video

  1. Clone the repo inside of your wp-content/themes/ directory
  2. Navigate to the theme directory in your terminal and run npm install npm run watch for development npm run build when you're ready to deploy the theme.
  3. Activate the theme in your WordPress instance.
  4. Update your permalink settings (Settings -> Permalinks) to be "Day and name". If you don't want to use this setting you'll need to update the Vue router so it can find your content correctly. Please note that if you want to use a different permalink structure you'll need to update ./src/router/index.js so it looks for the correct path.

Since by default Tailwind completely resets all styles/spacing, there are a few initial styles I've provided in src/assets/css/_tailwind.css to make things appear more like you'd expect. Modify to your liking!

Video Training

Code Organization

All of the code you're going to edit is located in /src/. From there it's broken into a few logical directories.

  • /src
    • /api for API requests
    • /assets for images mostly
    • /components Vue components
    • /router vue-router directives
    • /store vuex store and modules
    • /assets/css CSS styles
    • /vendor 3rd party scripts and libraries

All scripts and styles in /src are compiled down to the /dist directory, which is what you will deploy. When you're ready to deploy don't deploy the src/ directory.

New to Vue?

Not sure where to begin? The Vuejs documentation is actually amazing, but if you're looking for video training I highly recommend the free Learn Vue 2: Step By Step course over at Laracasts. There's also a great playlist by Academind available on YouTube that covers pretty much everything you'd want to know about building a fully-featured Vue app.

I've created a couple of example components in src/components/widgets to give you an idea of how to work with the Vuex store data.

If you're new to Vue/Vuex I would do the following:

  • Open up src/app.js this is the main JS file for the app and will give you a glimpse into what's going on behind the scenes.
  • Next open up src/App.vue this is the primary app component, a page wrapper of sorts. It contains the header/footer and the <router-view> component which is what loads in all of the other screens as you navigate around the app. Note that by default src/components/Home.vue is loaded into the router-view initially.
  • Next open up src/routes/index.js and notice how the routes are setup by default. Out of the box there is only one route, the / or home view. For more information on setting up routing within your app checkout Vue-Router.
  • Next is the Vuex store. I won't cover how that works here as it's a tiny bit more advanced. Check out all files in src/store and start to familiarize yourself with what's going on. It's based on the official Vuex example project setup and uses Vuex modules. By default I've included a couple of modules I thought you might need.

The first thing you're probably going to want to do is start editing and components in src/components/.

External References

Features coming soon:

  • More documentation



  • Removed some legacy CSS, further integrated Tailwind.
  • Added browser-sync!
  • Reorganized and updated the webpack config and files.
  • Updated many npm packages including webpack
  • Updated webpack production minification/optimization settings.


  • Updated npm packages
  • New theme screenshot
  • Updated README
  • Updated Home component


  • Added tailwindcss support.
  • npm module updates
  • updated to latest version of Vuejs

2019-02-05 Added

  • Support for postcss
  • New css style examples
  • Cache busters for js and css


  • Updated outdated npm packages
  • Recent post and Page widgets to use router-link
  • Removed Laravel Mix and replaced with standard webpack config


  • Example Firebase integration
  • jQuery
  • Several unused npm dependencies
  • Bootstrap / Bootstrap Vue
  • Several variables that were stored on the window object
  • Support for sass styling (switched to postcss)

2018-08-20 Added

  • Default routing for posts and pages. @EvanAgee
  • Views for posts and pages. @EvanAgee
  • getters for pages. @EvanAgee
  • Examples for fetching pages/posts with either Vuex actions OR in component. @EvanAgee
  • Activated LocalStorage plugin in store. @EvanAgee
  • Loader component. @EvanAgee


  • UglifyJS. @EvanAgee

2017-10-24 Added

  • status_header(200) to keep Wordpress from returning 404 for vue-router paths.

2017-10-21 Removed

  • vue-slick dependency
  • vue2-google-maps dependency
  • unnecessary header/footer php files
  • the-tailor dependency
  • font-awesome dependency


  • Updated webpack (Larevel Mix) config
  • Switched from Bootstrap to Bootstrap-Vue


  • Fixed index.php

2017-10-17 Added

  • More documnentation. @EvanAgee
  • Post module. @EvanAgee
  • A few code comments. @EvanAgee
  • Example widgets for posts and pages. @EvanAgee


  • Home page to display the posts and pages widgets. @EvanAgee

2017-10-11 Initial commit

Popular Vue Projects
Popular Theme Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Vue Router
Wordpress Theme