Tentang Vue.JS

Vue.js adalah suatu library javascript yang digunakan untuk membangun antar muka sebuah website yang interaktif. Library dari Vue.js difokuskan hanya pada view layer dan sangat mudah diimplementasikan dan diintegrasikan dengan library lain ataupun juga dengan project yang sudah ada sebelumnya.

Vue.js menyediakan fungsi Reactive data binding dan fungsi mengatur komponen View yang ada dengan API yang sesederhana mungkin. Vue difokuskan pada lapisan tampilan saja / View. Oleh karena itu sangat mudah untuk mengambil dan untuk mengintegrasikan framework ini dengan proyek yang telah dibuat.

Keunggulan Vue JS

Ukuran kecil

Salah satu fitur yang paling signifikan adalah ukurannya yang kecil. Berat badan Vue.js hanya 18 kb setelah gzip. Namun, perlu dicatat bahwa ekosistem Vue.js juga kecil dan cepat. Dengan pengguna Vue.js dapat memisahkan compiler templat-ke-virtual-DOM dan bahkan waktu berjalan. Meskipun ukurannya kecil, Vue.js secara konsisten melebihi kerangka kerja besar seperti AngularJS dan Ember JS.

Kemudahan pemahaman dan pengembangan

Keuntungan dengan Vue.js adalah memungkinkan pengembangan template skala besar. Yang tidak hanya memudahkan programmer tapi juga menghemat banyak waktu. Karena strukturnya yang tidak rumit, sangat sedikit waktu yang dihabiskan untuk mencari blok yang berisi kesalahan.

Integrasi Sederhana

Tidak seperti kerangka kerja Javascript lainnya, Vue.js berguna baik untuk membangun keseluruhan aplikasi satu halaman dan untuk memberikan kontribusi komponen ke dalam aplikasi yang ada. Ini memiliki kemampuan untuk memuat struktur, logika, dan gaya komponen dalam satu file yang pada gilirannya membuatnya sangat mudah untuk dibuat. komponen fleksibel yang dapat digunakan kembali dalam proyek lain. Salah satu fitur menarik lainnya adalah sangat bagus untuk menambahkan banyak komponen reaktif kecil ke template yang ada.

Dokumentasi yang komprehensif

Vue.js memiliki dokumentasi yang sangat teliti dan ditulis dengan baik. Bagi pemula untuk menulis aplikasi pertama mereka, mereka hanya perlu mengetahui beberapa Javascript dan HTML dasar dan kemudian dapat menyelesaikan setengah aplikasi.

Fleksibilitas

Jika pengguna ingin menulis aplikasi cepat yang akan berjalan langsung dari browser, maka Vue.js benar-benar dapat membantu Anda. Bahkan bisa menangani aplikasi yang lebih canggih dengan JSX, ES6, routing dan bundling. Fleksibilitas ini memudahkan untuk beralih ke Vue karena pengembang yang memiliki pengalaman dengan kerangka React, Angular and JS framework akan menemukan desain Vue yang sangat familiar.

Memfasilitasi komunikasi dua arah

Vue.js sangat responsif dan mirip dengan kerangka kerja Sudut JS karena memfasilitasi dan mempercepat penanganan blok HTML. Kerangka kerja kerangka Vue.js memudahkan penerapan arus satu arah sekaligus penting saat bekerja dengan komponen yang berbeda.

Konten berikut merupakan cuplikan modul training Pengembangan Aplikasi Web berbasis Vue.Js yang telah kami laksanakan. Konten mengalami editing dengan menghilangkan beberaa bagian sehingga sesuai dengan tujuan blog ini bahwa kami memiliki pengalaman dalam Training Vue.JS.

1​ INSTALASI

​1.1​ Installing Node JS

https://nodejs.org/en/

Untuk menginstall Nuxt.js, pastikan kita telah menginstall npx, secara otomatis npx terinstall oleh NPM versi 5.2.0 keatas

Aplikasi akan berjalan di alamat http://localhost:3000. Nuxt.js akan otomatis mendeteksi perubahan di folder pages, jadi ketika kita memulai ulang/ merestart aplikasi kita, secara otomatis akan menghasilkan URL baru

​1.2​ Installing Nuxt

