> ## Content Index
> Fetch the complete content index at: https://debug.my.id/llms.txt
> Use this file to discover other available public pages before exploring further.
# Cara mudah menghilangkan flicker {{ }} di vue.js
- URL: https://debug.my.id/cara-menghilangkan-flicker-di-vuejs/
- Published: 2020-12-30T04:48:00.000Z
- Updated: 2025-06-24T23:37:32.000Z
- Description: Sebuah tip singkat untuk menghilangkan flicker di vue.js
- Author: Tukang Debug
- Tags: Vue.js, Tip/trik
Jika Anda membuat sebuah webapp atau blog atau yang sejenis dengan menggunakan **vue.js**, maka Anda mungkin akan menemui sedikit masalah yang mengganggu, yaitu kadang akan muncul seperti ***flicker*** karakter **{{ }}** pada saat halaman terbuka. Memang hanya beberapa *milisecond* saja, tetapi lama kelamaan akan terasa sangat mengganggu.
Masalah ini hampir pasti muncul pada saat Anda menggunakan vue.js tidak sebagai **SPA**, melainkan sebagai library biasa yang digunakan langsung di halaman web. [Lalu apa penyabab masalah **flicker** ini dan bagaimana solusinya ?](https://debug.my.id/cara-menghilangkan-flicker-di-vuejs/)
Masalah **flicker** ini disebabkan oleh proses rendering template vue yang di dalamnya terdapat ***mustache tag*** yaitu **{{ }}**. Proses rendering template ini akan dilakukan setelah vue.js selesai di load oleh Browser, sehingga ada jeda waktu antara loading library vue.js dan halaman web yang sudah terlanjur muncul.
Ada berapa solusi yang bisa dicoba untuk menghindari [***flicker***](https://debug.my.id/cara-menghilangkan-flicker-di-vuejs/) ini terjadi. Beberapa diantaranya adalah sebagai berikut.
### 1\. Mengubah posisi loading vue.js dari sebelum akhir body menjadi di atas body.
Jika dalam kondisi normal Anda biasanya menempatkan posisi script di bagian akhir dari body, seperti contoh di bawah ini :
```html
Apa kabar dunia
{{ message }}
Halo, perkenalkan nama saya {{nama}}, saya saat ini tinggal di {{ alamat }}.
```
Pada kode di atas, vue.js di load dari **cdn.jsdelivr.net** diposisi akhir body, sebelum script aplikasi. Kode dengan pola seperti inilah yang akan menyebabkan ada flicker **{{ message }}** selama beberapa saat.
Untuk menghilangkan flicker, cara yang paling mudah adalah dengan memindahkan loading vue.js ke **head**, seperti contoh di bawah ini.
```html
Apa kabar dunia
{{ message }}
Halo, perkenalkan nama saya {{nama}}, saya saat ini tinggal di {{ alamat }}.
```
Cara ini sangat mudah, tetapi sebenarnya sangat tidak disarankan, karena akan menambah loading time dari halaman web. Ada blocking time dimana browser akan menunggu sampai dengan vue.js selesai di get dari server baru melanjutkan proses render. Jadi, jika anda memilih untuk menggunakan solusi ini, pastikan anda menggunakan library vue.js versi production.
### 2\. Menggunakan v-text
Alternatif lain untuk menghilangkan flicker adalah dengan menggunakan **v-text** pada tag tempat *mustache tag* berada. Untuk contoh di atas, kita bisa pindahkan **{{ message }}** , dan **{{ nama }}** dan **{{ alamat }}** masing-masing ke dalam blok dimana dia berada.
```html
Apa kabar dunia
Halo, perkenalkan nama saya , saya saat ini tinggal di .
```
Dengan menggunakan solusi ini, maka flicker akan hilang dikarenakan meskipun vue.js ditempatkan di akhir body, akan tetapi karena di dalam **div** tersebut kosong, maka tidak akan ada yang di render pada saat awal halaman tersebut muncul. Bandingkan dengan sebelumnya yang di dalam **div** terdapat *mustache tag* {{ message }}.
Akan tetapi, solusi ini hanya cocok jika Anda menggunakan sedikit *mustache tag*. Jika Anda menggunakan banyak sekali *mustache tag*, maka Anda mungkin akan kerepotan karena harus mengganti *mustache tag* menjadi v-text dibanyak tempat.
### 3\. Menggunakan v-cloak
Mungkin solusi ini yang paling cocok disebagian besar keadaan. Yaitu dengan menggunakan **v-clock** untuk menyembunyikan *mustache tag* sampai dengan library vue.js selesai di-*load* oleh browser. Untuk menggunakan fitur v-cloak ini, langkah pertama yang harus dilakukan adalah menambahkan css untuk meng-hidden v-cloak secara default. Silahkan tambahkan css ini ke dalam head atau external css di dalam head.
```html
```
Kemudian, silahkan tambahkan v-cloak pada blok yang terdapat *mustache tag*. Pada contoh di atas adalah pada **div**.
```html
Apa kabar dunia
{{ message }}
Halo, perkenalkan nama saya {{nama}}, saya saat ini tinggal di {{ alamat }}.
```
Dengan menggunakan **v-cloak** ini, Anda hanya perlu menambahkan 1 baris css dan menempatkan v-cloak hanya di 1 tempat saja (di-root aplikasi) atau mungkin hanya di beberapa tempat saja. Bandingkan dengan jika Anda menggunakan v-text, dimana Anda harus menambahkan v-text disemua tempat yang menggunakan *mustache tag*.
### Kesimpulan
Dari beberapa alternatif solusi di atas, silahkan pilih dan gunakan solusi mana yang paling sesuai dengan kebutuhan Anda. Untuk saya pribadi, solusi yang paling cocok dan saya gunakan sampai saat ini adalah yang menggunakan **v-cloak**
Sekian tip dan trik kali ini. Selamat mencoba dan semoga yang sedikit ini bermanfaat.
Sumber :
[https://vuejs.org/v2/api/#Directives](https://vuejs.org/v2/api/?ref=debug.my.id#Directives)
[Cara mudah menghilangkan flicker {{ }} pada Angular.jsJika ada membuat web atau webapp dengan menggunakan framework Angular.js, maka salah satu hal yang hampir selalu ditemui adalah, masalah flicker pada saat web atau webapp tersebut di refresh. Flicker yang saya maksud adalah jeda antara template html yang di dalamnya terdapat tag template {{ }} dengan proses render-nya, sehingga padaSinau CodingTukang Debug](https://debug.my.id/cara-mudah-menghilangkan-flicker-pada/)