I am developing a headless wordpress site using Vue.js and I have a custom-theme named vue-wordpress. The theme is scafolded using Vue CLI. Here is the directory structure –
- dist
- assets
- templates
- public
- src
- templates
- functions.php
- package.json
- theme.json
- style.css
I want that when my site loads the file it points to is dist/templates/index.html and not templates/index.html
Does anyone know how to achieve this?
Thank you.
2
Answers
@superEwald Thank you for sharing your thoughts on this issue. I checked out both articles and I think they are excellent resources. I have just fixed the problem I had by adding the following piece of code in my functions.php -
I don't know if this is the correct fix but I will as I move forward with the SPA application I build. I would also like your thoughts on this piece of code.
If you want to change the path of the included files search for
templates/index.html
inside yourfunctions.php
and replace it withdist/templates/index.html
. However, simply including the html file shipped with the vue template will lead to various problems and is probably not what you actually want to do.If you want to use Vue as SPA frontend for a headless wordpress instance I recommend looking into the bshiluk/vue-wordpress theme which comes with a lot of neat features out of the box. If you want to do it by hand I recommend reading this tutorial.