search

EvanAgee / vuejs-wordpress-theme-starter

A WordPress theme with the guts ripped out and replaced with Vue.
https://vuewp.com/
1.6k stars 281 forks source link

New updates for 2019! #48

Closed EvanAgee closed 4 years ago

EvanAgee commented 5 years ago

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:

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

2019-02-05

Added

Changed

Removed

NtZyr commented 5 years ago

What a reason for removing Laravel Mix?

aske-cph commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

See answer nr 2 https://github.com/EvanAgee/vuejs-wordpress-theme-starter/issues/19#issuecomment-470327189

lwroslundh commented 5 years ago

@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 commented 5 years ago

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

giekaton commented 5 years ago

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

So far I really like this WP+Vue combo.

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

@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.