Nuxt.js transforms every *.vue file inside a pages directory as a route for the application.

The application is now running on http://localhost:3000

​2​ KONFIGURASI

The nuxt.config.js

File nuxt.config.js berisi konfigurasi global dari aplikasi.

Build

Opsi untuk mengkonfigurasi langkah-langkah dari build atau konfigurasi saat pembuatan, termasuk dengan loaders, filenames, konfigurasi webpacks dan transplation

Css

Opsi untuk mendefinisikan file CSS yang akan digunakan secara global, termasuk dengan modules, library yang akan dipakai disetiap halaman.

Dev

Opsi untuk membedakan konfigurasi saat mode development atau production di nuxt js. Konfigurasi ini sangat penting untuk digunakan di Nuxt JS.

Env

Opsi untuk mendefinisikan variable yang akan digunakan di client dan di server

Generate

Opsi yang digunakan untuk menambahkan value atau paramater untuk setiap route dinamis di aplikasi yang akan diubah menjadi file HTML di Nuxt JS

Head

Opsi untuk mendefinisikan Meta Tags

Loading

Untuk kostumisasi komponen loading yang di set secara default

Modules

Opsi untuk menambahkan modules

modulesDir

Opsi untuk mendefinisikan folder / direktori modules

Plugins

Untuk mendefinisikan plugin javascript external yang akan dijalankan / di inisialisasi di root aplikasi sebelum menjalankan script aplikasi dari Vue JS.

rootDir

Opsi untuk mendefinisikan direktori root dari aplikasi

Router

Router adalah opsi untuk mengubah nilai route/ halaman pada aplikasi

Server

Opsi untuk konfigurasi variable yang digunakan di sisi server

srcDir

Opsi untuk mendefinisikan direktori source dari aplikasi nuxt js

Dir

Untuk mendefinisikan direktori yang telah diubah nama nya.

3 VIEW AND LAYOUTING

Bagian View (Tampilan) menggambarkan semua yang Anda perlukan untuk mengkonfigurasi data dan tampilan untuk rute tertentu pada Aplikasi Nuxt.js anda (Dokumen, Layout, Halaman, dan HTML Head).

3.1 Dokumen

Anda dapat mengkustomisasi dokumen utama dengan Nuxt.js. Untuk meng-extend templat HTML, buatlah app.html pada root proyek Anda.

3.2 Tata Letak (Layouts)

Nuxt.js memungkinkan Anda meng-extend layout utama atau membuat layout secara kustom dengan menambahkannya ke dalam folder layouts.

1. Layout Default
   Anda bisa meng-extend layout utama dengan menambahkan file layouts/default.vue. Pastikan untuk menambahkan komponen <nuxt/> saat membuat layout untuk menampilkan komponen halaman.
2. Halaman Kesalahan (Error Page)

Anda dapat mengkustomisasi halaman kesalahan ini dengan cara menambahkan file layouts/error.vue. Layout ini spesial, karena Anda tidak harus menyertakan <nuxt/> pada templatnya. Anda harus memahami layout ini sebagai komponen yang ditampilkan ketika terjadi kesalahan (error) (404, 500, dan sebagainya.). Kode sumber halaman kesalahan yang default tersedia di GitHub.

1. Kustom Layout

Setiap file (*level pertama *) pada folder layouts akan membuat kustom layout yang dapat diakses dengan properti layout di dalam komponen halaman. Pastikan Anda menambahkan komponen <nuxt/> ketika membuat layout untuk menampilkan komponen halaman.

3.3 Halaman (Pages)

Setiap komponen Halaman (Page) adalah komponen Vue, namun Nuxt.js menambahkan petunjuk khusus untuk membuat pengembangan (development) aplikasi universal Anda dengan cara yang sangat mudah.

3.4 HTML Head

Nuxt.js menggunakan vue-meta untuk memperbarui headers dan atribut-atribut html pada aplikasi Anda.

Standar Meta Tag

Nuxt.js memungkinkan Anda mendefinisikan semua <meta> standar (default) untuk aplikasi Anda di dalam file nuxt.config.js. Gunakan properti head yang sama.

Untuk mengetahui daftar pilihan yang dapat Anda berikan pada metode head, lihat dokumentasi vue-meta .

