\n\u003Cp>Halo, {{ nama }}\u003C/p>\n",[43,506,507,526],{"__ignoreMap":82},[200,508,509,511,514,517,520,523],{"class":202,"line":203},[200,510,393],{"class":392},[200,512,513],{"class":396},"input",[200,515,516],{"class":206}," v-model",[200,518,519],{"class":392},"=",[200,521,522],{"class":210},"\"nama\"",[200,524,525],{"class":392}," />\n",[200,527,528,530,532,534,536],{"class":202,"line":224},[200,529,393],{"class":392},[200,531,12],{"class":396},[200,533,399],{"class":392},[200,535,12],{"class":396},[200,537,404],{"class":392},[48,539,540,546],{},[51,541,542,543,545],{},"Ketika user mengetik di input, ",[43,544,419],{}," berubah.",[51,547,548,549,551],{},"Karena ",[43,550,419],{}," berubah, teks di paragraf juga ikut update otomatis.",[36,553],{},[23,555,557],{"id":556},"data-binding-di-framework-populer","Data Binding di Framework Populer",[12,559,560],{},"Berikut beberapa contoh data binding di framework terkenal:",[562,563,564,580],"table",{},[565,566,567],"thead",{},[568,569,570,574,577],"tr",{},[571,572,573],"th",{},"Framework",[571,575,576],{},"One-way",[571,578,579],{},"Two-way",[581,582,583,604,621],"tbody",{},[568,584,585,591,597],{},[586,587,588],"td",{},[66,589,590],{},"React",[586,592,593,594],{},"✅ ",[43,595,596],{},"{nama}",[586,598,599,600,603],{},"❌ (manual pakai ",[43,601,602],{},"useState",")",[568,605,606,611,616],{},[586,607,608],{},[66,609,610],{},"Vue",[586,612,593,613],{},[43,614,615],{},"{{ nama }}",[586,617,593,618],{},[43,619,620],{},"v-model",[568,622,623,628,632],{},[586,624,625],{},[66,626,627],{},"Angular",[586,629,593,630],{},[43,631,615],{},[586,633,593,634],{},[43,635,636],{},"[(ngModel)]",[36,638],{},[23,640,641],{"id":278},"Kesimpulan",[643,644,645],"blockquote",{},[12,646,647],{},[66,648,649],{},"Data binding = menghubungkan data dan tampilan, supaya sinkron otomatis.",[12,651,652,653,656,657,660,661,135],{},"Dengan memahami data binding, kamu bisa membangun UI yang ",[66,654,655],{},"interaktif",", ",[66,658,659],{},"dinamis",", dan ",[66,662,663],{},"lebih efisien",[12,665,666],{},"Semakin dalam kamu belajar, semakin kamu akan sadar bahwa data binding adalah fondasi dari banyak fitur keren di frontend!",[284,668,669],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":82,"searchDepth":224,"depth":224,"links":671},[672,673,674,678,679],{"id":344,"depth":224,"text":345},{"id":362,"depth":224,"text":363},{"id":441,"depth":224,"text":442,"children":675},[676,677],{"id":449,"depth":250,"text":450},{"id":490,"depth":250,"text":491},{"id":556,"depth":224,"text":557},{"id":278,"depth":224,"text":641},"Data binding adalah cara menghubungkan data dengan tampilan (UI) di frontend. Dalam artikel ini, kita akan membahas konsep ini dengan bahasa yang sederhana dan mudah dipahami.",{"date":682,"keywords":683,"tags":684},"2025-07-10","Data Binding, Frontend, Vue, React, Angular, One-way Binding, Two-way Binding",[685,686,610,590,627],"Data Binding","Frontend","/blog/memahami-konsep-data-binding-dengan-cara-yang-simpel",{"title":317,"description":680},"blog/memahami-konsep-data-binding-dengan-cara-yang-simpel","kuJFayFLJ-bFlqtEurEjBnTwZWHHEInD6eOBbjKcEYc",{"id":692,"title":693,"body":694,"description":2419,"extension":299,"meta":2420,"navigation":310,"ogImage":700,"path":2427,"seo":2428,"stem":2429,"__hash__":2430},"blog/blog/mengenal-motion-vue-animasi-modern-dan-ringan-untuk-vuejs.md","Mengenal Motion Vue: Animasi Modern & Ringan untuk Vue.js",{"type":9,"value":695,"toc":2394},[696,704,707,714,720,727,729,733,744,747,751,764,768,771,775,791,795,798,800,804,816,1038,1044,1046,1053,1316,1321,1323,1330,1765,1770,1772,1779,1982,1987,1989,2001,2109,2114,2116,2123,2319,2324,2326,2330,2333,2365,2368,2370,2373,2377,2391],[12,697,698],{},[15,699],{"src":700,"alt":701,"className":702,"style":703},"https://images.unsplash.com/photo-1534078362425-387ae9668c17?q=80&w=3538&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D","Motion Vue",[20],"view-transition-name: blog-post-image-mengenal-motion-vue-animasi-modern-dan-ringan-untuk-vuejs;",[328,705,693],{"id":706},"mengenal-motion-vue-animasi-modern-ringan-untuk-vuejs",[12,708,709,710,713],{},"Ingin bikin UI Vue-mu jadi lebih hidup dan interaktif? Tapi males ribet pakai CSS ",[43,711,712],{},"@keyframes"," atau library berat seperti GSAP?",[12,715,716,717,719],{},"Kenalin: ",[66,718,701],{}," — cara baru dan menyenangkan untuk membangun antarmuka dengan animasi yang mulus, ringan, dan sepenuhnya terintegrasi dengan Vue 3.",[643,721,722],{},[12,723,724],{},[66,725,726],{},"\"Build beautiful motion-driven interfaces with Vue.js based on motion. Simple, powerful, and performant animations for modern web applications.\"",[36,728],{},[23,730,732],{"id":731},"kenapa-harus-pakai-motion-vue","Kenapa Harus Pakai Motion Vue?",[12,734,735,736,743],{},"Motion Vue dibangun di atas ",[737,738,742],"a",{"href":739,"rel":740},"https://motion.dev/",[741],"nofollow","Motion One",", animasi engine berbasis Web Animations API dari tim yang sama di balik Framer Motion.",[12,745,746],{},"Berikut alasan kenapa kamu mungkin langsung jatuh hati:",[447,748,750],{"id":749},"simpel-dan-deklaratif","✅ Simpel dan Deklaratif",[12,752,753,754,757,758,60,761,135],{},"Tidak perlu mikirin event lifecycle atau ",[43,755,756],{},"watch"," — cukup ",[43,759,760],{},":animate",[43,762,763],{},":transition",[447,765,767],{"id":766},"super-ringan","⚡ Super Ringan",[12,769,770],{},"Dibanding library lain, Motion Vue minim dependensi dan sangat cepat. Cocok untuk app skala kecil sampai besar.",[447,772,774],{"id":773},"terintegrasi-reaktif","🧠 Terintegrasi Reaktif",[12,776,777,778,656,781,656,784,660,787,790],{},"Props seperti ",[43,779,780],{},"initial",[43,782,783],{},"hover",[43,785,786],{},"press",[43,788,789],{},"in-view"," semuanya reactive. Cocok banget buat Vue dev.",[447,792,794],{"id":793},"kombinasi-sempurna-dengan-tailwind","🎨 Kombinasi Sempurna dengan Tailwind",[12,796,797],{},"Layout pakai Tailwind, animasi pakai Motion Vue — hasilnya? UI bersih dan ciamik!",[36,799],{},[23,801,803],{"id":802},"contoh-contoh-penggunaan-motion-vue","💡 Contoh-Contoh Penggunaan Motion Vue",[447,805,807,808],{"id":806},"_1-animasi-dasar-dengan-initial-dan-animate","1. ",[66,809,810,811,60,813],{},"Animasi Dasar dengan ",[43,812,780],{},[43,814,815],{},"animate",[74,817,821],{"className":818,"code":819,"language":820,"meta":82,"style":82},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\nimport { Motion } from 'motion-v'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CMotion\n class=\"bg-primary w-1/3 aspect-square rounded-2xl\"\n :initial=\"{ scale: 0 }\"\n :animate=\"{ rotate: 180, scale: 1 }\"\n :transition=\"{\n type: 'spring',\n stiffness: 260,\n damping: 20,\n delay: 0.3,\n }\"\n />\n\u003C/template>\n","vue",[43,822,823,843,858,867,873,883,892,903,928,955,970,982,993,1004,1015,1023,1029],{"__ignoreMap":82},[200,824,825,827,830,833,836,838,841],{"class":202,"line":203},[200,826,393],{"class":392},[200,828,829],{"class":396},"script",[200,831,832],{"class":206}," setup",[200,834,835],{"class":206}," lang",[200,837,519],{"class":392},[200,839,840],{"class":210},"\"ts\"",[200,842,404],{"class":392},[200,844,845,849,852,855],{"class":202,"line":224},[200,846,848],{"class":847},"szBVR","import",[200,850,851],{"class":392}," { Motion } ",[200,853,854],{"class":847},"from",[200,856,857],{"class":210}," 'motion-v'\n",[200,859,860,863,865],{"class":202,"line":250},[200,861,862],{"class":392},"\u003C/",[200,864,829],{"class":396},[200,866,404],{"class":392},[200,868,870],{"class":202,"line":869},4,[200,871,872],{"emptyLinePlaceholder":310},"\n",[200,874,876,878,881],{"class":202,"line":875},5,[200,877,393],{"class":392},[200,879,880],{"class":396},"template",[200,882,404],{"class":392},[200,884,886,889],{"class":202,"line":885},6,[200,887,888],{"class":392}," \u003C",[200,890,891],{"class":396},"Motion\n",[200,893,895,898,900],{"class":202,"line":894},7,[200,896,897],{"class":206}," class",[200,899,519],{"class":392},[200,901,902],{"class":210},"\"bg-primary w-1/3 aspect-square rounded-2xl\"\n",[200,904,906,909,911,913,916,919,922,925],{"class":202,"line":905},8,[200,907,908],{"class":392}," :",[200,910,780],{"class":206},[200,912,519],{"class":392},[200,914,915],{"class":210},"\"",[200,917,918],{"class":392},"{ scale: ",[200,920,921],{"class":217},"0",[200,923,924],{"class":392}," }",[200,926,927],{"class":210},"\"\n",[200,929,931,933,935,937,939,942,945,948,951,953],{"class":202,"line":930},9,[200,932,908],{"class":392},[200,934,815],{"class":206},[200,936,519],{"class":392},[200,938,915],{"class":210},[200,940,941],{"class":392},"{ rotate: ",[200,943,944],{"class":217},"180",[200,946,947],{"class":392},", scale: ",[200,949,950],{"class":217},"1",[200,952,924],{"class":392},[200,954,927],{"class":210},[200,956,958,960,963,965,967],{"class":202,"line":957},10,[200,959,908],{"class":392},[200,961,962],{"class":206},"transition",[200,964,519],{"class":392},[200,966,915],{"class":210},[200,968,969],{"class":392},"{\n",[200,971,973,976,979],{"class":202,"line":972},11,[200,974,975],{"class":392}," type: ",[200,977,978],{"class":210},"'spring'",[200,980,981],{"class":392},",\n",[200,983,985,988,991],{"class":202,"line":984},12,[200,986,987],{"class":392}," stiffness: ",[200,989,990],{"class":217},"260",[200,992,981],{"class":392},[200,994,996,999,1002],{"class":202,"line":995},13,[200,997,998],{"class":392}," damping: ",[200,1000,1001],{"class":217},"20",[200,1003,981],{"class":392},[200,1005,1007,1010,1013],{"class":202,"line":1006},14,[200,1008,1009],{"class":392}," delay: ",[200,1011,1012],{"class":217},"0.3",[200,1014,981],{"class":392},[200,1016,1018,1021],{"class":202,"line":1017},15,[200,1019,1020],{"class":392}," }",[200,1022,927],{"class":210},[200,1024,1026],{"class":202,"line":1025},16,[200,1027,1028],{"class":392}," />\n",[200,1030,1032,1034,1036],{"class":202,"line":1031},17,[200,1033,862],{"class":392},[200,1035,880],{"class":396},[200,1037,404],{"class":392},[12,1039,1040,1041],{},"📌 ",[31,1042,1043],{},"Cocok untuk elemen yang ingin muncul dengan efek “zoom & rotate”.",[36,1045],{},[447,1047,1049,1050],{"id":1048},"_2-animasi-berurutan-timeline-style","2. ",[66,1051,1052],{},"Animasi Berurutan / Timeline-Style",[74,1054,1056],{"className":818,"code":1055,"language":820,"meta":82,"style":82},"\u003Cscript setup lang=\"ts\">\nimport { Motion } from 'motion-v'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CMotion\n class=\"bg-primary h-20 aspect-square rounded-2xl\"\n :animate=\"{\n scale: [1, 2, 2, 1, 1],\n rotate: [0, 0, 180, 180, 0],\n borderRadius: ['0%', '0%', '50%', '50%', '0%'],\n }\"\n :transition=\"{\n duration: 2,\n ease: 'easeInOut',\n times: [0, 0.2, 0.5, 0.8, 1],\n repeat: Infinity,\n repeatDelay: 1,\n }\"\n />\n\u003C/template>\n",[43,1057,1058,1074,1084,1092,1096,1104,1110,1119,1131,1158,1183,1210,1216,1228,1237,1247,1275,1285,1295,1302,1307],{"__ignoreMap":82},[200,1059,1060,1062,1064,1066,1068,1070,1072],{"class":202,"line":203},[200,1061,393],{"class":392},[200,1063,829],{"class":396},[200,1065,832],{"class":206},[200,1067,835],{"class":206},[200,1069,519],{"class":392},[200,1071,840],{"class":210},[200,1073,404],{"class":392},[200,1075,1076,1078,1080,1082],{"class":202,"line":224},[200,1077,848],{"class":847},[200,1079,851],{"class":392},[200,1081,854],{"class":847},[200,1083,857],{"class":210},[200,1085,1086,1088,1090],{"class":202,"line":250},[200,1087,862],{"class":392},[200,1089,829],{"class":396},[200,1091,404],{"class":392},[200,1093,1094],{"class":202,"line":869},[200,1095,872],{"emptyLinePlaceholder":310},[200,1097,1098,1100,1102],{"class":202,"line":875},[200,1099,393],{"class":392},[200,1101,880],{"class":396},[200,1103,404],{"class":392},[200,1105,1106,1108],{"class":202,"line":885},[200,1107,888],{"class":392},[200,1109,891],{"class":396},[200,1111,1112,1114,1116],{"class":202,"line":894},[200,1113,897],{"class":206},[200,1115,519],{"class":392},[200,1117,1118],{"class":210},"\"bg-primary h-20 aspect-square rounded-2xl\"\n",[200,1120,1121,1123,1125,1127,1129],{"class":202,"line":905},[200,1122,908],{"class":392},[200,1124,815],{"class":206},[200,1126,519],{"class":392},[200,1128,915],{"class":210},[200,1130,969],{"class":392},[200,1132,1133,1136,1138,1140,1143,1145,1147,1149,1151,1153,1155],{"class":202,"line":930},[200,1134,1135],{"class":392}," scale: [",[200,1137,950],{"class":217},[200,1139,656],{"class":392},[200,1141,1142],{"class":217},"2",[200,1144,656],{"class":392},[200,1146,1142],{"class":217},[200,1148,656],{"class":392},[200,1150,950],{"class":217},[200,1152,656],{"class":392},[200,1154,950],{"class":217},[200,1156,1157],{"class":392},"],\n",[200,1159,1160,1163,1165,1167,1169,1171,1173,1175,1177,1179,1181],{"class":202,"line":957},[200,1161,1162],{"class":392}," rotate: [",[200,1164,921],{"class":217},[200,1166,656],{"class":392},[200,1168,921],{"class":217},[200,1170,656],{"class":392},[200,1172,944],{"class":217},[200,1174,656],{"class":392},[200,1176,944],{"class":217},[200,1178,656],{"class":392},[200,1180,921],{"class":217},[200,1182,1157],{"class":392},[200,1184,1185,1188,1191,1193,1195,1197,1200,1202,1204,1206,1208],{"class":202,"line":972},[200,1186,1187],{"class":392}," borderRadius: [",[200,1189,1190],{"class":210},"'0%'",[200,1192,656],{"class":392},[200,1194,1190],{"class":210},[200,1196,656],{"class":392},[200,1198,1199],{"class":210},"'50%'",[200,1201,656],{"class":392},[200,1203,1199],{"class":210},[200,1205,656],{"class":392},[200,1207,1190],{"class":210},[200,1209,1157],{"class":392},[200,1211,1212,1214],{"class":202,"line":984},[200,1213,1020],{"class":392},[200,1215,927],{"class":210},[200,1217,1218,1220,1222,1224,1226],{"class":202,"line":995},[200,1219,908],{"class":392},[200,1221,962],{"class":206},[200,1223,519],{"class":392},[200,1225,915],{"class":210},[200,1227,969],{"class":392},[200,1229,1230,1233,1235],{"class":202,"line":1006},[200,1231,1232],{"class":392}," duration: ",[200,1234,1142],{"class":217},[200,1236,981],{"class":392},[200,1238,1239,1242,1245],{"class":202,"line":1017},[200,1240,1241],{"class":392}," ease: ",[200,1243,1244],{"class":210},"'easeInOut'",[200,1246,981],{"class":392},[200,1248,1249,1252,1254,1256,1259,1261,1264,1266,1269,1271,1273],{"class":202,"line":1025},[200,1250,1251],{"class":392}," times: [",[200,1253,921],{"class":217},[200,1255,656],{"class":392},[200,1257,1258],{"class":217},"0.2",[200,1260,656],{"class":392},[200,1262,1263],{"class":217},"0.5",[200,1265,656],{"class":392},[200,1267,1268],{"class":217},"0.8",[200,1270,656],{"class":392},[200,1272,950],{"class":217},[200,1274,1157],{"class":392},[200,1276,1277,1280,1283],{"class":202,"line":1031},[200,1278,1279],{"class":392}," repeat: ",[200,1281,1282],{"class":217},"Infinity",[200,1284,981],{"class":392},[200,1286,1288,1291,1293],{"class":202,"line":1287},18,[200,1289,1290],{"class":392}," repeatDelay: ",[200,1292,950],{"class":217},[200,1294,981],{"class":392},[200,1296,1298,1300],{"class":202,"line":1297},19,[200,1299,1020],{"class":392},[200,1301,927],{"class":210},[200,1303,1305],{"class":202,"line":1304},20,[200,1306,1028],{"class":392},[200,1308,1310,1312,1314],{"class":202,"line":1309},21,[200,1311,862],{"class":392},[200,1313,880],{"class":396},[200,1315,404],{"class":392},[12,1317,1040,1318],{},[31,1319,1320],{},"Bikin efek animasi berulang seperti loading icon atau attention seeker.",[36,1322],{},[447,1324,1326,1327],{"id":1325},"_3-animasi-stagger-berurutan-dengan-variants","3. ",[66,1328,1329],{},"Animasi Stagger / Berurutan dengan Variants",[74,1331,1333],{"className":818,"code":1332,"language":820,"meta":82,"style":82},"\u003Cscript setup lang=\"ts\">\nimport { Motion } from 'motion-v'\n\nconst container = {\n hidden: { opacity: 1, scale: 0 },\n visible: {\n opacity: 1,\n scale: 1,\n },\n}\n\nconst items = {\n hidden: { y: 20, opacity: 0, scale: 0.85 },\n visible: {\n y: 0,\n opacity: 1,\n },\n}\n\nconst list = [0, 1, 2, 3]\n\u003C/script>\n\n\u003Ctemplate>\n \u003CMotion\n as=\"ul\"\n :variants=\"container\"\n initial=\"hidden\"\n animate=\"visible\"\n :transition=\"{\n type: 'spring',\n delayChildren: 0.5,\n staggerChildren: 0.2,\n }\"\n class=\"rounded-2xl overflow-hidden list-none p-2 grid-cols-2 grid-rows-2 aspect-square bg-primary/20 w-1/3 grid\"\n >\n \u003CMotion\n v-for=\"(item, i) in list\"\n :key=\"item\"\n :variants=\"items\"\n class=\"bg-primary rounded-full origin-center\"\n />\n \u003C/Motion>\n\u003C/template>\n",[43,1334,1335,1351,1361,1365,1379,1393,1398,1407,1416,1421,1426,1430,1441,1460,1464,1473,1481,1485,1489,1493,1523,1531,1536,1545,1552,1563,1580,1591,1602,1615,1624,1634,1644,1651,1661,1667,1675,1695,1712,1728,1739,1745,1756],{"__ignoreMap":82},[200,1336,1337,1339,1341,1343,1345,1347,1349],{"class":202,"line":203},[200,1338,393],{"class":392},[200,1340,829],{"class":396},[200,1342,832],{"class":206},[200,1344,835],{"class":206},[200,1346,519],{"class":392},[200,1348,840],{"class":210},[200,1350,404],{"class":392},[200,1352,1353,1355,1357,1359],{"class":202,"line":224},[200,1354,848],{"class":847},[200,1356,851],{"class":392},[200,1358,854],{"class":847},[200,1360,857],{"class":210},[200,1362,1363],{"class":202,"line":250},[200,1364,872],{"emptyLinePlaceholder":310},[200,1366,1367,1370,1373,1376],{"class":202,"line":869},[200,1368,1369],{"class":847},"const",[200,1371,1372],{"class":217}," container",[200,1374,1375],{"class":847}," =",[200,1377,1378],{"class":392}," {\n",[200,1380,1381,1384,1386,1388,1390],{"class":202,"line":875},[200,1382,1383],{"class":392}," hidden: { opacity: ",[200,1385,950],{"class":217},[200,1387,947],{"class":392},[200,1389,921],{"class":217},[200,1391,1392],{"class":392}," },\n",[200,1394,1395],{"class":202,"line":885},[200,1396,1397],{"class":392}," visible: {\n",[200,1399,1400,1403,1405],{"class":202,"line":894},[200,1401,1402],{"class":392}," opacity: ",[200,1404,950],{"class":217},[200,1406,981],{"class":392},[200,1408,1409,1412,1414],{"class":202,"line":905},[200,1410,1411],{"class":392}," scale: ",[200,1413,950],{"class":217},[200,1415,981],{"class":392},[200,1417,1418],{"class":202,"line":930},[200,1419,1420],{"class":392}," },\n",[200,1422,1423],{"class":202,"line":957},[200,1424,1425],{"class":392},"}\n",[200,1427,1428],{"class":202,"line":972},[200,1429,872],{"emptyLinePlaceholder":310},[200,1431,1432,1434,1437,1439],{"class":202,"line":984},[200,1433,1369],{"class":847},[200,1435,1436],{"class":217}," items",[200,1438,1375],{"class":847},[200,1440,1378],{"class":392},[200,1442,1443,1446,1448,1451,1453,1455,1458],{"class":202,"line":995},[200,1444,1445],{"class":392}," hidden: { y: ",[200,1447,1001],{"class":217},[200,1449,1450],{"class":392},", opacity: ",[200,1452,921],{"class":217},[200,1454,947],{"class":392},[200,1456,1457],{"class":217},"0.85",[200,1459,1392],{"class":392},[200,1461,1462],{"class":202,"line":1006},[200,1463,1397],{"class":392},[200,1465,1466,1469,1471],{"class":202,"line":1017},[200,1467,1468],{"class":392}," y: ",[200,1470,921],{"class":217},[200,1472,981],{"class":392},[200,1474,1475,1477,1479],{"class":202,"line":1025},[200,1476,1402],{"class":392},[200,1478,950],{"class":217},[200,1480,981],{"class":392},[200,1482,1483],{"class":202,"line":1031},[200,1484,1420],{"class":392},[200,1486,1487],{"class":202,"line":1287},[200,1488,1425],{"class":392},[200,1490,1491],{"class":202,"line":1297},[200,1492,872],{"emptyLinePlaceholder":310},[200,1494,1495,1497,1500,1502,1505,1507,1509,1511,1513,1515,1517,1520],{"class":202,"line":1304},[200,1496,1369],{"class":847},[200,1498,1499],{"class":217}," list",[200,1501,1375],{"class":847},[200,1503,1504],{"class":392}," [",[200,1506,921],{"class":217},[200,1508,656],{"class":392},[200,1510,950],{"class":217},[200,1512,656],{"class":392},[200,1514,1142],{"class":217},[200,1516,656],{"class":392},[200,1518,1519],{"class":217},"3",[200,1521,1522],{"class":392},"]\n",[200,1524,1525,1527,1529],{"class":202,"line":1309},[200,1526,862],{"class":392},[200,1528,829],{"class":396},[200,1530,404],{"class":392},[200,1532,1534],{"class":202,"line":1533},22,[200,1535,872],{"emptyLinePlaceholder":310},[200,1537,1539,1541,1543],{"class":202,"line":1538},23,[200,1540,393],{"class":392},[200,1542,880],{"class":396},[200,1544,404],{"class":392},[200,1546,1548,1550],{"class":202,"line":1547},24,[200,1549,888],{"class":392},[200,1551,891],{"class":396},[200,1553,1555,1558,1560],{"class":202,"line":1554},25,[200,1556,1557],{"class":206}," as",[200,1559,519],{"class":392},[200,1561,1562],{"class":210},"\"ul\"\n",[200,1564,1566,1568,1571,1573,1575,1578],{"class":202,"line":1565},26,[200,1567,908],{"class":392},[200,1569,1570],{"class":206},"variants",[200,1572,519],{"class":392},[200,1574,915],{"class":210},[200,1576,1577],{"class":392},"container",[200,1579,927],{"class":210},[200,1581,1583,1586,1588],{"class":202,"line":1582},27,[200,1584,1585],{"class":206}," initial",[200,1587,519],{"class":392},[200,1589,1590],{"class":210},"\"hidden\"\n",[200,1592,1594,1597,1599],{"class":202,"line":1593},28,[200,1595,1596],{"class":206}," animate",[200,1598,519],{"class":392},[200,1600,1601],{"class":210},"\"visible\"\n",[200,1603,1605,1607,1609,1611,1613],{"class":202,"line":1604},29,[200,1606,908],{"class":392},[200,1608,962],{"class":206},[200,1610,519],{"class":392},[200,1612,915],{"class":210},[200,1614,969],{"class":392},[200,1616,1618,1620,1622],{"class":202,"line":1617},30,[200,1619,975],{"class":392},[200,1621,978],{"class":210},[200,1623,981],{"class":392},[200,1625,1627,1630,1632],{"class":202,"line":1626},31,[200,1628,1629],{"class":392}," delayChildren: ",[200,1631,1263],{"class":217},[200,1633,981],{"class":392},[200,1635,1637,1640,1642],{"class":202,"line":1636},32,[200,1638,1639],{"class":392}," staggerChildren: ",[200,1641,1258],{"class":217},[200,1643,981],{"class":392},[200,1645,1647,1649],{"class":202,"line":1646},33,[200,1648,1020],{"class":392},[200,1650,927],{"class":210},[200,1652,1654,1656,1658],{"class":202,"line":1653},34,[200,1655,897],{"class":206},[200,1657,519],{"class":392},[200,1659,1660],{"class":210},"\"rounded-2xl overflow-hidden list-none p-2 grid-cols-2 grid-rows-2 aspect-square bg-primary/20 w-1/3 grid\"\n",[200,1662,1664],{"class":202,"line":1663},35,[200,1665,1666],{"class":392}," >\n",[200,1668,1670,1673],{"class":202,"line":1669},36,[200,1671,1672],{"class":392}," \u003C",[200,1674,891],{"class":396},[200,1676,1678,1681,1683,1685,1688,1691,1693],{"class":202,"line":1677},37,[200,1679,1680],{"class":847}," v-for",[200,1682,519],{"class":392},[200,1684,915],{"class":210},[200,1686,1687],{"class":392},"(item, i) ",[200,1689,1690],{"class":847},"in",[200,1692,1499],{"class":392},[200,1694,927],{"class":210},[200,1696,1698,1701,1703,1705,1707,1710],{"class":202,"line":1697},38,[200,1699,1700],{"class":392}," :",[200,1702,109],{"class":206},[200,1704,519],{"class":392},[200,1706,915],{"class":210},[200,1708,1709],{"class":392},"item",[200,1711,927],{"class":210},[200,1713,1715,1717,1719,1721,1723,1726],{"class":202,"line":1714},39,[200,1716,1700],{"class":392},[200,1718,1570],{"class":206},[200,1720,519],{"class":392},[200,1722,915],{"class":210},[200,1724,1725],{"class":392},"items",[200,1727,927],{"class":210},[200,1729,1731,1734,1736],{"class":202,"line":1730},40,[200,1732,1733],{"class":206}," class",[200,1735,519],{"class":392},[200,1737,1738],{"class":210},"\"bg-primary rounded-full origin-center\"\n",[200,1740,1742],{"class":202,"line":1741},41,[200,1743,1744],{"class":392}," />\n",[200,1746,1748,1751,1754],{"class":202,"line":1747},42,[200,1749,1750],{"class":392}," \u003C/",[200,1752,1753],{"class":396},"Motion",[200,1755,404],{"class":392},[200,1757,1759,1761,1763],{"class":202,"line":1758},43,[200,1760,862],{"class":392},[200,1762,880],{"class":396},[200,1764,404],{"class":392},[12,1766,1040,1767],{},[31,1768,1769],{},"Cocok untuk grid, list, atau card yang ingin muncul satu per satu.",[36,1771],{},[447,1773,1775,1776],{"id":1774},"_4-hover-press-interaktif","4. ",[66,1777,1778],{},"Hover & Press Interaktif",[74,1780,1782],{"className":818,"code":1781,"language":820,"meta":82,"style":82},"\u003Cscript setup lang=\"ts\">\nimport { Motion } from 'motion-v'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CMotion\n :hover=\"{ scale: 1.2, rotate: 90 }\"\n :press=\"{\n scale: 0.8,\n rotate: -90,\n borderRadius: '100%',\n }\"\n :transition=\"{\n type: 'spring',\n stiffness: 260,\n damping: 20,\n }\"\n as=\"button\"\n class=\"rounded-2xl overflow-hidden list-none p-2 grid-cols-2 grid-rows-2 aspect-square bg-primary w-1/3 grid\"\n />\n\u003C/template>\n",[43,1783,1784,1800,1810,1818,1822,1830,1836,1861,1873,1882,1894,1904,1910,1922,1930,1938,1946,1952,1961,1970,1974],{"__ignoreMap":82},[200,1785,1786,1788,1790,1792,1794,1796,1798],{"class":202,"line":203},[200,1787,393],{"class":392},[200,1789,829],{"class":396},[200,1791,832],{"class":206},[200,1793,835],{"class":206},[200,1795,519],{"class":392},[200,1797,840],{"class":210},[200,1799,404],{"class":392},[200,1801,1802,1804,1806,1808],{"class":202,"line":224},[200,1803,848],{"class":847},[200,1805,851],{"class":392},[200,1807,854],{"class":847},[200,1809,857],{"class":210},[200,1811,1812,1814,1816],{"class":202,"line":250},[200,1813,862],{"class":392},[200,1815,829],{"class":396},[200,1817,404],{"class":392},[200,1819,1820],{"class":202,"line":869},[200,1821,872],{"emptyLinePlaceholder":310},[200,1823,1824,1826,1828],{"class":202,"line":875},[200,1825,393],{"class":392},[200,1827,880],{"class":396},[200,1829,404],{"class":392},[200,1831,1832,1834],{"class":202,"line":885},[200,1833,888],{"class":392},[200,1835,891],{"class":396},[200,1837,1838,1840,1842,1844,1846,1848,1851,1854,1857,1859],{"class":202,"line":894},[200,1839,908],{"class":392},[200,1841,783],{"class":206},[200,1843,519],{"class":392},[200,1845,915],{"class":210},[200,1847,918],{"class":392},[200,1849,1850],{"class":217},"1.2",[200,1852,1853],{"class":392},", rotate: ",[200,1855,1856],{"class":217},"90",[200,1858,924],{"class":392},[200,1860,927],{"class":210},[200,1862,1863,1865,1867,1869,1871],{"class":202,"line":905},[200,1864,908],{"class":392},[200,1866,786],{"class":206},[200,1868,519],{"class":392},[200,1870,915],{"class":210},[200,1872,969],{"class":392},[200,1874,1875,1878,1880],{"class":202,"line":930},[200,1876,1877],{"class":392}," scale: ",[200,1879,1268],{"class":217},[200,1881,981],{"class":392},[200,1883,1884,1887,1890,1892],{"class":202,"line":957},[200,1885,1886],{"class":392}," rotate: ",[200,1888,1889],{"class":847},"-",[200,1891,1856],{"class":217},[200,1893,981],{"class":392},[200,1895,1896,1899,1902],{"class":202,"line":972},[200,1897,1898],{"class":392}," borderRadius: ",[200,1900,1901],{"class":210},"'100%'",[200,1903,981],{"class":392},[200,1905,1906,1908],{"class":202,"line":984},[200,1907,1020],{"class":392},[200,1909,927],{"class":210},[200,1911,1912,1914,1916,1918,1920],{"class":202,"line":995},[200,1913,908],{"class":392},[200,1915,962],{"class":206},[200,1917,519],{"class":392},[200,1919,915],{"class":210},[200,1921,969],{"class":392},[200,1923,1924,1926,1928],{"class":202,"line":1006},[200,1925,975],{"class":392},[200,1927,978],{"class":210},[200,1929,981],{"class":392},[200,1931,1932,1934,1936],{"class":202,"line":1017},[200,1933,987],{"class":392},[200,1935,990],{"class":217},[200,1937,981],{"class":392},[200,1939,1940,1942,1944],{"class":202,"line":1025},[200,1941,998],{"class":392},[200,1943,1001],{"class":217},[200,1945,981],{"class":392},[200,1947,1948,1950],{"class":202,"line":1031},[200,1949,1020],{"class":392},[200,1951,927],{"class":210},[200,1953,1954,1956,1958],{"class":202,"line":1287},[200,1955,1557],{"class":206},[200,1957,519],{"class":392},[200,1959,1960],{"class":210},"\"button\"\n",[200,1962,1963,1965,1967],{"class":202,"line":1297},[200,1964,897],{"class":206},[200,1966,519],{"class":392},[200,1968,1969],{"class":210},"\"rounded-2xl overflow-hidden list-none p-2 grid-cols-2 grid-rows-2 aspect-square bg-primary w-1/3 grid\"\n",[200,1971,1972],{"class":202,"line":1304},[200,1973,1028],{"class":392},[200,1975,1976,1978,1980],{"class":202,"line":1309},[200,1977,862],{"class":392},[200,1979,880],{"class":396},[200,1981,404],{"class":392},[12,1983,1040,1984],{},[31,1985,1986],{},"Tombol jadi lebih hidup dan terasa menyenangkan!",[36,1988],{},[447,1990,1992,1993],{"id":1991},"_5-fade-in-halus-dengan-initial-animate","5. ",[66,1994,1995,1996,1998,1999],{},"Fade-in Halus dengan ",[43,1997,780],{}," + ",[43,2000,815],{},[74,2002,2004],{"className":818,"code":2003,"language":820,"meta":82,"style":82},"\u003Cscript setup lang=\"ts\">\nimport { motion } from 'motion-v'\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cmotion.div\n :initial=\"{ opacity: 0 }\"\n :animate=\"{ opacity: 1 }\"\n />\n\u003C/template>\n",[43,2005,2006,2022,2033,2041,2045,2053,2060,2079,2097,2101],{"__ignoreMap":82},[200,2007,2008,2010,2012,2014,2016,2018,2020],{"class":202,"line":203},[200,2009,393],{"class":392},[200,2011,829],{"class":396},[200,2013,832],{"class":206},[200,2015,835],{"class":206},[200,2017,519],{"class":392},[200,2019,840],{"class":210},[200,2021,404],{"class":392},[200,2023,2024,2026,2029,2031],{"class":202,"line":224},[200,2025,848],{"class":847},[200,2027,2028],{"class":392}," { motion } ",[200,2030,854],{"class":847},[200,2032,857],{"class":210},[200,2034,2035,2037,2039],{"class":202,"line":250},[200,2036,862],{"class":392},[200,2038,829],{"class":396},[200,2040,404],{"class":392},[200,2042,2043],{"class":202,"line":869},[200,2044,872],{"emptyLinePlaceholder":310},[200,2046,2047,2049,2051],{"class":202,"line":875},[200,2048,393],{"class":392},[200,2050,880],{"class":396},[200,2052,404],{"class":392},[200,2054,2055,2057],{"class":202,"line":885},[200,2056,888],{"class":392},[200,2058,2059],{"class":396},"motion.div\n",[200,2061,2062,2064,2066,2068,2070,2073,2075,2077],{"class":202,"line":894},[200,2063,908],{"class":392},[200,2065,780],{"class":206},[200,2067,519],{"class":392},[200,2069,915],{"class":210},[200,2071,2072],{"class":392},"{ opacity: ",[200,2074,921],{"class":217},[200,2076,924],{"class":392},[200,2078,927],{"class":210},[200,2080,2081,2083,2085,2087,2089,2091,2093,2095],{"class":202,"line":905},[200,2082,908],{"class":392},[200,2084,815],{"class":206},[200,2086,519],{"class":392},[200,2088,915],{"class":210},[200,2090,2072],{"class":392},[200,2092,950],{"class":217},[200,2094,924],{"class":392},[200,2096,927],{"class":210},[200,2098,2099],{"class":202,"line":930},[200,2100,1028],{"class":392},[200,2102,2103,2105,2107],{"class":202,"line":957},[200,2104,862],{"class":392},[200,2106,880],{"class":396},[200,2108,404],{"class":392},[12,2110,1040,2111],{},[31,2112,2113],{},"Efek fade sederhana dan ringan untuk transisi konten.",[36,2115],{},[447,2117,2119,2120],{"id":2118},"_6-animasi-saat-elemen-muncul-di-layar-scroll-in-view","6. ",[66,2121,2122],{},"Animasi Saat Elemen Muncul di Layar (Scroll In-View)",[74,2124,2126],{"className":818,"code":2125,"language":820,"meta":82,"style":82},"\u003Cscript setup lang=\"ts\">\nimport { Motion } from 'motion-v'\n\u003C/script>\n\n\u003Ctemplate>\n \u003CMotion\n class=\"bg-primary w-1/3 aspect-square rounded-2xl\"\n :initial=\"{ scale: 0 }\"\n :in-view=\"{ rotate: 180, scale: 1 }\"\n :in-view-options=\"{\n once: true,\n }\"\n :transition=\"{\n type: 'spring',\n stiffness: 260,\n damping: 20,\n delay: 0.3,\n }\"\n />\n\u003C/template>\n",[43,2127,2128,2144,2154,2162,2166,2174,2180,2188,2206,2228,2241,2251,2257,2269,2277,2285,2293,2301,2307,2311],{"__ignoreMap":82},[200,2129,2130,2132,2134,2136,2138,2140,2142],{"class":202,"line":203},[200,2131,393],{"class":392},[200,2133,829],{"class":396},[200,2135,832],{"class":206},[200,2137,835],{"class":206},[200,2139,519],{"class":392},[200,2141,840],{"class":210},[200,2143,404],{"class":392},[200,2145,2146,2148,2150,2152],{"class":202,"line":224},[200,2147,848],{"class":847},[200,2149,851],{"class":392},[200,2151,854],{"class":847},[200,2153,857],{"class":210},[200,2155,2156,2158,2160],{"class":202,"line":250},[200,2157,862],{"class":392},[200,2159,829],{"class":396},[200,2161,404],{"class":392},[200,2163,2164],{"class":202,"line":869},[200,2165,872],{"emptyLinePlaceholder":310},[200,2167,2168,2170,2172],{"class":202,"line":875},[200,2169,393],{"class":392},[200,2171,880],{"class":396},[200,2173,404],{"class":392},[200,2175,2176,2178],{"class":202,"line":885},[200,2177,888],{"class":392},[200,2179,891],{"class":396},[200,2181,2182,2184,2186],{"class":202,"line":894},[200,2183,897],{"class":206},[200,2185,519],{"class":392},[200,2187,902],{"class":210},[200,2189,2190,2192,2194,2196,2198,2200,2202,2204],{"class":202,"line":905},[200,2191,908],{"class":392},[200,2193,780],{"class":206},[200,2195,519],{"class":392},[200,2197,915],{"class":210},[200,2199,918],{"class":392},[200,2201,921],{"class":217},[200,2203,924],{"class":392},[200,2205,927],{"class":210},[200,2207,2208,2210,2212,2214,2216,2218,2220,2222,2224,2226],{"class":202,"line":930},[200,2209,908],{"class":392},[200,2211,789],{"class":206},[200,2213,519],{"class":392},[200,2215,915],{"class":210},[200,2217,941],{"class":392},[200,2219,944],{"class":217},[200,2221,947],{"class":392},[200,2223,950],{"class":217},[200,2225,924],{"class":392},[200,2227,927],{"class":210},[200,2229,2230,2232,2235,2237,2239],{"class":202,"line":957},[200,2231,908],{"class":392},[200,2233,2234],{"class":206},"in-view-options",[200,2236,519],{"class":392},[200,2238,915],{"class":210},[200,2240,969],{"class":392},[200,2242,2243,2246,2249],{"class":202,"line":972},[200,2244,2245],{"class":392}," once: ",[200,2247,2248],{"class":217},"true",[200,2250,981],{"class":392},[200,2252,2253,2255],{"class":202,"line":984},[200,2254,1020],{"class":392},[200,2256,927],{"class":210},[200,2258,2259,2261,2263,2265,2267],{"class":202,"line":995},[200,2260,908],{"class":392},[200,2262,962],{"class":206},[200,2264,519],{"class":392},[200,2266,915],{"class":210},[200,2268,969],{"class":392},[200,2270,2271,2273,2275],{"class":202,"line":1006},[200,2272,975],{"class":392},[200,2274,978],{"class":210},[200,2276,981],{"class":392},[200,2278,2279,2281,2283],{"class":202,"line":1017},[200,2280,987],{"class":392},[200,2282,990],{"class":217},[200,2284,981],{"class":392},[200,2286,2287,2289,2291],{"class":202,"line":1025},[200,2288,998],{"class":392},[200,2290,1001],{"class":217},[200,2292,981],{"class":392},[200,2294,2295,2297,2299],{"class":202,"line":1031},[200,2296,1009],{"class":392},[200,2298,1012],{"class":217},[200,2300,981],{"class":392},[200,2302,2303,2305],{"class":202,"line":1287},[200,2304,1020],{"class":392},[200,2306,927],{"class":210},[200,2308,2309],{"class":202,"line":1297},[200,2310,1028],{"class":392},[200,2312,2313,2315,2317],{"class":202,"line":1304},[200,2314,862],{"class":392},[200,2316,880],{"class":396},[200,2318,404],{"class":392},[12,2320,1040,2321],{},[31,2322,2323],{},"Efek masuk ketika user scroll — bagus untuk hero section, features, atau showcase.",[36,2325],{},[23,2327,2329],{"id":2328},"siap-coba-motion-vue","🚀 Siap Coba Motion Vue?",[12,2331,2332],{},"Kamu bisa mulai dengan:",[74,2334,2336],{"className":194,"code":2335,"language":196,"meta":82,"style":82},"pnpm add motion-v\n# atau\nnpm install motion-v\n",[43,2337,2338,2349,2355],{"__ignoreMap":82},[200,2339,2340,2343,2346],{"class":202,"line":203},[200,2341,2342],{"class":206},"pnpm",[200,2344,2345],{"class":210}," add",[200,2347,2348],{"class":210}," motion-v\n",[200,2350,2351],{"class":202,"line":224},[200,2352,2354],{"class":2353},"sJ8bj","# atau\n",[200,2356,2357,2360,2363],{"class":202,"line":250},[200,2358,2359],{"class":206},"npm",[200,2361,2362],{"class":210}," install",[200,2364,2348],{"class":210},[12,2366,2367],{},"Lalu gunakan seperti di contoh-contoh di atas. Simpel, ringan, dan bikin UI kamu terasa profesional dan hidup ✨",[23,2369,641],{"id":278},[12,2371,2372],{},"Motion Vue adalah pilihan tepat untuk kamu yang ingin membuat antarmuka Vue.js dengan animasi modern tanpa ribet. Dengan API yang sederhana dan performa yang optimal, kamu bisa fokus pada pengalaman pengguna tanpa harus khawatir soal kompleksitas animasi.",[23,2374,2376],{"id":2375},"referensi","Referensi",[48,2378,2379,2386],{},[51,2380,2381],{},[737,2382,2385],{"href":2383,"rel":2384},"https://motion.unovue.com/",[741],"Motion Vue Documentation",[51,2387,2388],{},[737,2389,742],{"href":739,"rel":2390},[741],[284,2392,2393],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":82,"searchDepth":224,"depth":224,"links":2395},[2396,2402,2416,2417,2418],{"id":731,"depth":224,"text":732,"children":2397},[2398,2399,2400,2401],{"id":749,"depth":250,"text":750},{"id":766,"depth":250,"text":767},{"id":773,"depth":250,"text":774},{"id":793,"depth":250,"text":794},{"id":802,"depth":224,"text":803,"children":2403},[2404,2406,2408,2410,2412,2414],{"id":806,"depth":250,"text":2405},"1. Animasi Dasar dengan initial dan animate",{"id":1048,"depth":250,"text":2407},"2. Animasi Berurutan / Timeline-Style",{"id":1325,"depth":250,"text":2409},"3. Animasi Stagger / Berurutan dengan Variants",{"id":1774,"depth":250,"text":2411},"4. Hover & Press Interaktif",{"id":1991,"depth":250,"text":2413},"5. Fade-in Halus dengan initial + animate",{"id":2118,"depth":250,"text":2415},"6. Animasi Saat Elemen Muncul di Layar (Scroll In-View)",{"id":2328,"depth":224,"text":2329},{"id":278,"depth":224,"text":641},{"id":2375,"depth":224,"text":2376},"Motion Vue adalah library animasi untuk Vue.js yang ringan, cepat, dan mudah digunakan. Cocok untuk membuat antarmuka dinamis dengan animasi yang mulus.",{"date":2421,"keywords":2422,"tags":2423,"slug":2426},"2025-06-12","Motion Vue, Vue.js, animasi, antarmuka dinamis, web development",[701,2424,2425,590],"Framer Motion","Vue.js","mengenal-motion-vue-animasi-modern-dan-ringan-untuk-vuejs","/blog/mengenal-motion-vue-animasi-modern-dan-ringan-untuk-vuejs",{"title":693,"description":2419},"blog/mengenal-motion-vue-animasi-modern-dan-ringan-untuk-vuejs","2nmeDCRqAYG1D2rVEe1pKaox9leF_HuHTN2lc8w7Vqc",{"id":2432,"title":2433,"body":2434,"description":2805,"extension":299,"meta":2806,"navigation":310,"ogImage":2440,"path":2811,"seo":2812,"stem":2813,"__hash__":2814},"blog/blog/introducing-nuxia.md","Memperkenal Nuxia: Fullstack Starter Kit Modern Berbasis Nuxt 3",{"type":9,"value":2435,"toc":2795},[2436,2443,2447,2457,2460,2462,2466,2471,2533,2535,2539,2589,2591,2595,2609,2611,2615,2622,2624,2628,2635,2763,2770,2777,2779,2783,2786,2792],[12,2437,2438],{},[15,2439],{"src":2440,"alt":18,"className":2441,"style":2442},"https://images.unsplash.com/photo-1717100326555-19ba2a6a1cb2?q=80&w=3474&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",[20],"view-transition-name: blog-post-image-introducing-nuxia;",[23,2444,2446],{"id":2445},"nuxia-telah-resmi-diluncurkan","🚀 Nuxia Telah Resmi Diluncurkan!",[12,2448,2449,2450,2452,2453,2456],{},"Hari ini, saya dengan bangga memperkenalkan ",[66,2451,18],{}," — sebuah ",[66,2454,2455],{},"Fullstack Starter Kit"," modern berbasis Nuxt 3 yang dibangun khusus untuk developer yang ingin membangun aplikasi web dengan cepat, aman, dan menyenangkan.",[12,2458,2459],{},"Nuxia ini terinspirasi dari Laravel Starter Kit yang dibuat oleh Tim Laravel. Bisa dibilang, Nuxia ini adalah versi Nuxt dari starter kit tersebut, dengan base Nuxt 3 yang sudah terintegrasi dengan berbagai teknologi modern.",[36,2461],{},[447,2463,2465],{"id":2464},"apa-itu-nuxia","💡 Apa itu Nuxia?",[12,2467,2468,2470],{},[66,2469,18],{}," adalah kerangka awal (starter template) untuk membangun aplikasi fullstack modern menggunakan teknologi yang sudah terbukti dan populer:",[48,2472,2473,2479,2486,2493,2500,2510,2520,2527],{},[51,2474,593,2475,2478],{},[66,2476,2477],{},"Nuxt"," — Framework Vue yang powerful untuk SSR, SSG, dan SPA",[51,2480,2481,2482,2485],{},"🎨 ",[66,2483,2484],{},"Tailwind CSS"," — Framework CSS utility-first untuk desain UI cepat dan konsisten",[51,2487,2488,2489,2492],{},"🧩 ",[66,2490,2491],{},"shadcn-vue"," — Komponen UI berkualitas tinggi berbasis Tailwind",[51,2494,2495,2496,2499],{},"🔐 ",[66,2497,2498],{},"nuxt-auth-utils"," — Otentikasi siap pakai untuk Nuxt",[51,2501,2502,2503,1998,2506,2509],{},"🧠 ",[66,2504,2505],{},"Drizzle ORM",[66,2507,2508],{},"PostgreSQL"," — ORM TypeScript-first dan database andal",[51,2511,2512,2513,1998,2516,2519],{},"📨 ",[66,2514,2515],{},"Vue Email",[66,2517,2518],{},"Nodemailer"," — Untuk mengirim email langsung dari server",[51,2521,2522,2523,2526],{},"🔎 ",[66,2524,2525],{},"Zod"," — Validasi schema berbasis TypeScript",[51,2528,2529,2530,2532],{},"🌱 ",[66,2531,306],{}," — Jaminan type safety di seluruh stack",[36,2534],{},[447,2536,2538],{"id":2537},"️-fitur-unggulan","⚙️ Fitur Unggulan",[48,2540,2541,2548,2555,2565,2571,2582],{},[51,2542,2543,2544,2547],{},"🚀 ",[66,2545,2546],{},"Built-in Authentication"," — dengan session-based auth dan protected routes",[51,2549,2550,2551,2554],{},"🧰 ",[66,2552,2553],{},"Form validation"," dengan Zod dan composable",[51,2556,2557,2558,2561,2562,2564],{},"📩 ",[66,2559,2560],{},"Email ready"," — integrasi ",[43,2563,2515],{}," dan Nodemailer",[51,2566,2502,2567,2570],{},[66,2568,2569],{},"ORM modern"," — langsung pakai dengan Drizzle dan migrasi otomatis",[51,2572,2573,2574,2577,2578,2581],{},"🛠️ ",[66,2575,2576],{},"Worker support"," — pakai ",[43,2579,2580],{},"nuxt-workers"," untuk task berat tanpa pusing",[51,2583,2584,2585,2588],{},"💻 ",[66,2586,2587],{},"Type-safe API"," — dari backend ke frontend",[36,2590],{},[447,2592,2594],{"id":2593},"siapa-yang-cocok-pakai-nuxia","📦 Siapa yang Cocok Pakai Nuxia?",[48,2596,2597,2600,2603,2606],{},[51,2598,2599],{},"Developer solo yang ingin mulai project dengan cepat",[51,2601,2602],{},"Startup yang butuh MVP dalam hitungan hari",[51,2604,2605],{},"Pengajar/mentor yang butuh boilerplate untuk mengajar",[51,2607,2608],{},"Siapa pun yang suka TypeScript dan Vue ❤️",[36,2610],{},[447,2612,2614],{"id":2613},"status-proyek","🧪 Status Proyek",[12,2616,2617,2618,2621],{},"Nuxia saat ini berada dalam tahap ",[66,2619,2620],{},"beta awal"," dan terus dikembangkan. Saya sangat terbuka terhadap feedback dan kontribusi dari komunitas.",[36,2623],{},[447,2625,2627],{"id":2626},"mulai-sekarang","🧭 Mulai Sekarang",[12,2629,2630,2631,2634],{},"Untuk mulai menggunakan Nuxia, kamu bisa meng-clone repositori ini dengan mudah menggunakan ",[43,2632,2633],{},"giget",":",[74,2636,2638],{"className":194,"code":2637,"language":196,"meta":82,"style":82},"# Clone the repository using `giget`\nnpx giget@latest gh:gravitano/nuxia nuxia-app\n\ncd nuxia-app\n\n# Copy the example environment variables\ncp .env.example .env\n\n# Install dependencies\npnpm install # or yarn, bun, etc.\n\n# Create a PostgreSQL database and update the .env file\n# Make sure to set the DATABASE_URL variable in .env\n\n# Migrate the database and seed initial data\npnpm db:push # migrate the database\npnpm db:seed\n\n# Start the development server\npnpm dev\n",[43,2639,2640,2645,2658,2662,2669,2673,2678,2689,2693,2698,2707,2711,2716,2721,2725,2730,2740,2747,2751,2756],{"__ignoreMap":82},[200,2641,2642],{"class":202,"line":203},[200,2643,2644],{"class":2353},"# Clone the repository using `giget`\n",[200,2646,2647,2649,2652,2655],{"class":202,"line":224},[200,2648,207],{"class":206},[200,2650,2651],{"class":210}," giget@latest",[200,2653,2654],{"class":210}," gh:gravitano/nuxia",[200,2656,2657],{"class":210}," nuxia-app\n",[200,2659,2660],{"class":202,"line":250},[200,2661,872],{"emptyLinePlaceholder":310},[200,2663,2664,2667],{"class":202,"line":869},[200,2665,2666],{"class":217},"cd",[200,2668,2657],{"class":210},[200,2670,2671],{"class":202,"line":875},[200,2672,872],{"emptyLinePlaceholder":310},[200,2674,2675],{"class":202,"line":885},[200,2676,2677],{"class":2353},"# Copy the example environment variables\n",[200,2679,2680,2683,2686],{"class":202,"line":894},[200,2681,2682],{"class":206},"cp",[200,2684,2685],{"class":210}," .env.example",[200,2687,2688],{"class":210}," .env\n",[200,2690,2691],{"class":202,"line":905},[200,2692,872],{"emptyLinePlaceholder":310},[200,2694,2695],{"class":202,"line":930},[200,2696,2697],{"class":2353},"# Install dependencies\n",[200,2699,2700,2702,2704],{"class":202,"line":957},[200,2701,2342],{"class":206},[200,2703,2362],{"class":210},[200,2705,2706],{"class":2353}," # or yarn, bun, etc.\n",[200,2708,2709],{"class":202,"line":972},[200,2710,872],{"emptyLinePlaceholder":310},[200,2712,2713],{"class":202,"line":984},[200,2714,2715],{"class":2353},"# Create a PostgreSQL database and update the .env file\n",[200,2717,2718],{"class":202,"line":995},[200,2719,2720],{"class":2353},"# Make sure to set the DATABASE_URL variable in .env\n",[200,2722,2723],{"class":202,"line":1006},[200,2724,872],{"emptyLinePlaceholder":310},[200,2726,2727],{"class":202,"line":1017},[200,2728,2729],{"class":2353},"# Migrate the database and seed initial data\n",[200,2731,2732,2734,2737],{"class":202,"line":1025},[200,2733,2342],{"class":206},[200,2735,2736],{"class":210}," db:push",[200,2738,2739],{"class":2353}," # migrate the database\n",[200,2741,2742,2744],{"class":202,"line":1031},[200,2743,2342],{"class":206},[200,2745,2746],{"class":210}," db:seed\n",[200,2748,2749],{"class":202,"line":1287},[200,2750,872],{"emptyLinePlaceholder":310},[200,2752,2753],{"class":202,"line":1297},[200,2754,2755],{"class":2353},"# Start the development server\n",[200,2757,2758,2760],{"class":202,"line":1304},[200,2759,2342],{"class":206},[200,2761,2762],{"class":210}," dev\n",[12,2764,2765,2766],{},"📖 Dokumentasi dan source code:\n👉 ",[737,2767,2768],{"href":2768,"rel":2769},"https://github.com/gravitano/nuxia",[741],[12,2771,2772,2773],{},"Demo:\n👉 ",[737,2774,2775],{"href":2775,"rel":2776},"https://nuxia.warsono.dev",[741],[36,2778],{},[447,2780,2782],{"id":2781},"️-terima-kasih","❤️ Terima Kasih",[12,2784,2785],{},"Proyek ini merupakan hasil dari eksplorasi saya dalam membangun aplikasi web modern dan sudah saya gunakan untuk side-project saya. Nuxia menggabungkan berbagai teknologi yang saya sukai dan gunakan sehari-hari sebagai frontend engineer. Saya berharap Nuxia bisa menjadi alat yang berguna bagi banyak developer untuk membangun aplikasi hebat dengan lebih mudah.",[12,2787,2788,2791],{},[66,2789,2790],{},"Yuk coba Nuxia dan bantu saya menyebarkan ke teman-temanmu!"," 🚀",[284,2793,2794],{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":82,"searchDepth":224,"depth":224,"links":2796},[2797],{"id":2445,"depth":224,"text":2446,"children":2798},[2799,2800,2801,2802,2803,2804],{"id":2464,"depth":250,"text":2465},{"id":2537,"depth":250,"text":2538},{"id":2593,"depth":250,"text":2594},{"id":2613,"depth":250,"text":2614},{"id":2626,"depth":250,"text":2627},{"id":2781,"depth":250,"text":2782},"Nuxia adalah starter kit modern untuk membangun aplikasi fullstack dengan Nuxt 3, Tailwind CSS, dan teknologi terkini lainnya.",{"date":2807,"keywords":2808,"tags":2809},"2025-06-08","Nuxia, Nuxt 3, Tailwind CSS, shadcn-vue, nuxt-auth-utils, Drizzle ORM, PostgreSQL, Vue Email, Nodemailer, Zod, TypeScript",[18,2810,2484,2491,2498,2505,2508,2515,2518],"Nuxt 3","/blog/introducing-nuxia",{"title":2433,"description":2805},"blog/introducing-nuxia","tWEErS9sS4yqWlkmimg0ZlEb0lIiNvqwoauEfrdlKI8",{"id":2816,"title":2817,"body":2818,"description":3198,"extension":299,"meta":3199,"navigation":310,"ogImage":2824,"path":3206,"seo":3207,"stem":3208,"__hash__":3209},"blog/blog/mengenal-inertia-js-cara-modern-membangun-aplikasi-monolith-yang-interaktif.md","Mengenal Inertia.js: Cara Modern Membangun Aplikasi Monolith yang Interaktif",{"type":9,"value":2819,"toc":3186},[2820,2828,2831,2837,2841,2853,2856,2860,2867,2874,2876,2880,2883,2909,2911,2915,2918,2935,2939,2985,3062,3131,3133,3137,3140,3151,3153,3157,3160,3171,3173,3177,3180,3183],[12,2821,2822],{},[15,2823],{"src":2824,"alt":2825,"className":2826,"style":2827},"https://images.unsplash.com/photo-1653200256706-a5bc2f69abb7?q=80&w=3458&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D","Inertia.js",[20],"view-transition-name: blog-post-image-mengenal-inertia-js-cara-modern-membangun-aplikasi-monolith-yang-interaktif;",[328,2829,2817],{"id":2830},"mengenal-inertiajs-cara-modern-membangun-aplikasi-monolith-yang-interaktif",[12,2832,2833,2834,2836],{},"Dalam beberapa tahun terakhir, pendekatan pengembangan web terus berkembang. Framework seperti Laravel, Rails, dan Django yang awalnya hanya fokus pada server-side rendering kini mulai \"berbaur\" dengan JavaScript framework seperti Vue, React, atau Svelte. Namun, menggabungkan keduanya seringkali kompleks — di sinilah ",[66,2835,2825],{}," hadir sebagai solusi yang elegan.",[23,2838,2840],{"id":2839},"apa-itu-inertiajs","Apa Itu Inertia.js?",[12,2842,2843,2845,2846,2849,2850,135],{},[66,2844,2825],{}," adalah ",[31,2847,2848],{},"modern monolith tool"," yang memungkinkan kita membangun aplikasi single-page (SPA) menggunakan framework backend tradisional (seperti Laravel) dan frontend modern (seperti Vue, React, atau Svelte) ",[66,2851,2852],{},"tanpa harus membangun API",[12,2854,2855],{},"Inertia menjembatani backend dan frontend dengan cara yang sangat sederhana: ia mengatur pertukaran data antara backend dan frontend melalui response JSON, dan mengatur navigasi SPA secara otomatis.",[447,2857,2859],{"id":2858},"filosofi-inertiajs","Filosofi Inertia.js",[643,2861,2862],{},[12,2863,2864],{},[31,2865,2866],{},"\"Like server-side routing, but with client-side rendering.\"",[12,2868,2869,2870,2873],{},"Inertia tidak mencoba menggantikan backend framework atau frontend framework. Ia hanya menjadi ",[31,2871,2872],{},"glue"," — lem perekat yang memungkinkan keduanya bekerja harmonis. Dengan Inertia, kita bisa menulis controller di Laravel seperti biasa, lalu mengembalikan view ke komponen Vue/React, bukan ke Blade template.",[36,2875],{},[23,2877,2879],{"id":2878},"mengapa-menggunakan-inertiajs","Mengapa Menggunakan Inertia.js?",[12,2881,2882],{},"Berikut beberapa alasan kuat mengapa banyak developer menyukai Inertia.js:",[185,2884,2885,2891,2897,2903],{},[51,2886,2887,2890],{},[66,2888,2889],{},"Tidak Perlu API","\nTidak ada kebutuhan untuk membuat REST atau GraphQL API. Kamu bisa langsung melempar data dari controller ke komponen frontend.",[51,2892,2893,2896],{},[66,2894,2895],{},"Routing Server-Side","\nRouting tetap dikelola oleh backend, seperti di Laravel, sehingga struktur tetap familiar.",[51,2898,2899,2902],{},[66,2900,2901],{},"SEO-Friendly","\nDengan konfigurasi yang tepat (misalnya menggunakan SSR di Inertia + Vue), kamu bisa tetap menjaga performa SEO.",[51,2904,2905,2908],{},[66,2906,2907],{},"Progressive Enhancement","\nKamu bisa memigrasi proyek Laravel/Blade ke Vue/React secara bertahap tanpa harus menulis ulang semuanya.",[36,2910],{},[23,2912,2914],{"id":2913},"cara-kerja-inertiajs","Cara Kerja Inertia.js",[12,2916,2917],{},"Cara kerja Inertia bisa diibaratkan seperti berikut:",[185,2919,2920,2923,2926,2932],{},[51,2921,2922],{},"User melakukan request ke URL tertentu.",[51,2924,2925],{},"Server (misalnya Laravel) menangani request dan mengembalikan \"Inertia response\" berupa komponen frontend + data.",[51,2927,2928,2929,135],{},"Inertia di sisi frontend mengganti halaman secara ",[31,2930,2931],{},"client-side",[51,2933,2934],{},"Navigasi selanjutnya dilakukan secara SPA tanpa reload, tapi tetap menggunakan route Laravel.",[447,2936,2938],{"id":2937},"contoh-sederhana-laravel-vue-inertia","Contoh Sederhana: Laravel + Vue + Inertia",[74,2940,2944],{"className":2941,"code":2942,"language":2943,"meta":82,"style":82},"language-php shiki shiki-themes github-light github-dark","// routes/web.php\nRoute::get('/dashboard', [DashboardController::class, 'index']);\n","php",[43,2945,2946,2951],{"__ignoreMap":82},[200,2947,2948],{"class":202,"line":203},[200,2949,2950],{"class":2353},"// routes/web.php\n",[200,2952,2953,2956,2959,2962,2965,2968,2971,2974,2977,2979,2982],{"class":202,"line":224},[200,2954,2955],{"class":217},"Route",[200,2957,2958],{"class":847},"::",[200,2960,2961],{"class":206},"get",[200,2963,2964],{"class":392},"(",[200,2966,2967],{"class":210},"'/dashboard'",[200,2969,2970],{"class":392},", [",[200,2972,2973],{"class":217},"DashboardController",[200,2975,2976],{"class":847},"::class",[200,2978,656],{"class":392},[200,2980,2981],{"class":210},"'index'",[200,2983,2984],{"class":392},"]);\n",[74,2986,2988],{"className":2941,"code":2987,"language":2943,"meta":82,"style":82},"// app/Http/Controllers/DashboardController.php\npublic function index()\n{\n return Inertia::render('Dashboard', [\n 'user' => Auth::user(),\n ]);\n}\n",[43,2989,2990,2995,3009,3013,3034,3053,3058],{"__ignoreMap":82},[200,2991,2992],{"class":202,"line":203},[200,2993,2994],{"class":2353},"// app/Http/Controllers/DashboardController.php\n",[200,2996,2997,3000,3003,3006],{"class":202,"line":224},[200,2998,2999],{"class":847},"public",[200,3001,3002],{"class":847}," function",[200,3004,3005],{"class":206}," index",[200,3007,3008],{"class":392},"()\n",[200,3010,3011],{"class":202,"line":250},[200,3012,969],{"class":392},[200,3014,3015,3018,3021,3023,3026,3028,3031],{"class":202,"line":869},[200,3016,3017],{"class":847}," return",[200,3019,3020],{"class":217}," Inertia",[200,3022,2958],{"class":847},[200,3024,3025],{"class":206},"render",[200,3027,2964],{"class":392},[200,3029,3030],{"class":210},"'Dashboard'",[200,3032,3033],{"class":392},", [\n",[200,3035,3036,3039,3042,3045,3047,3050],{"class":202,"line":875},[200,3037,3038],{"class":210}," 'user'",[200,3040,3041],{"class":847}," =>",[200,3043,3044],{"class":217}," Auth",[200,3046,2958],{"class":847},[200,3048,3049],{"class":206},"user",[200,3051,3052],{"class":392},"(),\n",[200,3054,3055],{"class":202,"line":885},[200,3056,3057],{"class":392}," ]);\n",[200,3059,3060],{"class":202,"line":894},[200,3061,1425],{"class":392},[74,3063,3065],{"className":818,"code":3064,"language":820,"meta":82,"style":82},"\u003C!-- resources/js/Pages/Dashboard.vue -->\n\u003Cscript setup>\ndefineProps({ user: Object })\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ch1>Halo, {{ user.name }}!\u003C/h1>\n\u003C/template>\n",[43,3066,3067,3072,3082,3090,3098,3102,3110,3123],{"__ignoreMap":82},[200,3068,3069],{"class":202,"line":203},[200,3070,3071],{"class":2353},"\u003C!-- resources/js/Pages/Dashboard.vue -->\n",[200,3073,3074,3076,3078,3080],{"class":202,"line":224},[200,3075,393],{"class":392},[200,3077,829],{"class":396},[200,3079,832],{"class":206},[200,3081,404],{"class":392},[200,3083,3084,3087],{"class":202,"line":250},[200,3085,3086],{"class":206},"defineProps",[200,3088,3089],{"class":392},"({ user: Object })\n",[200,3091,3092,3094,3096],{"class":202,"line":869},[200,3093,862],{"class":392},[200,3095,829],{"class":396},[200,3097,404],{"class":392},[200,3099,3100],{"class":202,"line":875},[200,3101,872],{"emptyLinePlaceholder":310},[200,3103,3104,3106,3108],{"class":202,"line":885},[200,3105,393],{"class":392},[200,3107,880],{"class":396},[200,3109,404],{"class":392},[200,3111,3112,3114,3116,3119,3121],{"class":202,"line":894},[200,3113,888],{"class":392},[200,3115,328],{"class":396},[200,3117,3118],{"class":392},">Halo, {{ user.name }}!\u003C/",[200,3120,328],{"class":396},[200,3122,404],{"class":392},[200,3124,3125,3127,3129],{"class":202,"line":905},[200,3126,862],{"class":392},[200,3128,880],{"class":396},[200,3130,404],{"class":392},[36,3132],{},[23,3134,3136],{"id":3135},"kekurangan-inertiajs","Kekurangan Inertia.js",[12,3138,3139],{},"Tentu tidak ada tool yang sempurna. Beberapa kekurangan Inertia antara lain:",[48,3141,3142,3145,3148],{},[51,3143,3144],{},"Dokumentasi bisa terasa kurang mendalam untuk kasus-kasus kompleks.",[51,3146,3147],{},"Tidak cocok jika kamu memang butuh arsitektur microservices atau API-first.",[51,3149,3150],{},"Memerlukan pemahaman backend dan frontend yang cukup seimbang.",[36,3152],{},[23,3154,3156],{"id":3155},"kapan-harus-menggunakan-inertiajs","Kapan Harus Menggunakan Inertia.js?",[12,3158,3159],{},"Gunakan Inertia.js jika:",[48,3161,3162,3165,3168],{},[51,3163,3164],{},"✅ Kamu ingin membangun SPA tapi tetap menggunakan framework backend favoritmu.",[51,3166,3167],{},"✅ Kamu ingin menghindari kompleksitas pembuatan API.",[51,3169,3170],{},"✅ Kamu butuh pengalaman frontend modern tanpa meninggalkan stack Laravel/Django/Rails.",[36,3172],{},[23,3174,3176],{"id":3175},"penutup","Penutup",[12,3178,3179],{},"Inertia.js adalah solusi cerdas untuk developer yang ingin menggabungkan kekuatan backend dan kenyamanan frontend modern tanpa ribet. Ia bukan framework frontend, bukan juga API generator — tapi jembatan sederhana yang sangat memudahkan.",[12,3181,3182],{},"Jika kamu ingin membangun aplikasi yang modern, cepat, dan tetap efisien, Inertia.js layak dicoba.",[284,3184,3185],{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":82,"searchDepth":224,"depth":224,"links":3187},[3188,3191,3192,3195,3196,3197],{"id":2839,"depth":224,"text":2840,"children":3189},[3190],{"id":2858,"depth":250,"text":2859},{"id":2878,"depth":224,"text":2879},{"id":2913,"depth":224,"text":2914,"children":3193},[3194],{"id":2937,"depth":250,"text":2938},{"id":3135,"depth":224,"text":3136},{"id":3155,"depth":224,"text":3156},{"id":3175,"depth":224,"text":3176},"Inertia.js adalah solusi untuk membangun aplikasi monolith modern dengan Vue, React, atau Svelte tanpa perlu API.",{"date":3200,"keywords":3201,"tags":3202},"2025-06-05","Inertia.js, Vue.js, React, Svelte, aplikasi monolith, web development",[2825,2425,590,3203,3204,3205],"Svelte","Laravel","Monolith","/blog/mengenal-inertia-js-cara-modern-membangun-aplikasi-monolith-yang-interaktif",{"title":2817,"description":3198},"blog/mengenal-inertia-js-cara-modern-membangun-aplikasi-monolith-yang-interaktif","rvLeeLeRgzlIW9ezLGUOoteFfAC7UoE_Fzw__lyvaz4",{"id":3211,"title":3212,"body":3213,"description":3373,"extension":299,"meta":3374,"navigation":310,"ogImage":3219,"path":3382,"seo":3383,"stem":3384,"__hash__":3385},"blog/blog/perjalanan-karir-saya-sebagai-frontend-developer.md","Perjalanan Karir Saya sebagai Frontend Developer",{"type":9,"value":3214,"toc":3364},[3215,3222,3225,3228,3235,3238,3242,3245,3254,3260,3264,3274,3277,3281,3284,3320,3323,3327,3330,3356,3358,3361],[12,3216,3217],{},[15,3218],{"src":3219,"alt":2425,"className":3220,"style":3221},"https://images.unsplash.com/photo-1607799279861-4dd421887fb3?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",[20],"view-transition-name: blog-post-image-perjalanan-karir-saya-sebagai-frontend-developer;",[23,3223,3212],{"id":3224},"perjalanan-karir-saya-sebagai-frontend-developer",[12,3226,3227],{},"Setiap orang punya jalur karir yang unik — dan inilah cerita saya.",[12,3229,3230,3231,3234],{},"Saya memulai perjalanan di dunia software engineering bukan langsung sebagai frontend developer. Justru, saya mengawali dari ",[66,3232,3233],{},"backend developer",". Saat itu saya lebih sering berkutat dengan API, database, dan business logic di balik layar. Tapi seiring waktu, rasa penasaran saya terhadap dunia UI/UX dan interaksi pengguna makin besar.",[12,3236,3237],{},"Akhirnya, saya memberanikan diri untuk pindah haluan: fokus di frontend. Yang mana kebetulan waktu itu, teknologi frontend sedang berkembang pesat. Framework seperti Vue.js dan React mulai populer, dan saya merasa ini adalah waktu yang tepat untuk terjun ke dunia yang lebih visual dan interaktif. Plus, di tempat saya bekerja, ada banyak proyek yang membutuhkan keahlian frontend.",[447,3239,3241],{"id":3240},"dari-backend-ke-frontend","Dari Backend ke Frontend",[12,3243,3244],{},"Transisi ini tidak selalu mulus. Di backend, saya terbiasa dengan struktur dan alur data yang relatif stabil. Tapi di frontend, saya harus mulai berpikir lebih visual dan interaktif. Mulai dari memahami DOM, CSS, reactivity, hingga rendering performance — semua terasa seperti dunia baru.",[12,3246,3247,3248,3250,3251,3253],{},"Framework pertama yang benar-benar saya pelajari secara mendalam adalah ",[66,3249,2425],{},". Saat itu Vue terasa sangat intuitif dan mudah dipelajari. Saya suka bagaimana struktur komponennya jelas, dan bagaimana pendekatan data-reactive-nya mempermudah banyak hal dan ",[43,3252,620],{}," membuat binding data jadi sangat mudah.",[12,3255,3256,3257,3259],{},"Setelah cukup nyaman di Vue, saya juga mulai mendalami ",[66,3258,590],{}," untuk memperluas perspektif. Sekarang saya merasa dua-duanya punya kelebihan masing-masing, dan keduanya sering saya gunakan di proyek berbeda.",[447,3261,3263],{"id":3262},"kenapa-saya-bertahan-di-frontend","Kenapa Saya Bertahan di Frontend?",[12,3265,3266,3267,3269,3270,3273],{},"Frontend itu dinamis. Dunia frontend cepat berubah, dan kadang memang bikin pusing. Tapi justru itu yang bikin saya betah: selalu ada hal baru yang bisa dipelajari, dicoba, dan dioptimalkan. Mulai dari framework baru, teknik styling seperti ",[66,3268,2484],{},", atau pattern arsitektur seperti ",[66,3271,3272],{},"Atomic Design"," dan lainnya.",[12,3275,3276],{},"Yang paling memuaskan dari kerja di frontend adalah ketika kita bisa melihat langsung hasil kerja kita — dan tahu bahwa hal kecil seperti \"loading state yang halus\" atau \"form yang ramah pengguna\" bisa membuat pengalaman pengguna jauh lebih baik.",[447,3278,3280],{"id":3279},"teknologi-yang-saya-gunakan-sehari-hari","Teknologi yang Saya Gunakan Sehari-hari",[12,3282,3283],{},"Seiring waktu, saya mulai mengembangkan style dan tools favorit sendiri. Saat ini, stack yang paling sering saya pakai meliputi:",[48,3285,3286,3292,3298,3303,3308,3314],{},[51,3287,3288,3291],{},[66,3289,3290],{},"Vue 3 / Nuxt 3"," untuk proyek yang butuh struktur yang rapi dan SSR-ready.",[51,3293,3294,3297],{},[66,3295,3296],{},"React / Next.js"," untuk proyek yang mengandalkan ekosistem besar dan fleksibilitas tinggi.",[51,3299,3300,3302],{},[66,3301,2484],{}," untuk styling cepat, konsisten, dan scalable.",[51,3304,3305,3307],{},[66,3306,306],{}," untuk menjaga kualitas code dan mengurangi bug saat scaling.",[51,3309,3310,3313],{},[66,3311,3312],{},"shadcn/ui"," untuk komponen UI yang mudah digunakan, gampang di-custom, dan tetap menjaga konsistensi desain.",[51,3315,3316,3319],{},[66,3317,3318],{},"motion"," untuk membuat animasi yang halus dan menarik.",[12,3321,3322],{},"Saya juga cukup rajin mengotak-atik tooling: dari bundler, CI/CD, hingga performance profiling.",[447,3324,3326],{"id":3325},"apa-yang-saya-pelajari-dari-perjalanan-ini","Apa yang Saya Pelajari dari Perjalanan Ini",[12,3328,3329],{},"Beberapa hal penting yang saya pelajari sejauh ini:",[48,3331,3332,3338,3344,3350],{},[51,3333,3334,3337],{},[66,3335,3336],{},"Coding itu penting, tapi komunikasi juga."," Terutama saat bekerja dalam tim.",[51,3339,3340,3343],{},[66,3341,3342],{},"Jangan fanatik sama tools."," Setiap proyek punya kebutuhan sendiri. Pilih tools yang sesuai.",[51,3345,3346,3349],{},[66,3347,3348],{},"Terus belajar dan eksplorasi."," Dunia frontend terlalu cepat berubah untuk merasa nyaman di zona aman.",[51,3351,3352,3355],{},[66,3353,3354],{},"Dokumentasikan prosesmu."," Bahkan kesalahan bisa jadi pelajaran berharga kalau dicatat.",[447,3357,3176],{"id":3175},[12,3359,3360],{},"Saya nggak bilang perjalanan ini mudah. Tapi saya bisa bilang dengan yakin: saya menikmati setiap prosesnya. Dan lewat blog ini, saya ingin membagikan apa yang saya pelajari — siapa tahu bisa membantu, menginspirasi, atau sekadar menemani kamu yang sedang ada di jalur yang sama.",[12,3362,3363],{},"Kalau kamu punya cerita serupa atau ingin ngobrol seputar frontend, feel free buat reach out! Sampai jumpa di tulisan selanjutnya ✌️.",{"title":82,"searchDepth":224,"depth":224,"links":3365},[3366],{"id":3224,"depth":224,"text":3212,"children":3367},[3368,3369,3370,3371,3372],{"id":3240,"depth":250,"text":3241},{"id":3262,"depth":250,"text":3263},{"id":3279,"depth":250,"text":3280},{"id":3325,"depth":250,"text":3326},{"id":3175,"depth":250,"text":3176},"Cerita perjalanan saya dari seorang backend developer hingga menjadi frontend developer yang fokus pada Vue, Nuxt, Tailwind, TypeScript dan kawan-kawannya.",{"date":3375,"keywords":3376,"tags":3377},"2025-06-03","frontend developer, perjalanan karir, Vue.js, React, Tailwind CSS, TypeScript, developer Indonesia, pengalaman kerja, web development",[3378,3379,2425,590,2484,306,3380,3381],"frontend","developer","pengalaman kerja","web development","/blog/perjalanan-karir-saya-sebagai-frontend-developer",{"title":3212,"description":3373},"blog/perjalanan-karir-saya-sebagai-frontend-developer","j2a7-tnPF7cf-BNEUBlUs7HFBOv58S7c9AnSGzIKjrU",["Reactive",3387],{"$snuxt-delay-hydration-mode":3388,"$scolor-mode":3389,"$snuxt-seo-utils:routeRules":3392,"$ssite-config":3393},"init",{"preference":3390,"value":3390,"unknown":310,"forced":3391},"dark",false,{"head":-1,"seoMeta":-1},{"_priority":3394,"env":3398,"name":3399,"url":3400},{"name":3395,"env":3396,"url":3397},-5,-15,-4,"production","warsono.dev","https://warsono.dev/",["Set"],["ShallowReactive",3403],{"blog":-1},"/blog"]