Belajar NuxtJS

NuxtJS adalah framework open source, untuk membuat aplikasi VueJS yang bisa dirender dari server atau menjadi web statis.

gambar Belajar Vue JS
Aplikasi VueJS yang kamu buat semakin lama semakin kompleks? atau kamu memang berniat membuat aplikasi yang full menggunakan sistem Single Page Application (atau hanya menggunakan satu halaman) tapi takut kehilangan SEO? NuxtJS jawabannya.

NuxtJS bisa kamu gunakan untuk SSR alias Server Side Rendered website. Di mana konten kamu diambil dari suatu app atau API yang ramah untuk SEO. Atau kamu juga bisa membuat website statis atau SSG(Static site generator) dengan nuxt ini.

Jadi, dengan NuxtJS kamu bisa melakukan kata kata sihir ini:
SPA, SSR dan SSG.

Untuk mengerti NuxtJS, tentunya kamu perlu belajar dasar Vue.JS sendiri


cover playlist Belajar Vue JS

Daftar Pelajaran Track Belajar Vue JS


Belajar vuejs 101

Salah satu library javascript yang populer, yaitu vuejs, kita akan belajar dasar-dasar dari vuejs, syntax dan bagaimana cara menggunakannya. Tutorial Vue js bahasa indonesia


Daftar isi Belajar vuejs 101


Perkenalan vuejs 101

Perkenalan kelas belajar vuejs, library javascript yang tidak kalah populer Link: Vue.JS


Vue instance dan property

Mulai belajar Vue js dengan membuat instance Vue dan mendeklarasikan propery-propertynya


Data binding vue

Mengenal konsep data binding, untuk menggabungkan property yang ada pada DOM agar mudah memanipulasinya secara langsung


Computed properties

Membuat satu propery selalu tergantung dengan property lainnya dengan computed properties dari vue


Conditional directives

Mengenal apa itu directive pada vuejs dan juga melihat contoh penggunaan conditional directive pada template html


Loop list directive

Mengenal apa itu loop/list directive pada vuejs dan juga melihat contoh penggunaan list directive pada vue js


Loop list methode

Metode metode pada javascript bisa kita gunakan seperti biasa pada list directive vue js


Menggunakan filter

Di vue.js 2 fungsi filter sudah berbeda dari video ini Cek filter di Vue v2 Belajar menggunakan filter pada vue js, baik pada single property atau property yang kita loop dengan orderBy atau filterBy


Methods vuejs

Belajar menggunakan methods pada vue js, dan juga menggabungkannya dengan event melalui v-on directive


V bind directive

Belajar lebih banyak tentang penggunaan v-on dan juga v-bind sebagai property pada vuejs


Input binding

Membuat input dari user bersatu dengan konsep data-binding. Sehingga apapun yang dimasukkan oleh user, kita langsung bisa melihat hasilnya


Componenets vuejs

Salah satu feature dari vue js yaitu component, membuat sistem template untuk bagian-bagian html yang ingin kita tampilkan berkali-kali


Componenets vuejs part 2

Salah satu feature dari vue js yaitu component bagian 2, membuat sistem template untuk bagian-bagian html yang ingin kita tampilkan berkali-kali


Dynamic component

Masih tentang component, kali ini kita akan berkenalan dengan konsep dynamic component pada Vuejs, yang bisa kita manfaatkan sebagai sistem routing sederhana untuk membuat SPA (Single Page Application)


Transition VueJS

Melakukan transisi (transition) css dengan mudah melalui attribut di vuejs



Komentar dan Vote Vuejs

Latihan vuejs, setelah belajar dasar-dasar dari Vue, kita akan belajar membuat sistem komentar dan vote pada sisi client


Daftar isi Komentar dan Vote Vuejs


Intro komentar dan vote Vue

Perkenalan kelas membuat komentar dan vote pada vuejs, untuk latihan setelah belajar dasar-dasar dari vuejs


Komentar dan vote

Mulai membuat siste komentar dan vote pada vuejs. Kita akan menggunakan semua yang telah kita pelajari pada dasar-dasar vuejs disini


Komentar baru

Menambahkan komentar baru beserta votenya pada sistem yang sudah ada dengan menggunakan v-model, v-on dan menggabungkannya dengan methods dari vue js



Vue JS todolist dan API

Belajar membuat todolist pada vuejs dan juga menyimpan data dengan dua cara. Yang pertama pada localstorage yang kedua pada database dengan membuat API sederhana pada PHP dan mengakses dengan AJAX


Daftar isi Vue JS todolist dan API


Membuat todolist vuejs

Belajar bagaimana cara membuat todolist pada vuejs, dengan memanfaatkan apa saja yang sudah kita pelajar pada dasar vue js


Todolist localstorage

Belajar menggunakan localstorage pada html dan javascript untuk menyimpan data sementara pada sisi browser untuk data todolist yang dibuat


Membuat API dan mengeluarkan data

Belajar membuat API sederhana dengan PHP, kita juga akan menggunakan vue js resource untuk melakukan AJAX ke API yang dibuat


Post data ke database

