Cara Menggunakan Vue.js Tanpa NPM di Proyek Legacy

Cara Menggunakan Vue.js Tanpa NPM di Proyek Legacy

11/26/2025 • Vue.js • By Tech Writers
Vue.jsCDNLegacy WebsiteFrontend DevelopmentJavaScriptjQuery MigrationWeb Development

Tahukah Kamu bahwa Vue.js bisa digunakan langsung di halaman web tanpa proses build dan npm? Ya, Vue.js dapat diintegrasikan seperti jQuery yang selama ini Kamu gunakan!

Mengapa Menggunakan Vue.js dari CDN?

Jika Kamu memiliki website legacy yang masih menggunakan jQuery dan ingin menambah fitur modern tanpa harus mengubah seluruh kode sumber, Kamu bisa mencoba cara mudah berikut untuk mengintegrasikan Vue.js melalui CDN.

Keuntungan Menggunakan Vue.js via CDN

  • ✅ Tidak perlu setup build tools (webpack, vite, dll)
  • ✅ Tidak perlu install npm packages
  • ✅ Mudah diintegrasikan ke website lama
  • ✅ Tetap mendapat developer experience modern
  • ✅ Tidak perlu rewrite seluruh kode aplikasi

Tutorial: Menambahkan Vue.js ke Website Legacy

Berikut adalah langkah-langkah lengkap untuk mengintegrasikan Vue.js ke halaman web Kamu:

1. Tambahkan CDN Vue.js ke Tag <head> HTML

Pertama, tambahkan link CDN Vue.js ke bagian <head> pada file HTML Kamu:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js CDN Example</title>
    
    <!-- Tambahkan Vue.js dari CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <!-- Konten HTML Kamu -->
</body>
</html>

Pilihan CDN Vue.js:

  • Vue 3: https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js
  • Vue 2: https://cdn.jsdelivr.net/npm/vue@2
  • Unpkg: https://unpkg.com/vue@3/dist/vue.global.js

2. Tentukan Elemen Root untuk Vue.js

Pilih elemen pada halaman (misalnya <div id="app">) yang akan menjadi root aplikasi Vue. Ini adalah area di mana Vue.js akan mengelola konten dan interaktivitas:

<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <button @click="updateMessage">Klik Saya!</button>
    </div>
</body>

3. Tulis Script Vue.js

Tambahkan kode JavaScript Vue.js sebelum tag penutup </body>:

Untuk Vue 3:

<script>
    const { createApp } = Vue;
    
    createApp({
        data() {
            return {
                message: 'Halo dari Vue.js 3!'
            }
        },
        methods: {
            updateMessage() {
                this.message = 'Pesan telah diubah!';
            }
        }
    }).mount('#app');
</script>

Untuk Vue 2:

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Halo dari Vue.js 2!'
        },
        methods: {
            updateMessage() {
                this.message = 'Pesan telah diubah!';
            }
        }
    });
</script>

Contoh Lengkap: To-Do List Sederhana