Kustomisasi Meta Tag pada sebuah Halaman

Untuk menghindari duplikasi saat menggunakannya pada child komponen, berikan pengenal unik dengan key hid.

4 ROUTING & PAGES

Nuxt js secara otomatis membuat/ generate konfigurasi vue-router sesuai dengan file yang ada di folder pages. Untuk navigasi di setiap halaman, direkomendasikan menggunakan komponen <nuxt-link>.

4.1 Basic Routes

4.2 Route Dinamis

Untuk mendefinisikan parameter di route yang dinamis, kita perlu menambahkan prefix underscore.

4.3 Validasi Parameter Route

Nuxt.js akan mendefinisikan validator didalam route yang dinamis. Sebagai contoh: pages/users/_id.vue

Jika metode validasi tidak menghasilkan true atau sebuah promis, maka akan menghasilkan halaman error, halaman error dengan code 400 atau 500.

4.4 Nested Routes

Nuxt.js memungkinkan Anda membuat nested route dengan menggunakan anak route dari vue-router. Nuxt.js akan membuat rute bersarang yang di. Untuk menentukan komponen induk dari rute bersarang, Anda perlu membuat file Vue dengan nama yang sama dengan direktori yang berisi tampilan anak-anak Anda. Peringatan: jangan lupa untuk memasukkan <nuxt-child/> di dalam komponen induk (.vue file).

4.5 Dynamic Nested Routes

4.6 Unknown Dynamic Nested Routes

Jika kita tidak mengetahui struktur route nya, kita bisa menggunakan _.vue untuk path route dinamis, ini akan menghandle request yang tidak sesuai.

5 ASSET & COMPONENT

Secara default, Nuxt menggunakan vue-loader, file-loader dan url-loader webpack loaders untuk penyimpanan aset yang kukuh. Kamu juga dapat menggunakan direktori Static untuk aset yang statis.

5.1 Webpacked

Secara default, vue-loader akan memproses file style dan templat kamu secara otomatis menggunakan css-loader dan kompiler templat Vue. Dalam proses kompilasi ini, semua aset URL seperti pemanggilan gambar pada komponen HTML atau CSS ( <img src=”…”>, background: url(…), dan CSS @import ) akan dipecahkan sebagai modul dependensi.

Dalam CSS kamu, jika kamu menggunakan url(‘~/assets/image.png’) , itu akan diterjemahkan menjadi require(‘~/assets/image.png’).

Karena .png bukan file dari JavaScript, Nuxt.js mengonfigurasi webpack untuk menggunakan file-loader dan url-loader untuk menanganinya untuk Anda.

Manfaat menggunakan file-loader dan url-loader adalah:

• file-loader memungkinkan Anda menentukan tempat untuk menyalin dan menempatkan file aset, dan bagaimana cara menamainya menggunakan version hashes untuk caching (memori sementara) yang lebih baik.
• url-loader memungkinkan Anda untuk menyamakan inline file sebagai data URL base-64 jika ukurannya lebih kecil dari batas yang diberikan. Hal ini dapat mengurangi sejumlah permintaan HTTP untuk file yang kurang berarti. Jika file lebih besar dari batas, maka secara otomatis akan kembali ke file-loader.

Yang berarti setiap file di bawah 1 KB akan digaris bawahi sebagai data URL base-64. Jika tidak, gambar/font akan disalin di foldernya yang sesuai (di bawah direktori .nuxt) dengan nama yang berisi version hash untuk caching yang lebih baik.

Saat menjalankan aplikasi kita dengan nuxt, templat kita berada pada pages/index.vue:

Jika Anda ingin memperbarui loader ini atau menonaktifkannya, silakan menggunakan build.extend.

5.2 Static

Jika Anda tidak ingin menggunakan Aset webpacked dari direktori assets, Anda dapat membuat dan menggunakan direktori static pada direktori root Anda. File-file ini akan secara otomatis dilayani oleh Nuxt dan dapat diakses di URL root proyek Anda.

Pilihan ini sangat membantu untuk file seperti robots.txt, sitemap.xml, atau CNAME (seperti halaman-halaman GitHub).

6 AKSES API / ASYNC DATA

