Demo aplikasi Nuxt Store : https://nuxt-store.variancode.com – penjelasan kerja aplikasi silahkan lihat video Youtube di atas.

Petunjuk instalasi : https://www.youtube.com/watch?v=uPInBKlR5-4

Source code : https://variancode.com/contoh-crud-restful-api-jwt-pada-vue-js-laravel-lumen/

Nuxt Store menggunakan framework CSS BootstrapVue (Bootstrap 4) dan boilerplate Nuxt.js. Build Nuxt diset ke mode SSR (Server Side Rendering), bukan SPA (Single Page Application), agar halaman Vue.js dapat ter-indeks oleh mesin pencari seperti Google – penting jika optimasi mesin pencari atau SEO (Search Engine Optimization) menjadi prioritas Anda.

Nuxt Store menerapkan 4 (empat) grid options / breakpoints, masing-masing : xs (extra-small), sm (small), md (medium) dan lg (large) agar tampilan website menjadi responsive / dapat menyesuaikan ukuran layar device yang berbeda-beda.

Nuxt Store hanya menggunakan JSON Server sebagai pengganti backend dan DBMS. Karena data yang digunakan hanya berupa file JSON statis, maka stok produk tidak akan berkurang meskipun checkout di keranjang belanja telah dilakukan berulang kali. Isi file JSON dapat dilihat di : https://github.com/varianhermianto/fake-db/blob/master/db.json.

Nuxt Store akan selalu mengirim request GET ke sisi REST API (my-json-server) untuk meminta data setiap kali ada halaman produk Apple Watch 3, iPhone XS, Macbook Pro 13 atau Macbook Pro 15 yang dibuka. Ketika request dilakukan, indikator berupa progress bar berwarna hijau tampil di bagian atas layar.

Data produk dari REST API (my-json-server) dapat di-cache dan disimpan di Local Storage browser, sehingga Nuxt Store tidak harus selalu meminta data ke REST API (my-json-server) setiap kali pengunjung website membuka halaman produk. Dengan membuka halaman index terlebih dahulu sebelum halaman produk, maka seluruh data produk akan disimpan oleh Nuxt Store sebagai cache di dalam Local Storage. Hal ini ini berguna untuk mencegah pengulangan request yang sama.

Nuxt Store dibuat agar sesuai dengan guidelines yang direkomendasikan oleh Google. Untuk mengukur kualitas halaman web, audit dapat dilakukan dengan bantuan Lighthouse yang ada di Chrome DevTools.

Studi kasus terkait :

Fitur Vue.js lainnya yang dapat Anda temukan di source code Nuxt Store :

  • Component Props.

  • Routing halaman (file based).

  • Registrasi komponen global.
  • Vuex State Management.
  • API Request dengan Axios.

  • Async, Await, Fetch, Progress Bar.

  • Alert notification dengan setTimeout.

  • Environment variable / .env file.