[Vuejs]-Is there a way that my wordpress site points to index.html in diste/templates directory instead of normal wordpress behavior?

by

0👍

✅

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.

0👍

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

Leave a comment