Anda mungkin ingin mengambil data dan me-rendernya di sisi-server. Nuxt.js menambahkan metode asyncData untuk memungkinkan Anda menangani operasi async sebelum menyetel data komponen.

6.1 Metode asyncData

Terkadang Anda hanya ingin mengambil data dan mem-“pre-render”-nya di server tanpa menggunakan simpanan (store). asyncData dipanggil setiap saat sebelum memuat komponen (hanya untuk komponen halaman). Ini bisa disebut sisi-server atau sebelum menavigasi ke rute yang sesuai. Metode ini menerima context sebagai argumen pertama, Anda dapat menggunakannya untuk mengambil beberapa data dan Nuxt.js akan menggabungkannya dengan data komponen.

Anda TIDAK memiliki akses contoh komponen melalui this di dalam asyncData karena ia dipanggil sebelum memulai komponennya. Nuxt.js menawarkan berbagai cara untuk menggunakan asyncData. Pilih yang paling Anda lazimi:

1. Mengembalikan Promise. Nuxt.js akan menunggu promise terselesaikan sebelum me-render komponennya.
2. Menggunakan async/await proposal (pelajari lebih lanjut)
3. Tentukan callback sebagai argumen kedua.

6.2 Context

Untuk melihat daftar kunci yang tersedia dalam context, lihat API Essential context.

Mengakses data rute dinamis

Anda dapat menggunakan objek context yang dimasukkan ke properti asyncData untuk mengakses data rute dinamis. Misalnya, rute dinamis params dapat diakses dengan menggunakan nama file atau folder yang telah dikonfigurasi. Jadi, jika Anda mendefinisikan sebuah file bernama _slug.vue, Anda dapat mengaksesnya melaluicontext.params.slug.

Menangani Error

Nuxt.js menambahkan metode error(params) di dalam context, Anda dapat memanggilnya untuk menampilkan halaman kesalahan. params.statusCode juga akan digunakan untuk membuat kode status yang tepat dari sisi-server.

Jika Anda menggunakan argumen callback, Anda dapat memanggil secara langsung dengan kesalahannya dan Nuxt.js akan memanggil metode error untuk Anda.

7 PLUGIN

Nuxt.js memungkinkan Anda menentukan plugin JavaScript yang akan dijalankan sebelum menginstal Aplikasi root Vue.js. Hal ini sangat membantu saat menggunakan pustaka (library) atau modul eksternal Anda sendiri.

Penting untuk diketahui bahwa dalam Vue [instance lifecycle], hanya kait (hook) beforeCreate dan created yang dipanggil keduanya dari sisi-klien dan sisi-server. Semua kait (hook) lainnya hanya dipanggil dari sisi-klien.

7.1 Paket Ekternal

Kita mungkin ingin menggunakan paket/modul eksternal dalam aplikasi kita, salah satu contoh bagusnya adalah axios untuk membuat permintaan (request) HTTP untuk server dan klien.

Tapi ada satu masalah di sini. Jika kita mengimpor axios di halaman lain, maka ia akan disertakan lagi untuk bundel halaman. Kita ingin menyertakan axios hanya satu kali dalam aplikasi kita. Untuk melakukan ini, kita menggunakan kunci build.vendor pada nuxt.config.js kita.

Kemudian, kita bisa mengimport axios di mana saja tanpa harus khawatir membuat bundel menjadi lebih besar.

7.2 Plugin Vue

Jika kita ingin menggunakan vue-notifications untuk menampilkan pemberitahuan pada aplikasi kita, kita perlu menyiapkan plugin sebelum meluncurkan aplikasi.

Untuk mempelajari lebih lanjut tentang kunci konfigurasi plugins, lihat plugins API. Sebenarnya, vue-notifications akan disertakan dalam bundel aplikasi, tapi karena ini adalah pustaka (library), kita ingin memasukkannya ke dalam paket vendor untuk penyimpanan (caching) yang lebih baik.

Kita dapat memperbarui nuxt.config.js untuk menambahkan vue-notifications di dalam bundel vendor.

7.3 Memasukkan (inject) dalam $root & context