Menyimpan data ke database dengan metode post yang sudah disediakan oleh vuejs resource


Update done status

Merubah data yang sudah ada pada database dengan metode patch untuk mengubah status dari todolist yang sudah dibuat


Perubahan pada versi 0.9

Melihat kesalahan yang kita lakukan di video sebelumnya kenapa fungsi post tidak bekerja pada versi 0.9 dari vuejs



Membuat sistem tag dengan Vuejs

Bagaimana cara membuat sistem tag pada sisi frontend dengan vuejs? memberikan saran berdasarkan apa yang user ketik, kita akan belajar banyak event, bisa memilih dan juga menghapus item dengan mouse ataupun keyboard


Daftar isi Membuat sistem tag dengan Vuejs


Intro vuejs tag sistem

Intro untuk kelas membuat sistem tag dengan vue js, dengan ini kita bisa membuat sistem tag yang bisa diimplementasikan seperti pada forum, blog, dan lain-lain


Todolist dan kerangka html css

Mulai dengan membuat html dan css sebagai kerangka aplikasi yang dibuat. Selain itu kita belajar memecahkan tugas besar menjadi tugas-tugas kecil yang bisa dikerjakan satu per satu dalam bahasa manusia


Toggle data ketika user mengetik

Ketika user mulai mengetik sesuatu pada input, kita akan memunculkan daftar tag yang tersedia, dan akan disembunyikan ketika tidak ada input


Memilih dengan panah bawah

Memilih tag mana yang akan digunakan dengan menggunakan event keyboard pada saat panah ke bawah ditekan


Memilih dengan panah atas

Memilih tag mana yang akan digunakan dengan menggunakan event keyboard pada saat panah ke atas ditekan


Tag berdasarkan input user

karena tidak perlu menampilkan semuanya sekaligus, maka kita akan memunculkan daftar tag berdasarkan apa yang user ketik pada input


Pilih salah satu tag dengan enter

Memilih salah satu tag dengan event keyboard enter, jadi selain sudah bisa terhighlight dengan tanda panah, kita juga sudah bisa memilih tagnya


Menghapus dengan tombol backspace/delete

Bagaimana jika user ingin menghapus tag yang sudah terpilih, kita mulai dengan menggunakan event keyboard backspace ataupun delete untuk menghapus entri terakhir


Menghapus dengan klik

Bagaimana jika user ingin menghapus tag yang sudah terpilih sebelumnya namun bukan entri terakhir, kita lihat cara menghapus berdasarkan yang diklik


Highlight dan milih dengan mouse

selain memilih dengan tanda panah keyboard, kita juga harus bisa memilih berdasarkan mouse, tergantung apa yang dihighlight dan apa yang diklik


Menghapus tag yang sudah digunakan

Jika satu tag sudah dipilih sebelumnya, maka tidak perlu lagi ditampilkan pada entri berikutnya, dengan ini kita mencegah ada tag yang sama pada satu entri



Membuat single page app dengan vuex

Belajar konsep vuex, konsep flux yang cukup populer dengan membuat single page application. Dengan konsep ini, data-data yang ada pada apliasi Vue menjadi lebih terorganisir


Daftar isi Membuat single page app dengan vuex


Install vue cli vuex dan struktur folder

Kita mulai dengan install vue cli dan juga vuex. Kita juga akan melihat struktur folder yang direkomendasikan untuk aplikasi yang menggunakan vuex


State dan getters

Kenalan dengan state dan juga getter sebagai tempat awal mengambil data pada aplikasi vuex


Membuat component member

membuat component yang akan dipakai di beberapa tempat pada aplikasi member menggunakan vuex


Singleview, action dan mutaiton

Mengenal dan melihat perbedaan antara action dan mutation pada vuex yang bertanggung jawab untuk melakukan manipulasi pada data awal. Kita juga akan membuat singleview pada aplikasi member ini.


Tampilkan semua member dan edit component

Bagaimana cara mengedit component secara langsung melalui aplikasi vuex yang kita buat?


Tambah member baru

Menambah member atau data baru, kita akan mempertajam bagaimana alur pada vuex, ketika kita ingin memanipulasi data yang ada pada state melalui action dan mutation


Menghapus berdasarkan id

Menghapus member atau data, kita akan mempertajam lagi bagaimana alur pada vuex, ketika kita ingin memanipulasi data yang ada pada state melalui action dan mutation


Menambah bumbu css

Bikin aplikasi member yang dibuat dengan vuex ini jadi jauh lebih cantik dengan CSS tentunya


UX yang lebih baik

Ada hal yang bisa kita tambahkan untuk memaksimalkan user experience alias cara user berinteraksi dengan aplikasi ini



NuxtJS membuat aplikasi vuejs universal

Mau pake aplikasi vuejs bukan hanya di frontend, tapi juga di sisi servernya. Lihat caranya disini membuat aplikasi Vuejs yang ramah dengan SEO


Daftar isi NuxtJS membuat aplikasi vuejs universal


Kenalan nuxtjs dan install

Kenalan dengan NuxtJS dan cara menginstall nuxtjs, membuat vuejs universal untuk aplikasi kita berikutnya


