Menengok Nuxt 3 dan Menginstall-nya

Published in

JDS Engineering

3 min readJan 12, 2023

Nuxt 3 akhirnya rilis di tanggal 16 November 2022. Rilisnya Nuxt 3 tentunya sangat ditunggu, apalagi setelah rilisnya Vue 3. Perubahan besar yang dibawa tentunya menjadi hal yang sangat dinantikan.

Dan ternyata benar, ada banyak perubahan di nuxt 3. Berikut ini beberapa hal yang baru di Nuxt 3:

General optimization (20% lebih ringan dibanding Nuxt 2)
Vue 3 & TypeScript
webpack 5 dan vite,
esbuild memungkinkan kita menulis javascript latest syntax tapi tetap support older browsers
Nuxi untuk Command line interface
Nitro sebagai server engine
Nuxt kit sebagai development kit
Nuxt Bridges untuk memudahkan migrasi dari Nuxt 2 ke Nuxt 3

Itu hanya sedikit dari beberapa hal yang baru dari Nuxt 3, untuk selengkapnya bisa kunjungi dokumentasi resminya di sini.

Sangat menarik tentunya untuk kita mencoba Nuxt 3 dengan banyaknya perubahan yang ada. Langsung aja kita coba instal Nuxt 3.

Instalasi

Untuk mencoba Nuxt 3 ada beberapa cara yang bisa kita lakukan. Tidak harus kita install di komputer kita sendiri hanya untuk sekadar mencoba-coba fitur terbaru dari Nuxt 3.

Pilihan pertama kita bisa Play Online menggunakan StackBlitz atau CodeSanbox.

Kedua kita bisa juga memulai dengan starter dan tema — boilerplate — yang sudah disediakan di nuxt.new. Di sini ada beberapa starter yang bisa kita pilih tergantung dari website yang ingin kita bangun.

Ketiga kita bisa menginstall nuxt di komputer kita. Sebelum mulai ada beberapa prasyarat dan rekomendasi untuk menggunakan Nuxt 3.

Node.js* (latest LTS version)
Visual Studio Code
Volar Extention

* Jika node.js sudah terinstall, pastikan versi node.js di atas 16.11.

New Project

Buka terminal — jika menggunakan Visual Studio Code, bisa buka terminal dari Visual Studio Code langsung — Kemudian ikuti command berikut untuk memulai project baru:

npx nuxi init <project-name>

Ada yang baru di sini. Apa itu nuxi? Ini adalah Nuxt CLI yang akan membantu kita mempermudah install dan manage semua kebutuhan dalam membangun project di Nuxt 3. Baca lebih lanjut tentang nuxi di sini.

Kita akan mendapatkan output seperti ini.

✨ Nuxt project is created with v3 template. Next steps:              
 › cd nuxt3-app                                                       
 › Install dependencies with npm install or yarn install or pnpm install
 › Start development server with npm run dev or yarn dev or pnpm run dev

Selanjutnya ikuti perintah dari output di atas. Kita masuk ke directori project kita — nuxt3-app —Kemudian install dependencies:

npm install

Tunggu sampai proses instalasi selesai. Setelah selesai kita bisa langsung running project nuxt kita:

npm run dev

Dan kita akan mendapatkan output seperti ini:

Nuxi 3.0.0
Nuxt 3.0.0 with Nitro 1.0.0

  > Local:    http://localhost:3000/
  > Network:  http://192.168.43.123:3000/

ℹ Vite client warmed up in 641ms
✔ Nitro built in 184 ms

Ini artinya kita bisa langsung cek hasilnya di http://localhost:3000/ atau http://192.168.43.123:3000/ sesuai output yang dihasilkan.

Ketika pertama kali mencoba install Nuxt 3, saya cukup kaget karena prosesnya cepat dan minim configurasi di awal proses install. Begitupun ketika melihat struktur folder Nuxt 3, sangat minimalis sekali. Sangat jauh dari nuxt sebelumnya yang kita kenal — banyak konfigurasi diawal dan struktur folder yang komplek — sehingga sangat terasa sekali perubahannya.

Bandingkan saja dengan nuxt versi sebelumnya, dimana kita harus setup konfigurasi di awal install sebanyak ini:

✨  Generating Nuxt.js project in nuxt2-app
? Project name: nuxt2-app
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Tailwind CSS
? Template engine: HTML
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint, Prettier
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: Semantic Pull Requests
? Continuous integration: GitHub Actions (GitHub only)
? What is your GitHub username? maruf12
? Version control system: Git

Perubahan di Nuxt 3 pada proses instalasi ini tentu sangat bagus — setidaknya menurut saya — karena kita jadi leluasa untuk membuat aplikasi dari yang sangat sederhana sampai yang kompleks. Kesederhanaan ini berdampak positif pada proses instalasi yang sangat cepat, sehingga kita bisa langsung fokus membangun aplikasi tanpa dibebani dengan setup konfigurasi yang kompleks di awal.

Kita biarkan proses instalasi ini tetap sederhana. Begitupun juga dengan tulisan ini. Kita bahas selanjutnya di tulisan yang lain.

References:

Menengok Nuxt 3 dan Menginstall-nya

Instalasi

New Project

Written by Ma'ruf Harsono