New updates for 2019!

[EvanAgee]

I've made quite a few updates to the project that should fix many of the issues you all have been experiencing. Some highlights include:

• Project is updated to work on latest stable version of node and npm.
• Removed Laravel mix.
• Removed jQuery
• Removed Bootstrap Vue
• npm cleanup/updates

Please note that the paths of the JS and CSS have changed so you may need to update your project.

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)

[NtZyr]

What a reason for removing Laravel Mix?

[aske-cph]

I used quite some time to re-add Bootstrap, add SASS support, and i think Laravel mix is way simpler to use than the webpack config.

So i am not sure i agree with these changes, but thanks anyway for a great starter!

[EvanAgee]

@NtZyr and @aske-cph I considered the change before making it and in the end I felt like I preferred exposing the full webpack config rather than hiding it behind Laravel Mix. Obviously it wouldn't be difficult to use Mix if you prefer it. Thanks!

[lwroslundh]

Hi Evan,

Really like this boilerplate. Seems like a nice starter to getting Vuejs implemented with a WordPress backend.
I'm running following setup.
Wordpress 5.1
Node 8.5.0
NPM 5.3.0
I can't seem to get the setup correct when i follow along the readme you have provided.
Here is a link of the console errors i get

[giekaton]

See answer nr 2 #19 (comment)

[lwroslundh]

@giekaton
Hi,
Did you manage to get it to work?
I saw the answers you linked to, and tried to update the routes and and api base path.
I get no console errors when updating the page, but i still don't get to see the boilerplate view.

[giekaton]

Yep, for me it started to work after that fix. Had similar error as you.

[giekaton]

I have created my first website with vuejs-wordpress-theme-starter.

So far I really like this WP+Vue combo.

• Because of Vue, WP is now dynamic. Website navigation doesn't reload the browser window.
• WP server-side SEO makes Vue SEO friendly.
• I can now have CMS with Gutenberg Blocks for my Vue projects.
• I can work with my Vue code using best practices in a Vue CLI environment.

As far as I understand, WP being a content system, needs its content components to be rewritten in Vue. For example, right now comments don't work, as they are PHP based.

Another thing I'm not sure about is the reactivity of the content. The content created with WP editor is not reactive now. As a workaround, the reactive content parts can come from Vue only, like I did with the home page and the menu. Though it would be good to have a link between WP blocks and Vue reactivity.

Or maybe Vue components can be created in Gutenberg blocks...

Also, there is no hot reloading on the development server.

You can see my newly created WP+Vue website at https://stress.toys

[lordwill000]

I have created my first website with vuejs-wordpress-theme-starter.

So far I really like this WP+Vue combo.

• Because of Vue, WP is now dynamic. Website navigation doesn't reload the browser window.
• WP server-side SEO makes Vue SEO friendly.
• I can now have CMS with Gutenberg Blocks for my Vue projects.
• I can work with my Vue code using best practices in a Vue CLI environment.

As far as I understand, WP being a content system, needs its content components to be rewritten in Vue. For example, right now comments don't work, as they are PHP based.

Another thing I'm not sure about is the reactivity of the content. The content created with WP editor is not reactive now. As a workaround, the reactive content parts can come from Vue only, like I did with the home page and the menu. Though it would be good to have a link between WP blocks and Vue reactivity.

Or maybe Vue components can be created in Gutenberg blocks...

Also, there is no hot reloading on the development server.

You can see my newly created WP+Vue website at https://stress.toys

How did you manage SEO?

[giekaton]

For the front-end I used 'vue-head' and for the backend 'yoast seo'.

SEO tags in both 'vue-head' and 'yoast seo' should be identical. Frontend SEO is required mostly for dynamic stuff, Google also sees it (but i think it prioritizes backend SEO). For OG tags, e.g. facebook image preview + title, you need backend SEO.

[giekaton]

I'm currently building another site on the same wp+vue stack: https://thinkingerrors.org

It's a content based page but also has an integrated vue app: https://thinkingerrors.org/cbt-app

I'm currently building the content. Editing it with wordpress is satisfying.

The hot updates of this wp-vue stack that take ~3x longer than normal and require manual page refresh are quite annoying, slows development process. I don't see a good reason to run a "non-content" based site/app on this vue-wp stack. I have recently used this stack for my other project (https://cryptoclothing.cc), but because of the slow dev process, I switched to laravel+vue stack. With laravel the development is faster and more lightweight. Interestingly, the site loading speeds for both stacks were similar, so wp is definitely not slow in the production loading speeds, just not as comfortable as vue+laravel for development.

[adamk22]

@giekaton Do you use any type of server-side rendering by any chance? I'm using this theme but having crawling issues with Google.

[giekaton]

@adamk22 I don't.

I use SSR for my other Vue project, where there is no backend. But with this wp-vue stack, the server side rendering is done by Wordpress, and its title tags can be comfortably managed with Yoast SEO plugin.

What indexing problems are you experiencing?

Actually, my websites' (based on this theme stack) indexing was strange and complicated.

Google also indexed the theme's folder which is not good. I then blocked it with robots. I'm not sure if this is this theme's problem, or my new server's...

Around the same time, I launched some other basic wp (non wp-vue) websites on the same server, they were indexed quickly and without any issues.

After a while, my wp-vue pages were indexed, but it was difficult, required repeated manual submissions through google search console, and took quite some time.