vuejs-wordpress-theme-starter

A true WordPress theme with the guts ripped out and replaced with Vue. Based on EvanAgee's billiant work, which was originally based on the BlankSlate WP starter theme.

Features

VueRouter integrated
Vuex integrated (with sample WordPress-centric modules)
Axios for API requests
Bootstrap Vue for easy Bootstrap 4 Components
Font Awesome 5 for vector & social icons
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.
SCSS support

Getting started

Clone the repo inside of your wp-content/themes/ directory
Navigate to the theme directory and run npm install npm run watch for development npm run production when you're ready to deploy the theme.

Dependencies & Requirements

There are some useful plugins that are required for this theme. In order to install them, use WP-cli or WPackagist:

Install plugins via WP-Cli

wp plugin install wp-api-menus acf-to-rest-api wp-rest-api-frontpage wp-pwa-yoast-seo wordpress-seo --activate

Or...

Install plugins via WPackagist

{
    "repositories":[
        {
            "type":"composer",
            "url":"https://wpackagist.org"
        }
    ],
    "require": {
        "wpackagist-plugin/wp-api-menus":"*",
        "wpackagist-plugin/acf-to-rest-api":"*",
        "wpackagist-plugin/wp-rest-api-frontpage":"*",
        "wpackagist-plugin/wp-pwa-yoast-seo":"*",
        "wpackagist-plugin/wordpress-seo":"*"
    }
}

Usage

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.

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

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
- /styles SCSS 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.

Routes

By default, this theme sets up three separate routes. One for the homepage, one for WordPress pages and one for WordPress posts. These routes can be found in /src/router/index.js

In order to separate pages from posts, you'll need to change the permalinks settings. By default, we've created a home page and a news page. Next, set these up as the static pages via:

In the admin dashboard
Go to Settings > Reading option
Select A static page (select below) option for Your homepage displays.
Set Homepage: as Home
Set Posts: as News
Press Saves Changes button
Go to Settings > Permalinks
Select the permalinks structure as Custom Structure with the entry /news/%postname%/
Press the Save Changes button

ojdon / vuejs-wordpress-theme-starter