Beberapa plugin perlu dimasukkan di dalam root Aplikasi untuk dapat digunakan, seperti vue-i18n. Dengan Nuxt.js, Anda dapat menggunakan app yang tersedia ke dalam context saat mengekspor sebuah metode

7.4 Hanya pada sisi-klien (client-side only)

Beberapa plugin mungkin hanya berfungsi untuk browser, Anda dapat menggunakan opsi ssr: false di plugins untuk menjalankan file hanya pada sisi-klien.

Jika Anda memerlukan beberapa pustaka (library) hanya untuk server, Anda dapat menggunakan variabel process.server set ke true ketika webpack membuat file server.bundle.js.

Juga, jika Anda perlu tahu apakah Anda berada di dalam aplikasi yang dihasilkan (melalui nuxt generate), Anda dapat memeriksa process.static, set ke true selama generasi dan sesudahnya. Untuk mengetahui keadaan ketika sebuah halaman sedang di-render pada sisi-server oleh nuxt generate sebelum disimpan, Anda dapat menggunakan process.static && process.server.

8 MODULES

Berikut adalah modules dari nuxt:

• @nuxt/http: Light and universal way to make HTTP requests, based on ky-universal
• @nuxtjs/axios: Secure and Easy Axios integration with Nuxt.js to make HTTP requests
• @nuxtjs/pwa: Supercharge Nuxt with a heavily tested, updated and stable PWA solution
• @nuxtjs/auth: Authentication module for Nuxt.js, offering different schemes and strategies

8.1 Membuat Modul Basic

9 DEPLOYMENT

Nuxt.js hadir dengan seperangkat perintah yang berguna, baik untuk tujuan pengembangan maupun produksi.

9.1 Daftar Perintah

9.2 Lingkungan Pengembangan (Development Environment)

9.3 Penyebaran (Deployment) Produksi

Nuxt.js memungkinkan Anda memilih antara tiga mode untuk menerapkan aplikasi Anda: Server Rendered, SPA atau Static Generated.

Penyebaran “Server Rendered” (Universal)

Alih-alih menjalankan nuxt untuk menyebarkan (deploy), Anda mungkin ingin membangun (build) terlebih dahulu.

Catatan: kami merekomendasikan menempatkan .nuxt di .npmignore atau .gitignore.

Penyebaran “Static Generated” (Pra Rendered)

Nuxt.js memberi Anda kemampuan untuk meng-host aplikasi web Anda pada hosting statis manapun.

Ia akan membuat folder dist dengan segala sesuatu di dalamnya siap untuk digunakan pada situs hosting statis. Jika Anda memiliki proyek dengan rute dinamis, lihat konfigurasi generate untuk memberi tahu Nuxt.js cara menghasilkan rute dinamis ini. Saat membuat aplikasi web Anda dengan nuxt generate, konteks yang diberikan ke data() dan fetch() tidak akan memiliki req dan res.

Penyebaran Aplikasi Halaman Tunggal (SPA)

Nuxt generate masih membutuhkan mesin SSR selama membangun (build) atau menghasilkan (generate), sembari kita mendapatkan pra-render semua halaman kita, dan mendapat SEO yang tinggi dan skor pemuatan halaman (page load score). Konten dihasilkan pada waktu pembuatan. Misalnya, kita tidak dapat menggunakannya untuk aplikasi yang kontennya bergantung pada autentikasi pengguna atau API waktu-nyata (setidaknya untuk muatan pertama).

Ide SPA itu sederhana! Saat mode SPA diaktifkan menggunakan mode: ‘spa’ atau flag –spa, dan kita jalankan build, generation otomatis dimulai setelah build. Generasi ini berisi meta yang umum dan tautan sumber daya (resource), namun bukan konten halaman.

Jadi, untuk penyebaran SPA, Anda harus melakukan hal berikut:

• Ubah mode di nuxt.config.js ke spa.
• Jalankan npm run build.
• Sebarkan (deploy) folder dist/ yang dibuat ke hosting statis Anda seperti Surge, GitHub Pages atau nginx.

Metode penyebaran lain adalah menggunakan Nuxt sebagai middleware dalam kerangka kerja (framework) sewaktu dalam mode spa . Ini membantu mengurangi beban server dan menggunakan Nuxt dalam proyek di mana SSR tidak memungkinkan.