Kommentare zu: WordPress-Plugin-Admin-UI-Entwicklung mit Vue.js – da wächst nichts zusammen, was nicht zusammen gehört https://www.kuerbis.org/2018/10/wordpress-plugin-admin-ui-entwicklung-mit-vue-js-da-waechst-nichts-zusammen-was-nicht-zusammen-gehoert/ Sun, 28 Feb 2021 15:29:02 +0000 hourly 1 https://wordpress.org/?v=6.9.4 Von: Ralf Geschke https://www.kuerbis.org/2018/10/wordpress-plugin-admin-ui-entwicklung-mit-vue-js-da-waechst-nichts-zusammen-was-nicht-zusammen-gehoert/#comment-174 Sat, 14 Sep 2019 08:26:19 +0000 https://www.kuerbis.org/?p=3894#comment-174 Als Antwort auf Robert.

Hallo Robert!

Vielen Dank für Deinen Kommentar und Sorry fürs späte Freischalten. Tatsächlich mache ich nicht mehr als genau das – per wo_enqueue_script die main.js laden lassen, dazu kommen nur noch die ggf. notwendigen CSS-Files per wp_enqueue_style. Wenn das Plugin aktiv ist und angezeigt wird, wird im Admin-Bereich per PHP-Ausgabe nur noch folgender HTML-Code erzeugt:


div id="meine_tolle_app"

/div

(Bitte die „<" und ">„-Zeichen dazu denken, irgendwie gibt WP die hier nicht aus..?)

Damit sorgt vue.js letztlich dafür, dass in diesem Bereich die vue-App angezeigt wird, und zwar per index.js von vue:


(function($) {
if ($("#meine_tolle_app").length) {

const meineApp = new Vue({
render: h => h(App)
}).$mount("#meine_tolle_app");

}

})(jQuery);

Das ganze hängt nur noch in jQuery, da ich zunächst abfrage, ob das div mit der ID ‚meine_tolle_app‘ vorhanden ist, denn nur dann soll die Einbindung stattfinden. Schematisch besser erklärt ist der Vorgang z.B. hier: https://www.heise.de/developer/artikel/Komplexe-Webanwendungen-mit-Vue-js-Teil-1-4153504.html?seite=all

Momentan nutze ich vue.js nur für den Admin-Bereich – für das Frontend habe ich bislang noch keinen Bedarf gehabt. Letztlich wäre es aber ähnlich, wobei das jeweils verwendete Theme auch noch ein Wörtchen mitreden dürfte, d.h. ob das alles kompatibel ist und überhaupt funktioniert.

Beste Gruesse,
Ralf

]]> Von: Robert https://www.kuerbis.org/2018/10/wordpress-plugin-admin-ui-entwicklung-mit-vue-js-da-waechst-nichts-zusammen-was-nicht-zusammen-gehoert/#comment-173 Tue, 10 Sep 2019 18:24:54 +0000 https://www.kuerbis.org/?p=3894#comment-173 Hallo Ralf,
vielen dank für die Vorstellung Deines Wegs durch die Hölle. 😉
Leider bekomme ich die Integration in WP nicht hin. Du bindest zwar per enqueue_script die main.js ein, aber wie bekommst Du dann die VueApp im WP Backend o. Frontend angezeigt?
Nur die Einbindung reicht ja nicht? Oder bin ich da falsch informiert. Und danke nochmal Super Einblick..
Gruss Robert

]]>