Vue.JS und globale Komponente

Aktuell entwickle ich eine Web-Anwendung auf der Basis des PHP-Framework Laravel. Heute werden auch Web-Anwendungen in mehrere Bestandteile aufgeteilt:

1. 1. Das Backend bildet das PHP-Framework Laravel mit Datenbank MySQL auf dem Server.
   2. Das Frontend bildet das JavaScript-Framework Vue.JS auf dem Client/Browser

Im Gegensatz zu vielen Beispielen implementiert man die Vue-Komponenten jeweils in einer VUE-Datei die dann über Vue-Loader und das Tool WebPack (wird mit Laravel installiert) zu einer app.js zusammen gebunden werden.

Wie können wir eine „globale“ Vue-Komponente in einer anderen Vue-Komponente verwenden?

Template-Struktur

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

Vue-Komponente direkt importieren

Im Eingang der Onlinehilfe zu Vue-Loader wird beschrieben wie wir eine Komponente in eine andere direkt importieren können:

<template src="./template.html">
  <komponent>
</template>

<script>
import Komponente from './MyKomponente.vue'

export default {
  components: { Komponente },
  data() {
    :

Vue-Komponente global verfügbar

Bei einem Laravel-Projekt ist das zentralle JavaScript app.js. Hier bindet man „global“ alle verfügbaren Komponenten ein. Dabei ist aber zwischen zwei verschiedene Arten zu unterscheiden:

1. Vue-Komponente die man über eine Vue-Tag in Templates einbindet
2. Als globales JavaScript-Object

Im nachfolgenden Auszug aus meiner app.js sehen Sie beide Varainten.

// Globale Komponente als Objekt
import UserMsg from './components/UserMsg.vue'
window.UserMsg = UserMsg;
...
  // Vue-Template-Tag Komponente
  components: {
    'test-vue': require('./components/TestVue.vue'),
...

Recherche

Google: vue.js component vue-file import as object

• Vue-Hilfe Single File Components
• Beschreibung der Bestandteile einer Vue-Datei

Sonstige Quellen

• How to build a modal component that lives outside its parent?
• Pass global javascript variable to component
• Accessing global variables from single file Vue component?
• Extend template of a component
• How can I do modal as component dynamically?
• Vue.JS Hilfe Async Components
• Cannot access Vuex $store inside Modal component