Awesome article Paloma, really helped me get my basic Vue app working (mostly) in WP site. However, I've run into some tricky (for me at least) styling issues. I guess various styles of my WP site's theme are overriding my Vue app's styles. I'm loading the styles using 'wp_register_style' and 'wp_enqueue_style' using the pattern you show above. I've confirmed the styles are being loaded in my WP site, but apparently being overridden. I've experimented with trying to affect their load order by adding (and removing) the 'true' parameter on wp_register_style, as well as moving the order of my register and enqueue calls first and last. I also saw a suggestion to add a high index number parameter to the 'add_action' call like this:
One conflict I found was with jquery which was included with my site's theme (I believe). When I removed it in my browser's web tools, my app's layout improved some.
Hi Terry,
thank you! :)
Several problems may have arisen here. Actually Vue.js scopes its styling if the scope attribute is used. Furthermore I recommend only styling using/via classes (preferably in BEM) so that nothing can be overwritten. The advantage of BEM is also the readability. The specificity of the CSS selectors is also an important indicator (css-tricks.com/specifics-on-css-sp...).
It could be that styles are reloaded using jQuery. By removing this, this may be omitted.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Awesome article Paloma, really helped me get my basic Vue app working (mostly) in WP site. However, I've run into some tricky (for me at least) styling issues. I guess various styles of my WP site's theme are overriding my Vue app's styles. I'm loading the styles using 'wp_register_style' and 'wp_enqueue_style' using the pattern you show above. I've confirmed the styles are being loaded in my WP site, but apparently being overridden. I've experimented with trying to affect their load order by adding (and removing) the 'true' parameter on wp_register_style, as well as moving the order of my register and enqueue calls first and last. I also saw a suggestion to add a high index number parameter to the 'add_action' call like this:
add_action('wp_enqueue_scripts', 'func_load_vuescripts', 99999);
One conflict I found was with jquery which was included with my site's theme (I believe). When I removed it in my browser's web tools, my app's layout improved some.
Any ideas?
Hi Terry,
thank you! :)
Several problems may have arisen here. Actually Vue.js scopes its styling if the scope attribute is used. Furthermore I recommend only styling using/via classes (preferably in BEM) so that nothing can be overwritten. The advantage of BEM is also the readability. The specificity of the CSS selectors is also an important indicator (css-tricks.com/specifics-on-css-sp...).
It could be that styles are reloaded using jQuery. By removing this, this may be omitted.