Vue Academy · Pelajaran

Arsitektur Plugin dan app.use()

Objek plugin { install(app, options) }, mengakses app.component, app.directive, app.provide.

Arsitektur Plugin dan app.use() adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Apa Itu Pengaya Vue

Pengaya Vue adalah kode yang dapat digunakan kembali untuk menambahkan fungsionalitas tingkat aplikasi — komponen global, direktif, layanan yang diinjeksi, atau konfigurasi. Contohnya: Vue Router, Pinia, dan pustaka i18n.

Anda mendaftarkan pengaya satu kali dengan app.use(plugin).

Kontrak install

Pengaya dapat berupa objek dengan metode install(app, options), atau fungsi yang langsung digunakan sebagai install. Vue memanggilnya dengan instans aplikasi dan opsi apa pun yang Anda berikan.

const myPlugin = {
  install(app, options) {
    // register things on the app here
    console.log('installing with', options)
  }
}

export default myPlugin

Mendaftarkan Komponen Global

Di dalam install, gunakan app.component(name, definition) untuk mendaftarkan komponen yang tersedia di setiap templat tanpa perlu mengimpornya.

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'

const uiKit = {
  install(app) {
    app.component('BaseButton', BaseButton)
    app.component('BaseIcon', BaseIcon)
  }
}

Mendaftarkan Direktif Global

Gunakan app.directive(name, definition) untuk mendaftarkan direktif kustom secara global, seperti v-focus atau v-tooltip.

const focusPlugin = {
  install(app) {
    app.directive('focus', {
      mounted(el) {
        el.focus()
      }
    })
  }
}

// usage in any template: <input v-focus />

Menyediakan Layanan yang Dapat Diinjeksi

app.provide(key, value) mengekspos nilai yang dapat dibaca oleh komponen turunan mana pun dengan inject(key). Ini adalah cara modern untuk berbagi layanan (klien API, konfigurasi) tanpa variabel global.

const apiPlugin = {
  install(app, options) {
    const client = createClient(options.baseURL)
    app.provide('api', client)
  }
}

Menggunakan Layanan yang Disediakan

Komponen mana pun dapat menggunakan inject untuk membaca apa yang disediakan pengaya. Sebaiknya gunakan kunci injeksi bertipe (sebuah Symbol) demi keamanan, tetapi kunci string juga dapat digunakan.

<script setup>
import { inject } from 'vue'

const api = inject('api')
async function load() {
  const data = await api.get('/users')
}
</script>

Meneruskan Opsi ke Pengaya

Argumen kedua untuk app.use diteruskan sebagai parameter options dari install. Gunakan argumen ini untuk mengonfigurasi perilaku saat pendaftaran.

import { createApp } from 'vue'
import App from './App.vue'
import apiPlugin from './plugins/api'

const app = createApp(App)
app.use(apiPlugin, { baseURL: 'https://api.example.com' })
app.mount('#app')

Pengaya Berjalan Sebelum mount

Semua pemanggilan app.use berlangsung sebelum app.mount. Saat mount dilakukan, setiap komponen global, direktif, dan nilai yang disediakan telah terdaftar, sehingga render pertama sudah dapat mengakses semuanya.

const app = createApp(App)
app.use(router)
app.use(pinia)
app.use(uiKit)
// everything is registered, now render
app.mount('#app')

Instalasi Idempoten

Vue mencegah pemasangan pengaya yang sama dua kali pada satu aplikasi — pemanggilan kedua app.use untuk pengaya identik akan diabaikan. Namun, rancang install agar aman dan hindari efek samping di luar instans aplikasi.

app.use(myPlugin) // installs
app.use(myPlugin) // ignored, no double registration

Pengaya Minimal yang Lengkap

Jika digabungkan, sebuah pengaya dapat mendaftarkan komponen dan direktif, serta menyediakan layanan dalam satu metode install.

import Banner from './Banner.vue'

export default {
  install(app, options = {}) {
    app.component('AppBanner', Banner)
    app.directive('focus', { mounted: (el) => el.focus() })
    app.provide('config', { theme: options.theme || 'light' })
  }
}

Pengaya vs Komposabel

Gunakan pengaya untuk penyiapan seluruh aplikasi yang berjalan satu kali (komponen global, menyediakan layanan singleton). Gunakan komposabel untuk logika berstatus yang dapat digunakan kembali dan dikonsumsi oleh setiap komponen. Pengaya sering menyiapkan sesuatu yang kemudian dibaca komposabel melalui inject.

Pemeriksaan Cepat

Uji pemahaman Anda tentang arsitektur pengaya.

Rangkuman

Anda telah mempelajari arsitektur pengaya:

Pengaya mengekspos install(app, options) (atau berupa fungsi)
app.component / app.directive mendaftarkan elemen global
app.provide mengekspos layanan yang dapat diinjeksi dan dibaca melalui inject
app.use(plugin, options) mendaftarkannya sebelum mount
Instalasi bersifat idempoten — instalasi kedua akan diabaikan

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Arsitektur Plugin dan app.use()” gratis?

Ya — teks lengkap “Arsitektur Plugin dan app.use()” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Arsitektur Plugin dan app.use()”?

Objek plugin { install(app, options) }, mengakses app.component, app.directive, app.provide. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Arsitektur Plugin dan app.use()” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Arsitektur Plugin dan app.use()
Properti Global dan provide/inject dalam Plugin
Contoh Plugin Notifikasi dan Toast
Mempublikasikan dan Mengetik Plugin Vue

← Kembali ke Vue Academy