Run WordPress plugin scripts using Vue.js

0
votes

I'm thinking about creating a WP theme using Vue.js and this starter: https://github.com/EvanAgee/vuejs-wordpress-theme-starter

I wonder if it will be possible to use WP plugins normally then.

E.g. I'd like to use Contact Form 7, so it would be easy to load HTML structure but I'm not sure how to run JS of this plugin in the right moment.

What about more complicated plugins like WPML?

Do I have any possibility to have access to scripts of any plugin and make general function that will give me a possibility to run plugin scripts even without knowing names of functions?

I think it's a good idea to write theme with WP and Vue but I wouldn't like to lose the best thing in WordPress - plugins.

I mean customer experience, not my own.

1
javascriptwordpressvue.js

1 Answers

0
votes

The referenced theme uses the headless approach, so you can't use it without Server Side Rendering (SSR) using node.js to have the content accessible by search engines. WPML will not work neither, as it loads only content for the page initially loaded, so when you change the route from within the app, you have first to fetch the content of the new route. Furthermore you might need to load also related scripts and styles for the new route, as these can be enqueued only for particular pages / post_id's / templates.

It is a huge pain in the a** to combine both worlds (Vue/SPA's vs WordPress). I know this because I am working now for 7 months (since January/February 2019) on a commercial fully functional and SEO friendly Vue.js + WordPress theme. Last month I was working on an integration of Polylang. And it sucks. Not only because Polylang sucks in general (though I am still using it over WPML because it has a far better performance but the usability, functionality and documentation is far bellow of those of WPML), but also because of the mentioned technical issues on route changing.

But I've managed the troubles and hopefully by the end of September I will make the theme available for purchase at wue-theme.app. It will have also integrated WPML, WooCommerce, WP Rocket and Elementor. Until then I have a free starter theme solving general SEO issues on Github: http://github.com/Tech-Nomad/wue-theme

You might also want to check this similar starter theme: https://github.com/bucky355/vue-wordpress