Ada 3 pembahasan dalam reusability pada vue js
- Composable
Pada vue application "composable" itu function yang di manfaatkan oleh composition api untuk merangkum dan mengulang kembali stateful logic.Yang biasanya gini
Ada perubahan di dalam <script>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
const y = ref(0);
const x = ref(0);
function update(event) {
x.value = event.pageX;
y.value = event.pageY;
}
onMounted(() => window.addEventListener("mousemove", update));
onUnmounted(() => window.addEventListener("mousemove", update));
</script>
<template>Mouse position {{ x }}, {{ y }}</template>
<!-- template/ component -->
<script setup>
import { useMouse } from "../composable/mouse";
const { x, y } = useMouse();
</script>
<template>Mouse position {{ x }}, {{ y }}</template>
create 1 folder di dalam src/composable/mouse.js.
import { ref, onMounted, onUnmounted } from "vue";
export function useMouse() {
const x = ref(0)
const y = ref(0)
function update(event) {
x.value = event.pageX
y.value = event.pageY
}
onMounted(() => window.addEventListener('mousemove', update))
onUnmounted(() => window.addEventListener('mousemove', update))
return { x, y}
}
Jangan lupa jika anda menggunakan vue js perlu tambahkan route. kalo nuxt tempatkan di folder /pages
- Custom Directive
By default vue js sudah banyak directive yang bisa di pake contoh: v-show, v-model, etc. akan tetapi kita bisa custom directive. Perlu diketahui DOM sangat penting yang harus di kuasai<template>
<input v-focus />
<div v-event>ready</div>
<div id="demo"></div>
</template>
<script setup>
const vFocus = {
mounted: (el) => el.focus(),
};
const vEvent = {
mounted: (el) => el.addEventListener("click", clickRun),
};
function clickRun() {
document.getElementById("demo").innerHTML = "Ready to go";
}
</script>
- Plugin
Plugin di vue js seperti menambahkan function code untuk mempermudah di tempate. sebagai contoh kita install I18n language internationalize. Install package nya npm i vue-i18n.
Note: Sebaiknya language di pisahkan dalam satu folder beda file. contoh en.json id.json/ en.js id.js. recomended json
import i18nPlugin from './plugins/i18n'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(i18nPlugin, {
greetings: {
hello: 'welcome',
class: 'Vue Js'
}
})
create file /plugins/i18n.js
export default {
install: (app, options) => {
// inject a globally available $t() method
app.config.globalProperties.$t = (key) => {
// retrieve a nested property in `options`
// using `key` as the path
return key.split('.').reduce((o, i) => {
if (o) return o[i]
}, options)
}
}
}
Jadi di template tinggal gini
<template>
<h1>{{ $t("greetings.class") }}</h1> // Vue Js
</template>
Bonus register global component
tambahkandi main.js
import GlobalComponent from './components/GlobalComponent.vue'
const app = createApp(App)
app.component('GlobalComponent', GlobalComponent)
ini contoh componentnya
<template>Create Global Component</template>
di template tinggal tanpa perlu import component
<template>
<global-component />
</template>
Komentar