Berikut contoh lengkap implementasi To-Do List menggunakan Vue.js dari CDN:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js To-Do List</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
        }
        .todo-item {
            padding: 10px;
            margin: 5px 0;
            background: #f4f4f4;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .completed {
            text-decoration: line-through;
            opacity: 0.6;
        }
        button {
            padding: 5px 10px;
            cursor: pointer;
        }
        input[type="text"] {
            padding: 8px;
            width: 80%;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>
        
        <div>
            <input 
                v-model="newTodo" 
                @keyup.enter="addTodo"
                type="text" 
                placeholder="Tambahkan tugas baru...">
            <button @click="addTodo">Tambah</button>
        </div>
        
        <div v-if="todos.length === 0" style="margin-top: 20px;">
            <p>Tidak ada tugas. Tambahkan tugas pertama Kamu!</p>
        </div>
        
        <div v-else>
            <div 
                v-for="(todo, index) in todos" 
                :key="index"
                class="todo-item"
                :class="{ completed: todo.done }">
                <span @click="toggleTodo(index)">
                    {{ todo.text }}
                </span>
                <button @click="removeTodo(index)">Hapus</button>
            </div>
        </div>
        
        <p style="margin-top: 20px;">
            Total: {{ todos.length }} tugas | 
            Selesai: {{ completedCount }} | 
            Belum: {{ remainingCount }}
        </p>
    </div>

    <script>
        const { createApp } = Vue;
        
        createApp({
            data() {
                return {
                    title: 'Daftar Tugas Saya',
                    newTodo: '',
                    todos: []
                }
            },
            computed: {
                completedCount() {
                    return this.todos.filter(todo => todo.done).length;
                },
                remainingCount() {
                    return this.todos.filter(todo => !todo.done).length;
                }
            },
            methods: {
                addTodo() {
                    if (this.newTodo.trim()) {
                        this.todos.push({
                            text: this.newTodo,
                            done: false
                        });
                        this.newTodo = '';
                    }
                },
                removeTodo(index) {
                    this.todos.splice(index, 1);
                },
                toggleTodo(index) {
                    this.todos[index].done = !this.todos[index].done;
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

Integrasi dengan jQuery yang Sudah Ada

Kamu bisa menggunakan Vue.js dan jQuery bersamaan dalam satu halaman:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Vue.js + jQuery</title>
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <!-- Area jQuery -->
    <div id="jquery-section">
        <h2>Bagian jQuery</h2>
        <button id="jquery-btn">Klik dengan jQuery</button>
        <p id="jquery-output"></p>
    </div>
    
    <!-- Area Vue.js -->
    <div id="app">
        <h2>Bagian Vue.js</h2>
        <button @click="count++">Klik dengan Vue: {{ count }}</button>
    </div>

    <script>
        // jQuery code
        $('#jquery-btn').click(function() {
            $('#jquery-output').text('jQuery berfungsi!');
        });
        
        // Vue.js code
        const { createApp } = Vue;
        createApp({
            data() {
                return {
                    count: 0
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

Kapan Sebaiknya Menggunakan Vue.js via CDN?

✅ Gunakan CDN Jika:

  1. Website legacy yang sulit diubah total
  2. Proyek kecil atau prototipe cepat
  3. Tidak butuh build tools dan toolchain modern
  4. Ingin menambah fitur interaktif tanpa migrasi besar
  5. Pembelajaran dan eksperimen Vue.js

❌ Jangan Gunakan CDN Jika:

  1. Proyek baru yang dibangun dari awal
  2. Aplikasi besar dengan banyak komponen
  3. Butuh optimasi performa maksimal
  4. Perlu Single File Components (.vue files)
  5. Memerlukan TypeScript dan modern tooling

Best Practices Vue.js CDN

1. Gunakan Versi Produksi

Untuk production, gunakan versi minified:

<!-- Development (dengan warning) -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>

<!-- Production (optimized) -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>

2. Tentukan Versi Spesifik

Jangan gunakan @latest, tetapi tentukan versi spesifik:

<!-- ❌ Tidak disarankan -->
<script src="https://cdn.jsdelivr.net/npm/vue@latest"></script>

<!-- ✅ Disarankan -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.prod.js"></script>

3. Gunakan SRI (Subresource Integrity)

Untuk keamanan, tambahkan integrity hash:

<script 
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.prod.js"
    integrity="sha384-..."
    crossorigin="anonymous">
</script>

4. Pertimbangkan Caching

Gunakan CDN yang populer agar browser bisa memanfaatkan cache:

  • jsDelivr: https://cdn.jsdelivr.net/npm/vue@3
  • unpkg: https://unpkg.com/vue@3
  • cdnjs: https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.15/vue.global.prod.min.js

Migrasi dari jQuery ke Vue.js

Jika Kamu ingin mulai migrasi dari jQuery ke Vue.js secara bertahap:

jQuery Code:

// jQuery
$('#button').click(function() {
    $('#output').text('Hello World');
    $('#output').addClass('active');
});

Vue.js Equivalent:

<div id="app">
    <button @click="updateText">Klik</button>
    <p :class="{ active: isActive }">{{ message }}</p>
</div>

<script>
const { createApp } = Vue;
createApp({
    data() {
        return {
            message: '',
            isActive: false
        }
    },
    methods: {
        updateText() {
            this.message = 'Hello World';
            this.isActive = true;
        }
    }
}).mount('#app');
</script>

Limitasi Vue.js via CDN

Perlu diingat beberapa limitasi saat menggunakan Vue.js dari CDN:

  1. Tidak ada Single File Components (.vue files)
  2. Tidak ada Hot Module Replacement (HMR)
  3. Tidak ada code splitting otomatis
  4. Tidak ada TypeScript support bawaan
  5. Tidak ada tree-shaking untuk optimasi bundle
  6. Tidak ada preprocessor (Sass, Less, etc)

Alternatif: Petite-Vue untuk Kasus Lebih Sederhana

Jika Kamu hanya butuh fitur dasar Vue.js, pertimbangkan menggunakan petite-vue (hanya 6KB):

<script src="https://unpkg.com/petite-vue" defer init></script>

<div v-scope="{ count: 0 }">
    <button @click="count++">{{ count }}</button>
</div>

Petite-vue cocok untuk progressive enhancement dan interaksi sederhana.

Kesimpulan

Vue.js dapat diintegrasikan ke website legacy dengan mudah menggunakan CDN, tanpa perlu proses build atau npm. Cara ini sangat cocok untuk:

  • ✅ Menambah fitur interaktif pada halaman lama
  • ✅ Meningkatkan developer experience tanpa migrasi besar
  • ✅ Pembelajaran dan prototyping cepat
  • ✅ Transisi bertahap dari jQuery ke framework modern

Namun, untuk proyek baru dan aplikasi besar, tetap disarankan menggunakan Vue.js versi npm dengan build tools agar mendapatkan manfaat maksimal dari ekosistem Vue.js.

Resources

Artikel Terkait:

Terakhir diperbarui: January 25, 2026