Tampilan dan halaman dasar nuxtjs

Kita intip dulu bagaimana halaman dasar dari NuxtJS, dimana starting pointnya, apa aja default yang tersedia buat kita


Load css custom dan framework

Cara load custom css dan framework css dari luar di aplikasi nuxtjs


Install plugin dan akses api dengan axios

Bagaimana cara menginstall plugin di nuxtjs. Kita akan melihat contohnya dengan menggunakan axios di nuxtjs


Merapikan tampilan dengan v for

Cara menampilkan data yang kita terima dari axios dengan v-for pada halaman vue js file


Memindahkan data di vuex store

Memindahkan data yang awalnya di vue file jadi store (Vuex store) pada nuxt.js untuk mengatur state datanya


Membuat component di nuxt

Cara membuat component di nuxtjs, sama seperti membuat component pada vue


Navigasi dengan nuxt link

Navigasi menu yang muncul pada semua halaman di vue nuxt.js


Property di component dan transisi halaman

Mengoper Property di component vuejs agar dinamis dan membuat transisi pada halaman lebih cantik di nuxtjs


Halaman dinamis di nuxt

Bagaimana dengan membuat halaman dinamis pada nuxt.js seperti berdasarkan id user atau slug pada nama blog misalnya


Meta tag dan title dinamis

Salah satu masalah yang sebelumnya kita temukan pada Vue js adalaha SEO, atau bagaimana nanti dia di search engine, seperti title atau meta data linenya agar menjadi dinamis sesuai halamannya



CRUD API di Nuxtjs

menggunakan nuxtjs untuk berinteraksi dengan API, kita akan melihat bagaimana sistem crud (create, read, update, delete) dengan API local yang kita buat melalui nuxt.js


Daftar isi CRUD API di Nuxtjs


Tutorial nuxt js crud api

Trailer menggunakan nuxt js untuk mengakses API dengan axios


bikin api dengan json server

Kita akan membuat API local menggunakan json-server, kamu bisa melihatnya disini Link: Jsonplaceholder


Install axios dan bulma

Bagaimana menginstall plugin seperti axios atau css framework dan menggunakannya di proyek nuxt.js


Memindahkan data di vuex store

Memindahkan data dari .vue file ke vuex store


Submit data ke api

Bagaimana cara menambahkan data ke API menggunakan nuxtjs


Penulisan lain map action di vuex

Selain menggunakan mapaction dan spread syntax, ada penulisan lain untuk mengakses action dan state di vuex store kita dari .vue file


Merapikan tampilan

Kita rapikan dulu tampilan dari proyek ini!


Menghapus data

Menghapus dari dengan API di nuxt.js


Edit dan update data

Mengupdate data dari API di nuxt.js


Sistem search

Membuat sistem search dengan computed property di vuejs




Daftar Materi NuxtJS membuat aplikasi vuejs universal

Mau pake aplikasi vuejs bukan hanya di frontend, tapi juga di sisi servernya. Lihat caranya disini membuat aplikasi Vuejs yang ramah dengan SEO


kenalan nuxtjs dan install

Kenalan dengan NuxtJS dan cara menginstall nuxtjs, membuat vuejs universal untuk aplikasi kita berikutnya


tampilan dan halaman dasar nuxtjs

Kita intip dulu bagaimana halaman dasar dari NuxtJS, dimana starting pointnya, apa aja default yang tersedia buat kita


load css custom dan framework

Cara load custom css dan framework css dari luar di aplikasi nuxtjs


install plugin dan akses api dengan axios

Bagaimana cara menginstall plugin di nuxtjs. Kita akan melihat contohnya dengan menggunakan axios di nuxtjs


merapikan tampilan dengan v for

Cara menampilkan data yang kita terima dari axios dengan v-for pada halaman vue js file


memindahkan data di vuex store

Memindahkan data yang awalnya di vue file jadi store (Vuex store) pada nuxt.js untuk mengatur state datanya


membuat component di nuxt

Cara membuat component di nuxtjs, sama seperti membuat component pada vue


navigasi dengan nuxt link

Navigasi menu yang muncul pada semua halaman di vue nuxt.js


property di component dan transisi halaman

Mengoper Property di component vuejs agar dinamis dan membuat transisi pada halaman lebih cantik di nuxtjs


halaman dinamis di nuxt

Bagaimana dengan membuat halaman dinamis pada nuxt.js seperti berdasarkan id user atau slug pada nama blog misalnya


meta tag dan title dinamis

Salah satu masalah yang sebelumnya kita temukan pada Vue js adalaha SEO, atau bagaimana nanti dia di search engine, seperti title atau meta data linenya agar menjadi dinamis sesuai halamannya


Tag: Kenapa belajar NuxtJS, Mengenal apa itu NuxtJS, Di mana mulai belajar NuxtJS, mulai dari mana belajar NuxtJS , tutorial NuxtJS bahasa indonesia untuk pemula dari dasar, apa kegunaan NuxtJS, bagaimana cara menggunakan NuxtJS, belajar bertahap NuxtJS, kursus online NuxtJS