Membuat Global Variable di Vue Js Vite
Pada aplikasi yang dibangun menggunakan Laravel sebagai backend dan Vue js sebagai frontend kita bisa membuat global variable yang nantinya akan diakses oleh komponen file vue. Sebagai contoh kita ingin membuat global variable untuk mendefinisikan nama aplikasi dengan variable appName yang mengembalikan nilai "Aplikasiku". Maka pada komponen file vue kita bisa panggil dengan menggunakan tag {{ appName }}.
Caranya cukup sederhana, kita asumsikan vuejs yang kita pakai menggunakan Vite. Maka kita bisa menambahkan konstanta variabel pada file utama yaitu app.js. Jika menggunakan laravel 10 kalian bisa menemukan file app.js di folder resources\js.
Kita bisa menambahkan global variabel didalam komponen mixin yang sudah tersedia. Tinggal tambahkan sebuah method berupa data yang mengembalikan nilai variable berupa string atau integer tergantung keperluannya apa. Kalo disini saya akan membuat variabel berupa string untuk mendeklarasikan nama aplikasi yang akan saya panggil pada tag <title></title> pada setiap file vue.
saya akan membuat method di dalam komponen mixin yang mengembalikan variabel appName = "e-TOEFL" Sehingga untuk programnya kurang lebih seperti dibawah ini :
import jquery from 'jquery'
window.jQuery = window.jquery = jquery
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { InertiaProgress } from '@inertiajs/progress';
import moment from 'moment';
import VueApexCharts from "vue3-apexcharts";
createInertiaApp({
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
//set mixins
.mixin({
methods: {
examTimeRangeChecker: function (start_time, end_time) {
return new Date() >= new Date(start_time) && new Date() <= new Date(end_time)
},
examTimeStartChecker: function (start_time) {
return new Date() < new Date(start_time)
},
examTimeEndChecker: function (end_time) {
return new Date() > new Date(end_time)
},
formatDateWithTime: function (date) {
return moment(date).format('DD MMMM YYYY H:mm:ss');
},
formatDate: function (date) {
return moment(date).format('DD MMMM YYYY');
}
},
data() {
return { appName : "e-TOEFL" }
},
})
.use(plugin)
.use(VueApexCharts)
.mount(el)
},
});
InertiaProgress.init();
<template>
<Head>
<title>{{ appName}} - Riwayat Ujian</title>
</Head>
.........
</template>Tag ini berlaku untuk semua file vue dalam satu aplikasi karena appName sudah kita deklarasikan sebagai variabel global.
