WordPress Vue Плагин с однофайловым компонентом - не может использовать импорт

Question

Я новичок в WP и Vue. js Я пытаюсь создать плагин для WP в Vue, который берет данные из WP API и распечатывает простую таблицу.

Вот мои файлы плагинов:

custom_plugin_name. php

<?php

/**
 * Plugin Name: custom_plugin_name
 * Description: WordPress Vue.js plugin
 * Version: 1.0
 */


// Register API Endpoints
[...]


// Register scripts
function func_load_vuescripts() {
    // Register Vue.js and scripts
    wp_register_script('wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js');
    wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ) . 'vuecode.js', 'wpvue_vuejs', true );
}
add_action('wp_enqueue_scripts', 'func_load_vuescripts');


// Create shortscode function
function func_wp_vue() {

    // Load Vue.js and scripts
    wp_enqueue_script('wpvue_vuejs');
    wp_enqueue_script('my_vuecode');

    return file_get_contents(plugin_dir_path(__FILE__) . './App.vue');
}

// Add shortscode
add_shortcode( 'wpvue', 'func_wp_vue' );

vuecode. js

import App from './App.vue'

var app = new Vue({
    el: '#vuejs-container',
    template: '<App/>',
    components: { App }
})

App. vue

<template>
    <div id="vuejs-container">
        <h1>My Todo App!</h1>
        <AppTable/>
    </div>
</template>

<script>
    import AppTable from "./components/Table.vue";

    export default {
        components: {
            AppTable
        }
    };
</script>

Когда я запускаю этот код, я получаю две ошибки в двух операторах импорта (в vuecode. js и App. vue):
Uncaught SyntaxError: невозможно использовать оператор импорта вне модуля

Я даже пробовал включать vuecode. js скрипт с атрибутом type = "module", но ничего не меняет.

Answer 1

Вам необходимо импортировать все ваши vue компоненты в файл vuecode.js. Кроме того, не забудьте указать все компоненты при создании экземпляра приложения vue. js.

import App from './App.vue'
import AppTable from './components/Table.vue';

var app = new Vue({
    el: '#vuejs-container',
    template: '<App/>',
    components: { 
        App,
        AppTable
    }
})