skip to Main Content

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


  1. Chosen as BEST ANSWER

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

    <?php
    /**
     * Portfolio functions and definitions
     *
     * @link https://developer.wordpress.org/themes/basics/theme-functions/
     *
     * @package WordPress
     * @subpackage Portfolio
     * @since Portfolio 1.0
     */
    
    // Remove all default WP template redirects/lookups
    remove_action( 'template_redirect', 'redirect_canonical' );
    
    // Redirect all requests to index.html so the Vue app is loaded and 404s aren't thrown
    function remove_redirects() {
        add_rewrite_rule( '^/(.+)/?', 'index.html', 'top' );
    }
    add_action( 'init', 'remove_redirects' );
    
    // Load scripts
    function load_vue_scripts() {
        $theme_version = wp_get_theme()->get( 'Version' );
        $version_string = is_string( $theme_version ) ? $theme_version : false;
    
        wp_enqueue_script(
            'vuejs',
            get_template_directory_uri() . '/src/main.js',
            array(),
            $version_string
        );
    
        wp_enqueue_style(
            'vuejs-css',
            get_template_directory_uri() . '/src/assets/main.css',
            $version_string
        );
    }
    add_action( 'wp_enqueue_scripts', 'load_vue_scripts');
    
    function add_type_attribute($tag, $handle, $src) {
        // change the script tag by adding type="module" and return it.
    
        if ( 'vuejs' === $handle ) {
            $tag = '<script type="module" src="' . esc_url( $src ) . '"></script>';
            return $tag;
        }
    }
    add_filter('script_loader_tag', 'add_type_attribute' , 10, 3);

    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.


  2. If you want to change the path of the included files search for templates/index.html inside your functions.php and replace it with dist/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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search