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. Der Backend bildet Laravel mit Datenbank MySQL auf dem Server.
  2. Der 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

Sonstige Quellen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.