A true WordPress theme with the guts ripped out and replaced with Vue.
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
- Clone the repo inside of your
wp-content/themes/
directory - Navigate to the theme directory in your terminal and run
npm install
npm run watch
for developmentnpm run production
when you're ready to deploy the theme. - Activate the theme in your WordPress instance.
- 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. - Boom.com!
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.
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 defaultsrc/components/Home.vue
is loaded into therouter-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/
.
- Creating Vuex Modules
- vue-router
- WordPress REST API
- WordPress REST API Handbook
- Expose ACF fields to REST API
- More documentation
2020-01-29
- 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.
2020-01-28
- Updated npm packages
- New theme screenshot
- Updated README
- Updated Home component
2020-01-28
- 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
Changed
- Updated outdated npm packages
- Recent post and Page widgets to use router-link
- Removed Laravel Mix and replaced with standard webpack config
Removed
- 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
Removed
- 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
Changed
- Updated webpack (Larevel Mix) config
- Switched from Bootstrap to Bootstrap-Vue
Fixed
- 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
Changed
- Home page to display the posts and pages widgets. @EvanAgee
2017-10-11 Initial commit