CINXE.COM
Vue - DEV Community
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vue - DEV Community</title> <meta name="last-updated" content="2025-04-07 00:57:23 UTC"> <meta name="user-signed-in" content="false"> <meta name="head-cached-at" content="1743987443"> <meta name="environment" content="production"> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-6f5c5ed9c571b36ab9c316526d7032b5a4c789f3a4c35503492eb03376615fca.css" media="all" id="main-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-1c703342dce6eac414f19ca7fd07bcf83cbe44088659758144e52e7fa1e92dd3.css" media="all" id="main-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-0f2fc85bc159498f8ae6fba58c460e6deba863d02d59dfa994c1954976ddb6cc.css" media="all" id="main-crayons-stylesheet" /> <script src="https://assets.dev.to/assets/base-b8bdff515245fe895f3035d77697afb35d5d7e114bdf68291667479d4b289751.js" defer="defer"></script> <script src="https://assets.dev.to/assets/application-7258612fccf5d56314a6e4ad1898b4f818f474c4bb3485e302428d489a769a17.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseInitializers-b74902d56433062a87f5f1ce74769baf2a1a698772f46952b0ac72bc95c4abfd.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseTracking-b6bf73e5ee66633e151e7d5b7c6bbccedfa4c59e3615be97b98c4c0f543ddae7.js" defer="defer"></script> <meta name="search-script" content="https://assets.dev.to/assets/Search-7dcdad3172ab4501a4598fe8b716c7a88146e79fd42256d36fb1b83e27bf77cf.js"> <link rel="canonical" href="https://dev.to/t/vue" /> <meta name="description" content="vue content on DEV Community"> <meta name="keywords" content="software development, engineering, vue"> <meta property="og:type" content="website" /> <meta property="og:url" content="https://dev.to/t/vue" /> <meta property="og:title" content="Vue" /> <meta property="og:description" content="Vue content on DEV Community" /> <meta property="og:site_name" content="DEV Community" /> <meta name="twitter:site" content="@thepracticaldev"> <meta name="twitter:creator" content="@Vue"> <meta name="twitter:title" content="Vue"> <meta name="twitter:description" content="Vue content on DEV Community"> <meta name="twitter:card" content="summary_large_image"> <meta property="og:image" content="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otvb2z646ytpt1hl2rv.jpg"> <meta name="twitter:image:src" content="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3otvb2z646ytpt1hl2rv.jpg"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <link rel="icon" type="image/x-icon" href="https://media2.dev.to/dynamic/image/width=32,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" /> <link rel="apple-touch-icon" href="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://media2.dev.to/dynamic/image/width=152,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="167x167" href="https://media2.dev.to/dynamic/image/width=167,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link href="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" rel="icon" sizes="192x192" /> <link href="https://media2.dev.to/dynamic/image/width=128,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" rel="icon" sizes="128x128" /> <meta name="apple-mobile-web-app-title" content="dev.to"> <meta name="application-name" content="dev.to"> <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)"> <link rel="search" href="https://dev.to/open-search.xml" type="application/opensearchdescription+xml" title="DEV Community" /> <meta property="forem:name" content="DEV Community" /> <meta property="forem:logo" content="https://media2.dev.to/dynamic/image/width=512,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" /> <meta property="forem:domain" content="dev.to" /> </head> <body class="sans-serif-article-body default-header" data-user-status="logged-out" data-community-name="DEV Community" data-subscription-icon="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" data-locale="en" data-honeybadger-key="hbp_nqu4Y66HuEKlD6YRGssZuRQnPOjDm50J8Zkr" data-deployed-at="2025-04-04T21:14:30Z" data-latest-commit-id="80dddae49850f88ae36ea53ef7b4cd07bd8b133e" data-ga-tracking="UA-71991109-1" data-cookie-banner-user-context="logged_out_only" data-cookie-banner-platform-context="off" data-algolia-id="PRSOBFP46H" data-algolia-search-key="9aa7d31610cba78851c9b1f63776a9dd" data-algolia-display="true" data-dynamic-url-component="bmar11" data-ga4-tracking-id="G-TYEM8Y3JN3"> <script> if (navigator.userAgent === 'ForemWebView/1' || window.frameElement) { document.body.classList.add("hidden-shell"); } </script> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-6f5c5ed9c571b36ab9c316526d7032b5a4c789f3a4c35503492eb03376615fca.css" media="all" id="secondary-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-1c703342dce6eac414f19ca7fd07bcf83cbe44088659758144e52e7fa1e92dd3.css" media="all" id="secondary-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-0f2fc85bc159498f8ae6fba58c460e6deba863d02d59dfa994c1954976ddb6cc.css" media="all" id="secondary-crayons-stylesheet" /> <div id="body-styles"> <style> :root { --accent-brand-lighter-rgb: 80, 99, 301; --accent-brand-rgb: 59, 73, 223; --accent-brand-darker-rgb: 47, 58, 178; } </style> </div> <div id="audiocontent" data-podcast=""> </div> <div class="navigation-progress" id="navigation-progress"></div> <header id="topbar" class="crayons-header topbar print-hidden"> <span id="route-change-target" tabindex="-1"></span> <a href="#main-content" class="skip-content-link">Skip to content</a> <div class="crayons-header__container"> <span class="inline-block m:hidden "> <button class="c-btn c-btn--icon-alone js-hamburger-trigger mx-2"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a9st6g2jrnxxena2raduaoedi95mzctr" class="crayons-icon"><title id="a9st6g2jrnxxena2raduaoedi95mzctr">Navigation menu</title> <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path> </svg> </button> </span> <a href="/" class="site-logo" aria-label="DEV Community Home"> <img class="site-logo__img" src="https://media2.dev.to/dynamic/image/quality=100/https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png" style="aspect-ratio: 10 / 8" alt="DEV Community"> </a> <div class="crayons-header--search js-search-form" id="header-search"> <form accept-charset="UTF-8" method="get" action="/search" role="search"> <div class="crayons-fields crayons-fields--horizontal"> <div class="crayons-field flex-1 relative"> <input id="search-input" class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" name="q" placeholder="Search..." autocomplete="off" /> <button type="submit" aria-label="Search" class="c-btn c-btn--icon-alone absolute inset-px right-auto mt-0 py-0"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="assscwjndp2nf63413mkddzrmrrvtinh" aria-hidden="true" class="crayons-icon"><title id="assscwjndp2nf63413mkddzrmrrvtinh">Search</title> <path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0111 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 01-1.969 5.617zm-2.006-.742A6.977 6.977 0 0018 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 004.875-1.975l.15-.15z"></path> </svg> </button> <a class="crayons-header--search-brand-indicator" href="https://www.algolia.com/developers/?utm_source=devto&utm_medium=referral" target="_blank" rel="noopener noreferrer"> Powered by <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" width="24" height="24" viewBox="0 0 500 500.34" role="img" aria-labelledby="a20truxbvkuuxbx7fjhpow5osi2pn4j0" aria-hidden="true" class="crayons-icon"><title id="a20truxbvkuuxbx7fjhpow5osi2pn4j0">Search</title> <defs></defs><path class="cls-1" d="M250,0C113.38,0,2,110.16,.03,246.32c-2,138.29,110.19,252.87,248.49,253.67,42.71,.25,83.85-10.2,120.38-30.05,3.56-1.93,4.11-6.83,1.08-9.52l-23.39-20.74c-4.75-4.22-11.52-5.41-17.37-2.92-25.5,10.85-53.21,16.39-81.76,16.04-111.75-1.37-202.04-94.35-200.26-206.1,1.76-110.33,92.06-199.55,202.8-199.55h202.83V407.68l-115.08-102.25c-3.72-3.31-9.43-2.66-12.43,1.31-18.47,24.46-48.56,39.67-81.98,37.36-46.36-3.2-83.92-40.52-87.4-86.86-4.15-55.28,39.65-101.58,94.07-101.58,49.21,0,89.74,37.88,93.97,86.01,.38,4.28,2.31,8.28,5.53,11.13l29.97,26.57c3.4,3.01,8.8,1.17,9.63-3.3,2.16-11.55,2.92-23.6,2.07-35.95-4.83-70.39-61.84-127.01-132.26-131.35-80.73-4.98-148.23,58.18-150.37,137.35-2.09,77.15,61.12,143.66,138.28,145.36,32.21,.71,62.07-9.42,86.2-26.97l150.36,133.29c6.45,5.71,16.62,1.14,16.62-7.48V9.49C500,4.25,495.75,0,490.51,0H250Z"></path> </svg> Algolia </a> </div> </div> </form> </div> <div class="flex items-center h-100 ml-auto"> <div class="flex" id="authentication-top-nav-actions"> <span class="hidden m:block"> <a href="https://dev.to/enter" class="c-link c-link--block mr-2 whitespace-nowrap ml-auto" data-no-instant> Log in </a> </span> <a href="https://dev.to/enter?state=new-user" data-tracking-id="ca_top_nav" data-tracking-source="top_navbar" class="c-cta c-cta--branded whitespace-nowrap mr-2" data-no-instant> Create account </a> </div> </div> </div> </header> <div class="hamburger"> <div class="hamburger__content"> <header class="hamburger__content__header"> <h2 class="fs-l fw-bold flex-1 break-word lh-tight">DEV Community</h2> <button class="c-btn c-btn--icon-alone js-hamburger-trigger shrink-0" aria-label="Close"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a1tko0wf5yiloacmes5sbx5wg6bo33c9" aria-hidden="true" class="crayons-icon c-btn__icon"><title id="a1tko0wf5yiloacmes5sbx5wg6bo33c9">Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </button> </header> <div class="p-2 js-navigation-links-container" id="authentication-hamburger-actions"> </div> </div> <div class="hamburger__overlay js-hamburger-trigger"></div> </div> <div id="active-broadcast" class="broadcast-wrapper"></div> <div id="page-content" class="wrapper tagged_articles tagged_articles-index" data-current-page="tagged_articles-index"> <div id="page-content-inner" data-internal-nav="false"> <div id="page-route-change" class="screen-reader-only" aria-live="polite" aria-atomic="true"></div> <div data-tag-id="1760" data-tag-name="vue" id="tag-1760" class="crayons-layout js-tag-card"> <header class="crayons-card branded-4 p-4 l:p-6 spec__tag-header" style="border-top-color: #41b883 "> <div class="flex"> <img src="https://media2.dev.to/dynamic/image/width=64,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fbadge%2Fbadge_image%2F27%2Fvue-sticker.png" alt="" class="mr-4" style="transform: rotate(-25deg); width: 64px; height: 64px;" /> <div class="flex flex-col w-100 justify-center"> <div class="flex justify-between items-center"> <h1 class="crayons-title"> Vue </h1> <div id="tag-buttons-1760" class="mt-auto flex items-end justify-between"> <div class="flex gap-2"> <button class="c-btn c-btn--primary js-follow-tag-button" aria-label="Follow tag: vue"> Follow </button> <button class="c-btn js-hide-tag-button" aria-label="Hide tag: vue"> Hide </button> </div> </div> </div> <p class="max-w-100 m:max-w-75 pt-2 s:pt-4"> Official tag for the Vue.js JavaScript Framework </p> </div> </div> </header> </div> <div class="home sub-home" id="index-container" data-params="{"tag":"vue","sort_by":"hotness_score","sort_direction":"desc"}" data-which="" data-tag="vue" data-feed="base-feed" data-requires-approval="false" data-articles-since=""> <div id="sidebar-wrapper-left" class="sidebar-wrapper sidebar-wrapper-left"> <div class="sidebar-bg" id="sidebar-bg-left"></div> <aside class="side-bar"> <div class="widget js-policy-article-create"> <a class="crayons-btn crayons-btn--s" href="/new/vue"> Create Post </a> </div> <div class="widget"> <header> <h4>about #vue</h4> </header> <div class="widget-body"> <p><a href="https://v3.vuejs.org/">Vue.js</a> is a progressive JavaScript framework for building user interfaces.</p> <hr> <p>• <a href="https://v3.vuejs.org/guide/introduction.html">Official Guide</a><br> • <a href="https://v3.vuejs.org/api/">API Reference</a><br> • <a href="https://v3.vuejs.org/style-guide/">Style Guide</a><br> • <a href="https://v3.vuejs.org/cookbook/">Cookbook</a></p> </div> </div> <div class="sidebar-data"> <div> 6788 Posts Published </div> <hr /> <div class="olderposts-header">Older #vue posts</div> <div class="olderposts-links"> <span class="olderposts-pagenumber">1</span> <a href="https://dev.to/t/vue/page/2" class="olderposts-pagenumber">2</a> <a href="https://dev.to/t/vue/page/3" class="olderposts-pagenumber">3</a> <a href="https://dev.to/t/vue/page/4" class="olderposts-pagenumber">4</a> <a href="https://dev.to/t/vue/page/5" class="olderposts-pagenumber">5</a> <a href="https://dev.to/t/vue/page/6" class="olderposts-pagenumber">6</a> <a href="https://dev.to/t/vue/page/7" class="olderposts-pagenumber">7</a> <a href="https://dev.to/t/vue/page/8" class="olderposts-pagenumber">8</a> <a href="https://dev.to/t/vue/page/9" class="olderposts-pagenumber">9</a> <div> …<a href="https://dev.to/t/vue/page/75" class="olderposts-pagenumber">75</a> …<a href="https://dev.to/t/vue/page/271" class="olderposts-pagenumber">271</a> </div> </div> </div> </aside> </div> <main class="articles-list" id="main-content" data-follow-button-container="true"> <header class="flex items-center p-2 m:p-0 m:pb-2" id="on-page-nav-controls"> <h1 class="screen-reader-only">Posts</h1> <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon mr-2 inline-block m:hidden mb-auto" id="on-page-nav-butt-left" aria-label="nav-button-left"> <div class="crayons-icon nav-icon "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ah8onbca9v65nj8rh1xa2xsbnnxby4pd" class="crayons-icon"><title id="ah8onbca9v65nj8rh1xa2xsbnnxby4pd">Left menu</title> <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path> </svg> </div> </button> <div class="flex-1 flex items-center justify-between"> <div class="crayons-notice w-100" aria-live="polite">👋 <a href="/enter">Sign in</a> for the ability to sort posts by <strong>relevant</strong>, <strong>latest</strong>, or <strong>top</strong>.</div> </div> <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--icon ml-2 inline-block l:hidden mb-auto" id="on-page-nav-butt-right" aria-label="nav-button-right"> <div class="crayons-icon nav-icon "> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a97kv96ouq0js96pc7mjf9exce4o0rzo" class="crayons-icon"><title id="a97kv96ouq0js96pc7mjf9exce4o0rzo">Right menu</title> <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path> </svg> </div> </button> </header> <div class="substories" id="substories"> <div class="crayons-story " data-feed-content-id="2386021" data-content-user-id="287825"> <a href="https://dev.to/yahav10/4-essential-testing-strategies-for-vuejs-applications-3d1j" aria-labelledby="article-link-2386021" class="crayons-story__hidden-navigation-link">4 Essential Testing Strategies for Vue.js Applications</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/yahav10" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F287825%2Fc1555100-bb7a-4bd6-9890-552935d0ab04.jpeg" alt="yahav10 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/yahav10" class="crayons-story__secondary fw-medium m:hidden"> Tom Yahav </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2386021" aria-controls="story-author-preview-content-2386021" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Tom Yahav profile details"> Tom Yahav </button> <div id="story-author-preview-content-2386021" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/yahav10" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F287825%2Fc1555100-bb7a-4bd6-9890-552935d0ab04.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Tom Yahav</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":287825,"className":"User","name":"Tom Yahav"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="287825"></div> </div> </div> </div> </div> <a href="https://dev.to/yahav10/4-essential-testing-strategies-for-vuejs-applications-3d1j" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-06T11:52:26Z">Apr 6</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743940346"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/yahav10/4-essential-testing-strategies-for-vuejs-applications-3d1j" data-preload-image="" id="article-link-2386021"> 4 Essential Testing Strategies for Vue.js Applications </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(1, 155, 101, 0.10); --tag-prefix: #019b65; --tag-bg-hover: rgba(1, 155, 101, 0.10); --tag-prefix-hover: #019b65; " href="/t/testing"><span class="crayons-tag__prefix">#</span>testing</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/cypress"><span class="crayons-tag__prefix">#</span>cypress</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/jest"><span class="crayons-tag__prefix">#</span>jest</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/yahav10/4-essential-testing-strategies-for-vuejs-applications-3d1j#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 4 Essential Testing Strategies for Vue.js Applications"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ajsf7hmvy2wtl4l2bu4xxtvo6317fltk" class="crayons-icon"><title id="ajsf7hmvy2wtl4l2bu4xxtvo6317fltk">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2386021" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2386021" data-article-author-id="287825" aria-label="Save post 4 Essential Testing Strategies for Vue.js Applications to reading list" title="Save post 4 Essential Testing Strategies for Vue.js Applications to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2384507" data-content-user-id="3020875"> <a href="https://dev.to/sakhawat_hussain_4277937b/hey-everyone-im-sakhawat-hussain-42pl" aria-labelledby="article-link-2384507" class="crayons-story__hidden-navigation-link">Hey everyone! I'm Sakhawat Hussain</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/sakhawat_hussain_4277937b" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3020875%2F498c013d-b3a3-4f48-bf29-bb1db8897310.jpg" alt="sakhawat_hussain_4277937b profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/sakhawat_hussain_4277937b" class="crayons-story__secondary fw-medium m:hidden"> sakhawat hussain </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2384507" aria-controls="story-author-preview-content-2384507" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="sakhawat hussain profile details"> sakhawat hussain </button> <div id="story-author-preview-content-2384507" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/sakhawat_hussain_4277937b" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3020875%2F498c013d-b3a3-4f48-bf29-bb1db8897310.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">sakhawat hussain</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":3020875,"className":"User","name":"sakhawat hussain"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="3020875"></div> </div> </div> </div> </div> <a href="https://dev.to/sakhawat_hussain_4277937b/hey-everyone-im-sakhawat-hussain-42pl" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-05T18:01:31Z">Apr 5</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743876091"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/sakhawat_hussain_4277937b/hey-everyone-im-sakhawat-hussain-42pl" data-preload-image="" id="article-link-2384507"> Hey everyone! I'm Sakhawat Hussain </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(220, 45, 23, 0.10); --tag-prefix: #dc2d17; --tag-bg-hover: rgba(220, 45, 23, 0.10); --tag-prefix-hover: #dc2d17; " href="/t/laravel"><span class="crayons-tag__prefix">#</span>laravel</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/techcommunity"><span class="crayons-tag__prefix">#</span>techcommunity</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/sakhawat_hussain_4277937b/hey-everyone-im-sakhawat-hussain-42pl#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Hey everyone! I'm Sakhawat Hussain"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="alreptzgmg06d9aa3rffzy19spfu9mgy" class="crayons-icon"><title id="alreptzgmg06d9aa3rffzy19spfu9mgy">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2384507" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2384507" data-article-author-id="3020875" aria-label="Save post Hey everyone! I'm Sakhawat Hussain to reading list" title="Save post Hey everyone! I'm Sakhawat Hussain to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2382658" data-content-user-id="250408"> <a href="https://dev.to/patrickmonteiro/master-class-vue-3-2025-17ig" aria-labelledby="article-link-2382658" class="crayons-story__hidden-navigation-link">Master Class Vue 3 2025</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/patrickmonteiro" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F250408%2Fb53bf74c-89e0-4613-8606-122cb8996179.png" alt="patrickmonteiro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/patrickmonteiro" class="crayons-story__secondary fw-medium m:hidden"> Patrick Monteiro </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2382658" aria-controls="story-author-preview-content-2382658" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Patrick Monteiro profile details"> Patrick Monteiro </button> <div id="story-author-preview-content-2382658" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/patrickmonteiro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F250408%2Fb53bf74c-89e0-4613-8606-122cb8996179.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Patrick Monteiro</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":250408,"className":"User","name":"Patrick Monteiro"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="250408"></div> </div> </div> </div> </div> <a href="https://dev.to/patrickmonteiro/master-class-vue-3-2025-17ig" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-05T00:47:17Z">Apr 5</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743814037"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/patrickmonteiro/master-class-vue-3-2025-17ig" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu7npy2dhgs8til5817xa.png" id="article-link-2382658"> Master Class Vue 3 2025 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 51, 224, 0.10); --tag-prefix: #ff33e0; --tag-bg-hover: rgba(255, 51, 224, 0.10); --tag-prefix-hover: #ff33e0; " href="/t/frontend"><span class="crayons-tag__prefix">#</span>frontend</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/patrickmonteiro/master-class-vue-3-2025-17ig#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Master Class Vue 3 2025"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a6umuxhl3c55pbcclruofnp4piz9l4u6" class="crayons-icon"><title id="a6umuxhl3c55pbcclruofnp4piz9l4u6">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2382658" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2382658" data-article-author-id="250408" aria-label="Save post Master Class Vue 3 2025 to reading list" title="Save post Master Class Vue 3 2025 to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2375361" data-content-user-id="3003193"> <a href="https://dev.to/oleksii_petrychenko/title-my-essential-vs-code-plugins-for-vue-3-nuxt-projects-3hjl" aria-labelledby="article-link-2375361" class="crayons-story__hidden-navigation-link">Title: My Essential VS Code Plugins for Vue 3 + Nuxt Projects</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/oleksii_petrychenko" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3003193%2Fc773bfd2-070e-4132-ad6d-d4f80fe826d2.jpg" alt="oleksii_petrychenko profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/oleksii_petrychenko" class="crayons-story__secondary fw-medium m:hidden"> Oleksii </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2375361" aria-controls="story-author-preview-content-2375361" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Oleksii profile details"> Oleksii </button> <div id="story-author-preview-content-2375361" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/oleksii_petrychenko" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3003193%2Fc773bfd2-070e-4132-ad6d-d4f80fe826d2.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Oleksii</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":3003193,"className":"User","name":"Oleksii"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="3003193"></div> </div> </div> </div> </div> <a href="https://dev.to/oleksii_petrychenko/title-my-essential-vs-code-plugins-for-vue-3-nuxt-projects-3hjl" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-02T14:43:12Z">Apr 2</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743604992"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/oleksii_petrychenko/title-my-essential-vs-code-plugins-for-vue-3-nuxt-projects-3hjl" data-preload-image="" id="article-link-2375361"> Title: My Essential VS Code Plugins for Vue 3 + Nuxt Projects </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(5, 4, 56, 0.10); --tag-prefix: #050438; --tag-bg-hover: rgba(5, 4, 56, 0.10); --tag-prefix-hover: #050438; " href="/t/nuxt"><span class="crayons-tag__prefix">#</span>nuxt</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(60, 165, 234, 0.10); --tag-prefix: #3ca5ea; --tag-bg-hover: rgba(60, 165, 234, 0.10); --tag-prefix-hover: #3ca5ea; " href="/t/vscode"><span class="crayons-tag__prefix">#</span>vscode</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 51, 224, 0.10); --tag-prefix: #ff33e0; --tag-bg-hover: rgba(255, 51, 224, 0.10); --tag-prefix-hover: #ff33e0; " href="/t/frontend"><span class="crayons-tag__prefix">#</span>frontend</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/oleksii_petrychenko/title-my-essential-vs-code-plugins-for-vue-3-nuxt-projects-3hjl#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Title: My Essential VS Code Plugins for Vue 3 + Nuxt Projects"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="atknz886hm9scw3op7jg9z8yykdz1lr0" class="crayons-icon"><title id="atknz886hm9scw3op7jg9z8yykdz1lr0">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2375361" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2375361" data-article-author-id="3003193" aria-label="Save post Title: My Essential VS Code Plugins for Vue 3 + Nuxt Projects to reading list" title="Save post Title: My Essential VS Code Plugins for Vue 3 + Nuxt Projects to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2371737" data-content-user-id="3003193"> <a href="https://dev.to/oleksii_petrychenko/lessons-from-two-years-of-building-vue-3-typescript-applications-for-the-adult-content-industry-4nea" aria-labelledby="article-link-2371737" class="crayons-story__hidden-navigation-link">Lessons From Two Years of Building Vue 3 + TypeScript Applications for the Adult Content Industry</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/oleksii_petrychenko" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3003193%2Fc773bfd2-070e-4132-ad6d-d4f80fe826d2.jpg" alt="oleksii_petrychenko profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/oleksii_petrychenko" class="crayons-story__secondary fw-medium m:hidden"> Oleksii </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2371737" aria-controls="story-author-preview-content-2371737" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Oleksii profile details"> Oleksii </button> <div id="story-author-preview-content-2371737" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/oleksii_petrychenko" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3003193%2Fc773bfd2-070e-4132-ad6d-d4f80fe826d2.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Oleksii</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":3003193,"className":"User","name":"Oleksii"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="3003193"></div> </div> </div> </div> </div> <a href="https://dev.to/oleksii_petrychenko/lessons-from-two-years-of-building-vue-3-typescript-applications-for-the-adult-content-industry-4nea" class="crayons-story__tertiary fs-xs"><time datetime="2025-04-01T17:26:12Z">Apr 1</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1743528372"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/oleksii_petrychenko/lessons-from-two-years-of-building-vue-3-typescript-applications-for-the-adult-content-industry-4nea" data-preload-image="" id="article-link-2371737"> Lessons From Two Years of Building Vue 3 + TypeScript Applications for the Adult Content Industry </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(5, 4, 56, 0.10); --tag-prefix: #050438; --tag-bg-hover: rgba(5, 4, 56, 0.10); --tag-prefix-hover: #050438; " href="/t/nuxt"><span class="crayons-tag__prefix">#</span>nuxt</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 51, 224, 0.10); --tag-prefix: #ff33e0; --tag-bg-hover: rgba(255, 51, 224, 0.10); --tag-prefix-hover: #ff33e0; " href="/t/frontend"><span class="crayons-tag__prefix">#</span>frontend</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/oleksii_petrychenko/lessons-from-two-years-of-building-vue-3-typescript-applications-for-the-adult-content-industry-4nea#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Lessons From Two Years of Building Vue 3 + TypeScript Applications for the Adult Content Industry"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="apgt4a2169bjftcz76hch0pbmd5gu0c8" class="crayons-icon"><title id="apgt4a2169bjftcz76hch0pbmd5gu0c8">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2371737" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2371737" data-article-author-id="3003193" aria-label="Save post Lessons From Two Years of Building Vue 3 + TypeScript Applications for the Adult Content Industry to reading list" title="Save post Lessons From Two Years of Building Vue 3 + TypeScript Applications for the Adult Content Industry to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2358107" data-content-user-id="2967949"> <a href="https://dev.to/vuphanam/backend-developer-43ni" aria-labelledby="article-link-2358107" class="crayons-story__hidden-navigation-link">Backend developer</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/vuphanam" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2967949%2Fa2bd218d-a484-4b4d-bda0-0d9f9f311c65.jpg" alt="vuphanam profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/vuphanam" class="crayons-story__secondary fw-medium m:hidden"> Vũ Phan Hoài Nam </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2358107" aria-controls="story-author-preview-content-2358107" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Vũ Phan Hoài Nam profile details"> Vũ Phan Hoài Nam </button> <div id="story-author-preview-content-2358107" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/vuphanam" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2967949%2Fa2bd218d-a484-4b4d-bda0-0d9f9f311c65.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Vũ Phan Hoài Nam</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2967949,"className":"User","name":"Vũ Phan Hoài Nam"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2967949"></div> </div> </div> </div> </div> <a href="https://dev.to/vuphanam/backend-developer-43ni" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-26T13:21:46Z">Mar 26</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742995306"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/vuphanam/backend-developer-43ni" data-preload-image="" id="article-link-2358107"> Backend developer </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(126, 72, 16, 0.10); --tag-prefix: #7e4810; --tag-bg-hover: rgba(126, 72, 16, 0.10); --tag-prefix-hover: #7e4810; " href="/t/java"><span class="crayons-tag__prefix">#</span>java</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/vuphanam/backend-developer-43ni" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2358107" aria-label="Add a comment to post - Backend developer"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/vuphanam/backend-developer-43ni#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Backend developer"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a814js8omsqi4shd7y9nvpz9lcisgacp" class="crayons-icon"><title id="a814js8omsqi4shd7y9nvpz9lcisgacp">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> 2<span class="hidden s:inline"> comments</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2358107" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2358107" data-article-author-id="2967949" aria-label="Save post Backend developer to reading list" title="Save post Backend developer to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2353010" data-content-user-id="2562469"> <a href="https://dev.to/vs-borodin/directives-a-core-feature-of-the-angular-toolkit-4ak9" aria-labelledby="article-link-2353010" class="crayons-story__hidden-navigation-link">Directives: a core feature of the Angular toolkit</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/vs-borodin" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2562469%2F18d7b354-1254-4af6-9dd1-ceb343f7818f.jpeg" alt="vs-borodin profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/vs-borodin" class="crayons-story__secondary fw-medium m:hidden"> Vyacheslav Borodin </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2353010" aria-controls="story-author-preview-content-2353010" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Vyacheslav Borodin profile details"> Vyacheslav Borodin </button> <div id="story-author-preview-content-2353010" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/vs-borodin" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2562469%2F18d7b354-1254-4af6-9dd1-ceb343f7818f.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Vyacheslav Borodin</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2562469,"className":"User","name":"Vyacheslav Borodin"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2562469"></div> </div> </div> </div> </div> <a href="https://dev.to/vs-borodin/directives-a-core-feature-of-the-angular-toolkit-4ak9" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-24T07:51:23Z">Mar 24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742802683"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/vs-borodin/directives-a-core-feature-of-the-angular-toolkit-4ak9" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Favl7b6cbp1sh8qvvssx1.png" id="article-link-2353010"> Directives: a core feature of the Angular toolkit </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/vs-borodin/directives-a-core-feature-of-the-angular-toolkit-4ak9#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Directives: a core feature of the Angular toolkit"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="acgczpm233obiz244rs6o29go6g89ofm" class="crayons-icon"><title id="acgczpm233obiz244rs6o29go6g89ofm">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2353010" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2353010" data-article-author-id="2562469" aria-label="Save post Directives: a core feature of the Angular toolkit to reading list" title="Save post Directives: a core feature of the Angular toolkit to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2357164" data-content-user-id="2679182"> <a href="https://dev.to/dct_technology/why-single-page-applications-spas-are-taking-over-the-web-are-you-ready-4kk4" aria-labelledby="article-link-2357164" class="crayons-story__hidden-navigation-link">🚀 Why Single-Page Applications (SPAs) Are Taking Over the Web – Are You Ready?</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/dct_technology" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2679182%2Fd89d29d5-81f5-44f2-a48a-4af88dda49b9.jpg" alt="dct_technology profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/dct_technology" class="crayons-story__secondary fw-medium m:hidden"> DCT Technology Pvt. Ltd. </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2357164" aria-controls="story-author-preview-content-2357164" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="DCT Technology Pvt. Ltd. profile details"> DCT Technology Pvt. Ltd. </button> <div id="story-author-preview-content-2357164" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/dct_technology" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2679182%2Fd89d29d5-81f5-44f2-a48a-4af88dda49b9.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">DCT Technology Pvt. Ltd.</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2679182,"className":"User","name":"DCT Technology Pvt. Ltd."}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2679182"></div> </div> </div> </div> </div> <a href="https://dev.to/dct_technology/why-single-page-applications-spas-are-taking-over-the-web-are-you-ready-4kk4" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-26T05:47:03Z">Mar 26</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742968023"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/dct_technology/why-single-page-applications-spas-are-taking-over-the-web-are-you-ready-4kk4" data-preload-image="" id="article-link-2357164"> 🚀 Why Single-Page Applications (SPAs) Are Taking Over the Web – Are You Ready? </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/dct_technology/why-single-page-applications-spas-are-taking-over-the-web-are-you-ready-4kk4" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2357164" aria-label="Add a comment to post - 🚀 Why Single-Page Applications (SPAs) Are Taking Over the Web – Are You Ready?"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">6<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/dct_technology/why-single-page-applications-spas-are-taking-over-the-web-are-you-ready-4kk4#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 🚀 Why Single-Page Applications (SPAs) Are Taking Over the Web – Are You Ready?"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="anmfg558nmrfask2sz70cax4orfly1ii" class="crayons-icon"><title id="anmfg558nmrfask2sz70cax4orfly1ii">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2357164" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2357164" data-article-author-id="2679182" aria-label="Save post 🚀 Why Single-Page Applications (SPAs) Are Taking Over the Web – Are You Ready? to reading list" title="Save post 🚀 Why Single-Page Applications (SPAs) Are Taking Over the Web – Are You Ready? to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2357771" data-content-user-id="74283"> <a href="https://dev.to/altinselimi/creating-a-library-for-both-react-and-vue-1ljg" aria-labelledby="article-link-2357771" class="crayons-story__hidden-navigation-link">Creating a library for both React and Vue 🤝</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/altinselimi" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F74283%2Fddbae945-8e1d-42c2-a731-1614adc63db9.jpg" alt="altinselimi profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/altinselimi" class="crayons-story__secondary fw-medium m:hidden"> Altin Selimi </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2357771" aria-controls="story-author-preview-content-2357771" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Altin Selimi profile details"> Altin Selimi </button> <div id="story-author-preview-content-2357771" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/altinselimi" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F74283%2Fddbae945-8e1d-42c2-a731-1614adc63db9.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Altin Selimi</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":74283,"className":"User","name":"Altin Selimi"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="74283"></div> </div> </div> </div> </div> <a href="https://dev.to/altinselimi/creating-a-library-for-both-react-and-vue-1ljg" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-26T10:30:46Z">Mar 26</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742985046"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/altinselimi/creating-a-library-for-both-react-and-vue-1ljg" data-preload-image="" id="article-link-2357771"> Creating a library for both React and Vue 🤝 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/altinselimi/creating-a-library-for-both-react-and-vue-1ljg" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2357771" aria-label="Add a comment to post - Creating a library for both React and Vue 🤝"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/altinselimi/creating-a-library-for-both-react-and-vue-1ljg#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Creating a library for both React and Vue 🤝"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="amv53udrxngvrj2ekim41brmeoq8yoil" class="crayons-icon"><title id="amv53udrxngvrj2ekim41brmeoq8yoil">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> <button type="button" id="article-save-button-2357771" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2357771" data-article-author-id="74283" aria-label="Save post Creating a library for both React and Vue 🤝 to reading list" title="Save post Creating a library for both React and Vue 🤝 to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2347823" data-content-user-id="2675491"> <a href="https://dev.to/theodor_coin_4/choosing-the-right-frontend-framework-react-vs-vue-vs-angular-3igl" aria-labelledby="article-link-2347823" class="crayons-story__hidden-navigation-link">Choosing the Right Frontend Framework: React vs Vue vs Angular</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/theodor_coin_4" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2675491%2F4faf2c49-96df-403f-b77b-5f311d2c191b.jpg" alt="theodor_coin_4 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/theodor_coin_4" class="crayons-story__secondary fw-medium m:hidden"> Theodor Coin </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2347823" aria-controls="story-author-preview-content-2347823" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Theodor Coin profile details"> Theodor Coin </button> <div id="story-author-preview-content-2347823" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/theodor_coin_4" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2675491%2F4faf2c49-96df-403f-b77b-5f311d2c191b.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Theodor Coin</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2675491,"className":"User","name":"Theodor Coin"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2675491"></div> </div> </div> </div> </div> <a href="https://dev.to/theodor_coin_4/choosing-the-right-frontend-framework-react-vs-vue-vs-angular-3igl" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-21T10:04:09Z">Mar 21</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742551449"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/theodor_coin_4/choosing-the-right-frontend-framework-react-vs-vue-vs-angular-3igl" data-preload-image="" id="article-link-2347823"> Choosing the Right Frontend Framework: React vs Vue vs Angular </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(169, 2, 42, 0.10); --tag-prefix: #A9022A; --tag-bg-hover: rgba(169, 2, 42, 0.10); --tag-prefix-hover: #A9022A; " href="/t/angular"><span class="crayons-tag__prefix">#</span>angular</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/theodor_coin_4/choosing-the-right-frontend-framework-react-vs-vue-vs-angular-3igl#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Choosing the Right Frontend Framework: React vs Vue vs Angular"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="arrkz91dwb4zwq9rqehefa5t5k7g5q8k" class="crayons-icon"><title id="arrkz91dwb4zwq9rqehefa5t5k7g5q8k">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2347823" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2347823" data-article-author-id="2675491" aria-label="Save post Choosing the Right Frontend Framework: React vs Vue vs Angular to reading list" title="Save post Choosing the Right Frontend Framework: React vs Vue vs Angular to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2343849" data-content-user-id="2958432"> <a href="https://dev.to/stuartromanek/apostrophecms-4140-smarter-content-management-better-performance-and-csv-table-imports-4o3p" aria-labelledby="article-link-2343849" class="crayons-story__hidden-navigation-link">ApostropheCMS 4.14.0: Smarter Content Management, Better Performance, and CSV Table Imports</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/stuartromanek" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2958432%2Fba16a2cd-eae3-4c30-b801-e8bc6218c7f8.jpg" alt="stuartromanek profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/stuartromanek" class="crayons-story__secondary fw-medium m:hidden"> stuart </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2343849" aria-controls="story-author-preview-content-2343849" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="stuart profile details"> stuart </button> <div id="story-author-preview-content-2343849" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/stuartromanek" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2958432%2Fba16a2cd-eae3-4c30-b801-e8bc6218c7f8.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">stuart</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2958432,"className":"User","name":"stuart"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2958432"></div> </div> </div> </div> </div> <a href="https://dev.to/stuartromanek/apostrophecms-4140-smarter-content-management-better-performance-and-csv-table-imports-4o3p" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-19T18:41:31Z">Mar 19</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742409691"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/stuartromanek/apostrophecms-4140-smarter-content-management-better-performance-and-csv-table-imports-4o3p" data-preload-image="" id="article-link-2343849"> ApostropheCMS 4.14.0: Smarter Content Management, Better Performance, and CSV Table Imports </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(38, 190, 0, 0.10); --tag-prefix: #26BE00; --tag-bg-hover: rgba(38, 190, 0, 0.10); --tag-prefix-hover: #26BE00; " href="/t/opensource"><span class="crayons-tag__prefix">#</span>opensource</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/stuartromanek/apostrophecms-4140-smarter-content-management-better-performance-and-csv-table-imports-4o3p#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - ApostropheCMS 4.14.0: Smarter Content Management, Better Performance, and CSV Table Imports"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a3jxvj25wwli7u7cmoq6gy97v3a1u6ng" class="crayons-icon"><title id="a3jxvj25wwli7u7cmoq6gy97v3a1u6ng">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2343849" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2343849" data-article-author-id="2958432" aria-label="Save post ApostropheCMS 4.14.0: Smarter Content Management, Better Performance, and CSV Table Imports to reading list" title="Save post ApostropheCMS 4.14.0: Smarter Content Management, Better Performance, and CSV Table Imports to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2342834" data-content-user-id="255307"> <a href="https://dev.to/ma7moudat_me/announcing-karagoz-sandbox-h67" aria-labelledby="article-link-2342834" class="crayons-story__hidden-navigation-link">Announcing Karagöz Sandbox</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/ma7moudat_me" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F255307%2F4372685b-c437-4583-8d76-0e28748d6751.jpeg" alt="ma7moudat_me profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/ma7moudat_me" class="crayons-story__secondary fw-medium m:hidden"> Mahmoud </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2342834" aria-controls="story-author-preview-content-2342834" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Mahmoud profile details"> Mahmoud </button> <div id="story-author-preview-content-2342834" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/ma7moudat_me" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F255307%2F4372685b-c437-4583-8d76-0e28748d6751.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Mahmoud</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":255307,"className":"User","name":"Mahmoud"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="255307"></div> </div> </div> </div> </div> <a href="https://dev.to/ma7moudat_me/announcing-karagoz-sandbox-h67" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-19T11:13:42Z">Mar 19</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742382822"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/ma7moudat_me/announcing-karagoz-sandbox-h67" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fiopxrbb3vsefk9ypr6ow.png" id="article-link-2342834"> Announcing Karagöz Sandbox </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/webcontainer"><span class="crayons-tag__prefix">#</span>webcontainer</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/sandbox"><span class="crayons-tag__prefix">#</span>sandbox</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/ma7moudat_me/announcing-karagoz-sandbox-h67#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Announcing Karagöz Sandbox"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aq2itetybwgdhgtfac1xbqly2jxv0lf4" class="crayons-icon"><title id="aq2itetybwgdhgtfac1xbqly2jxv0lf4">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2342834" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2342834" data-article-author-id="255307" aria-label="Save post Announcing Karagöz Sandbox to reading list" title="Save post Announcing Karagöz Sandbox to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2342544" data-content-user-id="1806519"> <a href="https://dev.to/ramiahmed68/what-is-vuejs-54fg" aria-labelledby="article-link-2342544" class="crayons-story__hidden-navigation-link">What is vue.js 🌱</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/ramiahmed68" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1806519%2F806cf717-814e-41b8-a098-d17f5c3b49d7.jpg" alt="ramiahmed68 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/ramiahmed68" class="crayons-story__secondary fw-medium m:hidden"> ramiahmed68 </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2342544" aria-controls="story-author-preview-content-2342544" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="ramiahmed68 profile details"> ramiahmed68 </button> <div id="story-author-preview-content-2342544" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/ramiahmed68" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1806519%2F806cf717-814e-41b8-a098-d17f5c3b49d7.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">ramiahmed68</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1806519,"className":"User","name":"ramiahmed68"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1806519"></div> </div> </div> </div> </div> <a href="https://dev.to/ramiahmed68/what-is-vuejs-54fg" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-19T08:11:04Z">Mar 19</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742371864"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/ramiahmed68/what-is-vuejs-54fg" data-preload-image="" id="article-link-2342544"> What is vue.js 🌱 </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/ramiahmed68/what-is-vuejs-54fg#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - What is vue.js 🌱"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aa4bukcxeqpr9k86203bj43shm80u9ni" class="crayons-icon"><title id="aa4bukcxeqpr9k86203bj43shm80u9ni">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2342544" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2342544" data-article-author-id="1806519" aria-label="Save post What is vue.js 🌱 to reading list" title="Save post What is vue.js 🌱 to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2343203" data-content-user-id="2957046"> <a href="https://dev.to/vasiliygroo/managing-emulatorjs-lifecycle-in-nuxtjs-with-iframes-3fl4" aria-labelledby="article-link-2343203" class="crayons-story__hidden-navigation-link">Managing EmulatorJS Lifecycle in Nuxt.js with iframes</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/vasiliygroo" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2957046%2F35eb482b-45f3-426e-85e1-8ae2183abc6d.jpeg" alt="vasiliygroo profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/vasiliygroo" class="crayons-story__secondary fw-medium m:hidden"> Vasiliy Grudinin </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2343203" aria-controls="story-author-preview-content-2343203" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Vasiliy Grudinin profile details"> Vasiliy Grudinin </button> <div id="story-author-preview-content-2343203" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/vasiliygroo" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2957046%2F35eb482b-45f3-426e-85e1-8ae2183abc6d.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Vasiliy Grudinin</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2957046,"className":"User","name":"Vasiliy Grudinin"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2957046"></div> </div> </div> </div> </div> <a href="https://dev.to/vasiliygroo/managing-emulatorjs-lifecycle-in-nuxtjs-with-iframes-3fl4" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-19T12:55:01Z">Mar 19</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742388901"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/vasiliygroo/managing-emulatorjs-lifecycle-in-nuxtjs-with-iframes-3fl4" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8g33szjlfx3zvb81umwv.png" id="article-link-2343203"> Managing EmulatorJS Lifecycle in Nuxt.js with iframes </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/emulatorjs"><span class="crayons-tag__prefix">#</span>emulatorjs</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(5, 4, 56, 0.10); --tag-prefix: #050438; --tag-bg-hover: rgba(5, 4, 56, 0.10); --tag-prefix-hover: #050438; " href="/t/nuxt"><span class="crayons-tag__prefix">#</span>nuxt</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/vasiliygroo/managing-emulatorjs-lifecycle-in-nuxtjs-with-iframes-3fl4#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Managing EmulatorJS Lifecycle in Nuxt.js with iframes"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ardoofp8zkws38ey35tq9lj6vuu9viut" class="crayons-icon"><title id="ardoofp8zkws38ey35tq9lj6vuu9viut">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 3 min read </small> <button type="button" id="article-save-button-2343203" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2343203" data-article-author-id="2957046" aria-label="Save post Managing EmulatorJS Lifecycle in Nuxt.js with iframes to reading list" title="Save post Managing EmulatorJS Lifecycle in Nuxt.js with iframes to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2347278" data-content-user-id="2962460"> <a href="https://dev.to/super_man_d2727748efe0896/beautiful-open-source-background-system-template-1oej" aria-labelledby="article-link-2347278" class="crayons-story__hidden-navigation-link">Beautiful open source background system template</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/super_man_d2727748efe0896" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2962460%2F7bcdb459-2cea-45d8-8f35-8c9a0e0d1e19.jpeg" alt="super_man_d2727748efe0896 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/super_man_d2727748efe0896" class="crayons-story__secondary fw-medium m:hidden"> Ricky </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2347278" aria-controls="story-author-preview-content-2347278" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Ricky profile details"> Ricky </button> <div id="story-author-preview-content-2347278" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/super_man_d2727748efe0896" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2962460%2F7bcdb459-2cea-45d8-8f35-8c9a0e0d1e19.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Ricky</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2962460,"className":"User","name":"Ricky"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2962460"></div> </div> </div> </div> </div> <a href="https://dev.to/super_man_d2727748efe0896/beautiful-open-source-background-system-template-1oej" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-21T06:09:38Z">Mar 21</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742537378"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/super_man_d2727748efe0896/beautiful-open-source-background-system-template-1oej" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Figt60f8ni1hqwl67zokj.png" id="article-link-2347278"> Beautiful open source background system template </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(35, 74, 132, 0.10); --tag-prefix: #234A84; --tag-bg-hover: rgba(35, 74, 132, 0.10); --tag-prefix-hover: #234A84; " href="/t/typescript"><span class="crayons-tag__prefix">#</span>typescript</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/super_man_d2727748efe0896/beautiful-open-source-background-system-template-1oej#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Beautiful open source background system template"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="atcyk21sud042slbdqvwr01io3glklby" class="crayons-icon"><title id="atcyk21sud042slbdqvwr01io3glklby">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2347278" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2347278" data-article-author-id="2962460" aria-label="Save post Beautiful open source background system template to reading list" title="Save post Beautiful open source background system template to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2343857" data-content-user-id="623115"> <a href="https://dev.to/apfirebolt/deploy-your-mevn-mongodb-express-vue-and-node-application-on-a-server-using-docker-and-262c" aria-labelledby="article-link-2343857" class="crayons-story__hidden-navigation-link">Deploy your MEVN (MongoDB, Express, Vue and Node) application on a server using Docker and Docker-compose</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/apfirebolt" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F623115%2F0e030598-8d70-4d1b-b922-b068efcfb28b.png" alt="apfirebolt profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/apfirebolt" class="crayons-story__secondary fw-medium m:hidden"> Lightning Bolt </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2343857" aria-controls="story-author-preview-content-2343857" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Lightning Bolt profile details"> Lightning Bolt </button> <div id="story-author-preview-content-2343857" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/apfirebolt" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F623115%2F0e030598-8d70-4d1b-b922-b068efcfb28b.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Lightning Bolt</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":623115,"className":"User","name":"Lightning Bolt"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="623115"></div> </div> </div> </div> </div> <a href="https://dev.to/apfirebolt/deploy-your-mevn-mongodb-express-vue-and-node-application-on-a-server-using-docker-and-262c" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-19T19:52:52Z">Mar 19</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742413972"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/apfirebolt/deploy-your-mevn-mongodb-express-vue-and-node-application-on-a-server-using-docker-and-262c" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy7dic7d3jlcnxg6jjebs.jpeg" id="article-link-2343857"> Deploy your MEVN (MongoDB, Express, Vue and Node) application on a server using Docker and Docker-compose </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(29, 99, 237, 0.10); --tag-prefix: #1D63ED; --tag-bg-hover: rgba(29, 99, 237, 0.10); --tag-prefix-hover: #1D63ED; " href="/t/docker"><span class="crayons-tag__prefix">#</span>docker</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/express"><span class="crayons-tag__prefix">#</span>express</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/apfirebolt/deploy-your-mevn-mongodb-express-vue-and-node-application-on-a-server-using-docker-and-262c#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Deploy your MEVN (MongoDB, Express, Vue and Node) application on a server using Docker and Docker-compose"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a6rzy0mpr5zslf6075jrcms9t53u4ci1" class="crayons-icon"><title id="a6rzy0mpr5zslf6075jrcms9t53u4ci1">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> <button type="button" id="article-save-button-2343857" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2343857" data-article-author-id="623115" aria-label="Save post Deploy your MEVN (MongoDB, Express, Vue and Node) application on a server using Docker and Docker-compose to reading list" title="Save post Deploy your MEVN (MongoDB, Express, Vue and Node) application on a server using Docker and Docker-compose to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2343723" data-content-user-id="1260302"> <a href="https://dev.to/heltonbrito/nuxt3-e-daisyui-3n6f" aria-labelledby="article-link-2343723" class="crayons-story__hidden-navigation-link">Nuxt3 e DaisyUi</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/heltonbrito" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1260302%2F2d107389-95ab-4387-8739-fa27d100ecaa.png" alt="heltonbrito profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/heltonbrito" class="crayons-story__secondary fw-medium m:hidden"> Helton Carlos Brito Silva </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2343723" aria-controls="story-author-preview-content-2343723" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Helton Carlos Brito Silva profile details"> Helton Carlos Brito Silva </button> <div id="story-author-preview-content-2343723" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/heltonbrito" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1260302%2F2d107389-95ab-4387-8739-fa27d100ecaa.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Helton Carlos Brito Silva</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1260302,"className":"User","name":"Helton Carlos Brito Silva"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1260302"></div> </div> </div> </div> </div> <a href="https://dev.to/heltonbrito/nuxt3-e-daisyui-3n6f" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-19T17:22:01Z">Mar 19</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742404921"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/heltonbrito/nuxt3-e-daisyui-3n6f" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fppuep33v1wnklzjr6ftd.png" id="article-link-2343723"> Nuxt3 e DaisyUi </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 0, 0, 0.10); --tag-prefix: #000000; --tag-bg-hover: rgba(0, 0, 0, 0.10); --tag-prefix-hover: #000000; " href="/t/tailwindcss"><span class="crayons-tag__prefix">#</span>tailwindcss</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(5, 4, 56, 0.10); --tag-prefix: #050438; --tag-bg-hover: rgba(5, 4, 56, 0.10); --tag-prefix-hover: #050438; " href="/t/nuxt"><span class="crayons-tag__prefix">#</span>nuxt</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/heltonbrito/nuxt3-e-daisyui-3n6f#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Nuxt3 e DaisyUi"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a3f858se8b2fofrr4142mukt8bhdjjpm" class="crayons-icon"><title id="a3f858se8b2fofrr4142mukt8bhdjjpm">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2343723" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2343723" data-article-author-id="1260302" aria-label="Save post Nuxt3 e DaisyUi to reading list" title="Save post Nuxt3 e DaisyUi to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2342984" data-content-user-id="2957407"> <a href="https://dev.to/showinbuaoye/im-new-here-please-take-care-of-me-3fjd" aria-labelledby="article-link-2342984" class="crayons-story__hidden-navigation-link">I'm new here, please take care of me</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/showinbuaoye" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2957407%2Ff84ccb07-bed0-42c7-9a75-818006490038.png" alt="showinbuaoye profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/showinbuaoye" class="crayons-story__secondary fw-medium m:hidden"> Silvia </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2342984" aria-controls="story-author-preview-content-2342984" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Silvia profile details"> Silvia </button> <div id="story-author-preview-content-2342984" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/showinbuaoye" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2957407%2Ff84ccb07-bed0-42c7-9a75-818006490038.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Silvia</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2957407,"className":"User","name":"Silvia"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2957407"></div> </div> </div> </div> </div> <a href="https://dev.to/showinbuaoye/im-new-here-please-take-care-of-me-3fjd" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-19T10:59:27Z">Mar 19</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742381967"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/showinbuaoye/im-new-here-please-take-care-of-me-3fjd" data-preload-image="" id="article-link-2342984"> I'm new here, please take care of me </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--filled " style=" --tag-bg: rgba(255, 50, 50, 0.10); --tag-prefix: #ff3232; --tag-bg-hover: rgba(255, 50, 50, 0.10); --tag-prefix-hover: #ff3232; " href="/t/help"><span class="crayons-tag__prefix">#</span>help</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 51, 224, 0.10); --tag-prefix: #ff33e0; --tag-bg-hover: rgba(255, 51, 224, 0.10); --tag-prefix-hover: #ff33e0; " href="/t/frontend"><span class="crayons-tag__prefix">#</span>frontend</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/showinbuaoye/im-new-here-please-take-care-of-me-3fjd" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2342984" aria-label="Add a comment to post - I'm new here, please take care of me"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">3<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/showinbuaoye/im-new-here-please-take-care-of-me-3fjd#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - I'm new here, please take care of me"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a5mb8hev0vd5rk0g43b2h3zkgt9zp0l" class="crayons-icon"><title id="a5mb8hev0vd5rk0g43b2h3zkgt9zp0l">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2342984" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2342984" data-article-author-id="2957407" aria-label="Save post I'm new here, please take care of me to reading list" title="Save post I'm new here, please take care of me to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2330947" data-content-user-id="2940014"> <a href="https://dev.to/amttawsik/pixel-perfect-figma-to-vue-3-nuxt-3-tailwind-css-integration-5blo" aria-labelledby="article-link-2330947" class="crayons-story__hidden-navigation-link">Pixel-Perfect Figma to Vue 3 & Nuxt 3: Tailwind CSS Integration</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/amttawsik" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2940014%2F3504918e-49b4-49c8-92ac-e98807b1a87a.jpg" alt="amttawsik profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/amttawsik" class="crayons-story__secondary fw-medium m:hidden"> Abdullah Al Mubin </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2330947" aria-controls="story-author-preview-content-2330947" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Abdullah Al Mubin profile details"> Abdullah Al Mubin </button> <div id="story-author-preview-content-2330947" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/amttawsik" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2940014%2F3504918e-49b4-49c8-92ac-e98807b1a87a.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Abdullah Al Mubin</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2940014,"className":"User","name":"Abdullah Al Mubin"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2940014"></div> </div> </div> </div> </div> <a href="https://dev.to/amttawsik/pixel-perfect-figma-to-vue-3-nuxt-3-tailwind-css-integration-5blo" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-13T15:31:13Z">Mar 13</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1741879873"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/amttawsik/pixel-perfect-figma-to-vue-3-nuxt-3-tailwind-css-integration-5blo" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsm5rvggcjb5hulshn20v.png" id="article-link-2330947"> Pixel-Perfect Figma to Vue 3 & Nuxt 3: Tailwind CSS Integration </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/bestvuedeveloper"><span class="crayons-tag__prefix">#</span>bestvuedeveloper</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/bestnuxtdeveloper"><span class="crayons-tag__prefix">#</span>bestnuxtdeveloper</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(5, 4, 56, 0.10); --tag-prefix: #050438; --tag-bg-hover: rgba(5, 4, 56, 0.10); --tag-prefix-hover: #050438; " href="/t/nuxt"><span class="crayons-tag__prefix">#</span>nuxt</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/amttawsik/pixel-perfect-figma-to-vue-3-nuxt-3-tailwind-css-integration-5blo#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Pixel-Perfect Figma to Vue 3 & Nuxt 3: Tailwind CSS Integration"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a6ok20r8545canr28hdncs4les5igp6g" class="crayons-icon"><title id="a6ok20r8545canr28hdncs4les5igp6g">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2330947" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2330947" data-article-author-id="2940014" aria-label="Save post Pixel-Perfect Figma to Vue 3 & Nuxt 3: Tailwind CSS Integration to reading list" title="Save post Pixel-Perfect Figma to Vue 3 & Nuxt 3: Tailwind CSS Integration to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2338318" data-content-user-id="2951023"> <a href="https://dev.to/envbro/gym-bro-app-1aha" aria-labelledby="article-link-2338318" class="crayons-story__hidden-navigation-link">Gym Bro App</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/envbro" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2951023%2F2f03b0e4-f3f7-4d59-af4d-4cd13ec0912c.png" alt="envbro profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/envbro" class="crayons-story__secondary fw-medium m:hidden"> Сергей Молоков </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2338318" aria-controls="story-author-preview-content-2338318" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Сергей Молоков profile details"> Сергей Молоков </button> <div id="story-author-preview-content-2338318" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/envbro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2951023%2F2f03b0e4-f3f7-4d59-af4d-4cd13ec0912c.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Сергей Молоков</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2951023,"className":"User","name":"Сергей Молоков"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2951023"></div> </div> </div> </div> </div> <a href="https://dev.to/envbro/gym-bro-app-1aha" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-17T16:28:01Z">Mar 17</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742228881"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/envbro/gym-bro-app-1aha" data-preload-image="" id="article-link-2338318"> Gym Bro App </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(5, 4, 56, 0.10); --tag-prefix: #050438; --tag-bg-hover: rgba(5, 4, 56, 0.10); --tag-prefix-hover: #050438; " href="/t/nuxt"><span class="crayons-tag__prefix">#</span>nuxt</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/tma"><span class="crayons-tag__prefix">#</span>tma</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/gym"><span class="crayons-tag__prefix">#</span>gym</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/envbro/gym-bro-app-1aha" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2338318" aria-label="Add a comment to post - Gym Bro App"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">1<span class="hidden s:inline"> reaction</span></span> </div> </a> <a href="https://dev.to/envbro/gym-bro-app-1aha#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Gym Bro App"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="algw6kpy6d2oxdvsd8pfotucc53he7ek" class="crayons-icon"><title id="algw6kpy6d2oxdvsd8pfotucc53he7ek">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2338318" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2338318" data-article-author-id="2951023" aria-label="Save post Gym Bro App to reading list" title="Save post Gym Bro App to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2352613" data-content-user-id="1316554"> <a href="https://dev.to/doantrongnam/wrapping-primevue-components-tips-for-a-better-developer-experience-2lja" aria-labelledby="article-link-2352613" class="crayons-story__hidden-navigation-link">Wrapping PrimeVue Components: Tips for a Better Developer Experience</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/doantrongnam" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1316554%2Fdb28baa3-db07-4b6c-88f8-1ad5d03ff9f2.jpeg" alt="doantrongnam profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/doantrongnam" class="crayons-story__secondary fw-medium m:hidden"> Doan Trong Nam </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2352613" aria-controls="story-author-preview-content-2352613" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Doan Trong Nam profile details"> Doan Trong Nam </button> <div id="story-author-preview-content-2352613" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/doantrongnam" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1316554%2Fdb28baa3-db07-4b6c-88f8-1ad5d03ff9f2.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Doan Trong Nam</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1316554,"className":"User","name":"Doan Trong Nam"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1316554"></div> </div> </div> </div> </div> <a href="https://dev.to/doantrongnam/wrapping-primevue-components-tips-for-a-better-developer-experience-2lja" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-24T04:19:13Z">Mar 24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742789953"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/doantrongnam/wrapping-primevue-components-tips-for-a-better-developer-experience-2lja" data-preload-image="" id="article-link-2352613"> Wrapping PrimeVue Components: Tips for a Better Developer Experience </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(5, 4, 56, 0.10); --tag-prefix: #050438; --tag-bg-hover: rgba(5, 4, 56, 0.10); --tag-prefix-hover: #050438; " href="/t/nuxt"><span class="crayons-tag__prefix">#</span>nuxt</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/primevue"><span class="crayons-tag__prefix">#</span>primevue</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(137, 6, 6, 0.10); --tag-prefix: #890606; --tag-bg-hover: rgba(137, 6, 6, 0.10); --tag-prefix-hover: #890606; " href="/t/programming"><span class="crayons-tag__prefix">#</span>programming</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/doantrongnam/wrapping-primevue-components-tips-for-a-better-developer-experience-2lja" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2352613" aria-label="Add a comment to post - Wrapping PrimeVue Components: Tips for a Better Developer Experience"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">6<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/doantrongnam/wrapping-primevue-components-tips-for-a-better-developer-experience-2lja#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Wrapping PrimeVue Components: Tips for a Better Developer Experience"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aktjxsbn4jaglq4n9ac44s314b70pjzz" class="crayons-icon"><title id="aktjxsbn4jaglq4n9ac44s314b70pjzz">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> <button type="button" id="article-save-button-2352613" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2352613" data-article-author-id="1316554" aria-label="Save post Wrapping PrimeVue Components: Tips for a Better Developer Experience to reading list" title="Save post Wrapping PrimeVue Components: Tips for a Better Developer Experience to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2352713" data-content-user-id="1555182"> <a href="https://dev.to/syed_mudasseranayat_e251/react-vs-vue-which-javascript-framework-should-you-choose-in-2025-452m" aria-labelledby="article-link-2352713" class="crayons-story__hidden-navigation-link">React vs. Vue: Which JavaScript Framework Should You Choose in 2025?</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/syed_mudasseranayat_e251" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1555182%2Fc578e90f-b53c-4f17-8ac6-abf28993d770.png" alt="syed_mudasseranayat_e251 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/syed_mudasseranayat_e251" class="crayons-story__secondary fw-medium m:hidden"> Syed Mudasser Anayat </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2352713" aria-controls="story-author-preview-content-2352713" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Syed Mudasser Anayat profile details"> Syed Mudasser Anayat </button> <div id="story-author-preview-content-2352713" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/syed_mudasseranayat_e251" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1555182%2Fc578e90f-b53c-4f17-8ac6-abf28993d770.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Syed Mudasser Anayat</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1555182,"className":"User","name":"Syed Mudasser Anayat"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1555182"></div> </div> </div> </div> </div> <a href="https://dev.to/syed_mudasseranayat_e251/react-vs-vue-which-javascript-framework-should-you-choose-in-2025-452m" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-24T04:55:02Z">Mar 24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1742792102"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/syed_mudasseranayat_e251/react-vs-vue-which-javascript-framework-should-you-choose-in-2025-452m" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr8anwpem54x9nj8ahkho.jpg" id="article-link-2352713"> React vs. Vue: Which JavaScript Framework Should You Choose in 2025? </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(247, 223, 30, 0.10); --tag-prefix: #f7df1e; --tag-bg-hover: rgba(247, 223, 30, 0.10); --tag-prefix-hover: #f7df1e; " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(34, 34, 34, 0.10); --tag-prefix: #222222; --tag-bg-hover: rgba(34, 34, 34, 0.10); --tag-prefix-hover: #222222; " href="/t/react"><span class="crayons-tag__prefix">#</span>react</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(86, 39, 101, 0.10); --tag-prefix: #562765; --tag-bg-hover: rgba(86, 39, 101, 0.10); --tag-prefix-hover: #562765; " href="/t/webdev"><span class="crayons-tag__prefix">#</span>webdev</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/syed_mudasseranayat_e251/react-vs-vue-which-javascript-framework-should-you-choose-in-2025-452m" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2352713" aria-label="Add a comment to post - React vs. Vue: Which JavaScript Framework Should You Choose in 2025?"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container" dir="rtl"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> </span> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> </span> </span> <span class="aggregate_reactions_counter">2<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/syed_mudasseranayat_e251/react-vs-vue-which-javascript-framework-should-you-choose-in-2025-452m#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - React vs. Vue: Which JavaScript Framework Should You Choose in 2025?"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="arqzlebzmi1hbg3ppi3tqknot23mgqkx" class="crayons-icon"><title id="arqzlebzmi1hbg3ppi3tqknot23mgqkx">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <button type="button" id="article-save-button-2352713" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2352713" data-article-author-id="1555182" aria-label="Save post React vs. Vue: Which JavaScript Framework Should You Choose in 2025? to reading list" title="Save post React vs. Vue: Which JavaScript Framework Should You Choose in 2025? to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2315019" data-content-user-id="1841187"> <a href="https://dev.to/well_babayagadev/uso-de-padding-e-margin-no-quasar-framework-h6g" aria-labelledby="article-link-2315019" class="crayons-story__hidden-navigation-link">Uso de Padding e Margin no Quasar Framework</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/well_babayagadev" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1841187%2F72af0359-ec5c-45be-bd88-dab5c16d9641.jpg" alt="well_babayagadev profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/well_babayagadev" class="crayons-story__secondary fw-medium m:hidden"> Wellington Santos </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2315019" aria-controls="story-author-preview-content-2315019" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Wellington Santos profile details"> Wellington Santos </button> <div id="story-author-preview-content-2315019" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/well_babayagadev" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1841187%2F72af0359-ec5c-45be-bd88-dab5c16d9641.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Wellington Santos</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1841187,"className":"User","name":"Wellington Santos"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1841187"></div> </div> </div> </div> </div> <a href="https://dev.to/well_babayagadev/uso-de-padding-e-margin-no-quasar-framework-h6g" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-06T14:04:03Z">Mar 6</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1741269843"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/well_babayagadev/uso-de-padding-e-margin-no-quasar-framework-h6g" data-preload-image="" id="article-link-2315019"> Uso de Padding e Margin no Quasar Framework </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/well_babayagadev/uso-de-padding-e-margin-no-quasar-framework-h6g#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Uso de Padding e Margin no Quasar Framework"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="apg1kngxuo6wujsbgfxdn0hfqdvryxft" class="crayons-icon"><title id="apg1kngxuo6wujsbgfxdn0hfqdvryxft">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2315019" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2315019" data-article-author-id="1841187" aria-label="Save post Uso de Padding e Margin no Quasar Framework to reading list" title="Save post Uso de Padding e Margin no Quasar Framework to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2310175" data-content-user-id="2899353"> <a href="https://dev.to/programmerhasan/how-to-build-a-json-api-with-laravel-and-vuejs-1d4d" aria-labelledby="article-link-2310175" class="crayons-story__hidden-navigation-link">How to Build a JSON API with Laravel and Vue.js</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/programmerhasan" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2899353%2F84aa7859-8b2a-4489-9c99-e14a8328964b.jpg" alt="programmerhasan profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/programmerhasan" class="crayons-story__secondary fw-medium m:hidden"> Mehedi Hasan </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2310175" aria-controls="story-author-preview-content-2310175" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Mehedi Hasan profile details"> Mehedi Hasan </button> <div id="story-author-preview-content-2310175" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/programmerhasan" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2899353%2F84aa7859-8b2a-4489-9c99-e14a8328964b.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Mehedi Hasan</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":2899353,"className":"User","name":"Mehedi Hasan"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2899353"></div> </div> </div> </div> </div> <a href="https://dev.to/programmerhasan/how-to-build-a-json-api-with-laravel-and-vuejs-1d4d" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-06T10:19:00Z">Mar 6</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1741256340"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/programmerhasan/how-to-build-a-json-api-with-laravel-and-vuejs-1d4d" data-preload-image="" id="article-link-2310175"> How to Build a JSON API with Laravel and Vue.js </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(220, 45, 23, 0.10); --tag-prefix: #dc2d17; --tag-bg-hover: rgba(220, 45, 23, 0.10); --tag-prefix-hover: #dc2d17; " href="/t/laravel"><span class="crayons-tag__prefix">#</span>laravel</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/jsonapi"><span class="crayons-tag__prefix">#</span>jsonapi</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/programmerhasan/how-to-build-a-json-api-with-laravel-and-vuejs-1d4d#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - How to Build a JSON API with Laravel and Vue.js"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="anr72jmj9ulw695l6hyrnv3gelohl06x" class="crayons-icon"><title id="anr72jmj9ulw695l6hyrnv3gelohl06x">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 4 min read </small> <button type="button" id="article-save-button-2310175" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2310175" data-article-author-id="2899353" aria-label="Save post How to Build a JSON API with Laravel and Vue.js to reading list" title="Save post How to Build a JSON API with Laravel and Vue.js to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="crayons-story " data-feed-content-id="2313973" data-content-user-id="1978603"> <a href="https://dev.to/xuyimingwork/help-looking-for-best-practice-in-v-model-binding-a-object-44l0" aria-labelledby="article-link-2313973" class="crayons-story__hidden-navigation-link">[HELP] Looking for best practice in v-model binding a object</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/xuyimingwork" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1978603%2F28d2355e-f7c5-409d-ad28-b6d1d632fd83.png" alt="xuyimingwork profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/xuyimingwork" class="crayons-story__secondary fw-medium m:hidden"> xuyimingwork </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2313973" aria-controls="story-author-preview-content-2313973" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="xuyimingwork profile details"> xuyimingwork </button> <div id="story-author-preview-content-2313973" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0" style="border-top-color: var(--card-color);" data-repositioning-dropdown="true" data-testid="profile-preview-card"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/xuyimingwork" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1978603%2F28d2355e-f7c5-409d-ad28-b6d1d632fd83.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">xuyimingwork</span> </a> </div> <div class="print-hidden"> <button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info='{"style":"full","id":1978603,"className":"User","name":"xuyimingwork"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1978603"></div> </div> </div> </div> </div> <a href="https://dev.to/xuyimingwork/help-looking-for-best-practice-in-v-model-binding-a-object-44l0" class="crayons-story__tertiary fs-xs"><time datetime="2025-03-06T02:29:20Z">Mar 6</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1741228160"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/xuyimingwork/help-looking-for-best-practice-in-v-model-binding-a-object-44l0" data-preload-image="" id="article-link-2313973"> [HELP] Looking for best practice in v-model binding a object </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(65, 184, 131, 0.10); --tag-prefix: #41b883; --tag-bg-hover: rgba(65, 184, 131, 0.10); --tag-prefix-hover: #41b883; " href="/t/vue"><span class="crayons-tag__prefix">#</span>vue</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/xuyimingwork/help-looking-for-best-practice-in-v-model-binding-a-object-44l0#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - [HELP] Looking for best practice in v-model binding a object"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aic44bjwg60jlwcxi5ubtafsphxff9bv" class="crayons-icon"><title id="aic44bjwg60jlwcxi5ubtafsphxff9bv">Comments</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 1 min read </small> <button type="button" id="article-save-button-2313973" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2313973" data-article-author-id="1978603" aria-label="Save post [HELP] Looking for best practice in v-model binding a object to reading list" title="Save post [HELP] Looking for best practice in v-model binding a object to reading list"> <span class="bm-initial"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75zM16.5 6h-9v11.574l4.5-2.82 4.5 2.82V6z"></path></svg> </span> <span class="bm-success"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true"><path d="M6.75 4.5h10.5a.75.75 0 01.75.75v14.357a.375.375 0 01-.575.318L12 16.523l-5.426 3.401A.375.375 0 016 19.607V5.25a.75.75 0 01.75-.75z"></path></svg> </span> </button> </div> </div> </div> </div> </div> <div class="placeholder-div"></div> <div class="single-article-small-pic" id="article-index-hidden-div" style="display:none"></div> </div> <div class="loading-articles" id="loading-articles"> loading... </div> </main> <div id="sidebar-wrapper-right" class="sidebar-wrapper sidebar-wrapper-right"> <div class="sidebar-bg" id="sidebar-bg-right"></div> <aside class="side-bar sidebar-additional showing" id="sidebar-additional"> <div class="widget"> <header> <h4>trending guides/resources</h4> </header> <div class="widget-body"> <div class="widget-link-list"> <a class="crayons-link crayons-link--contentful" href="/holasoymalva/stop-using-typescript-for-small-projects-47hl"> Why Stop Using TypeScript for Small Projects? </a> <a class="crayons-link crayons-link--contentful" href="/osalumense/install-tailwind-css-v4-in-a-vue-3-vite-project-319g"> Install Tailwind CSS v4 in a Vue 3 + Vite Project </a> <a class="crayons-link crayons-link--contentful" href="/9haroon/what-are-pdfjs-layers-and-how-you-can-use-them-in-vuejs-1454"> What are PDF.js Layers and How You Can Use them in Vue.js </a> <a class="crayons-link crayons-link--contentful" href="/jacobandrewsky/handling-large-lists-efficiently-in-vue-3-4im1"> Handling large lists efficiently in Vue 3 </a> <a class="crayons-link crayons-link--contentful" href="/jacobandrewsky/blazingly-fast-e-commerce-in-nuxt-2gaa"> Blazingly fast E-Commerce in Nuxt </a> <a class="crayons-link crayons-link--contentful" href="/jacobandrewsky/how-to-use-provideinject-in-vue-3bob"> How to Use Provide/Inject in Vue </a> <a class="crayons-link crayons-link--contentful" href="/jacobandrewsky/how-to-use-nuxt-3-middleware-for-authentication-and-permissions-5d9b"> How to Use Nuxt 3 Middleware for Authentication and Permissions </a> <a class="crayons-link crayons-link--contentful" href="/robin-ivi/laravel-12-and-vue-3-ultimate-starter-guide-3bmd"> Laravel 12 and Vue 3 Ultimate Starter Guide </a> <a class="crayons-link crayons-link--contentful" href="/lmlonghuynh/building-a-micro-frontend-architecture-with-vue-3-vite-and-module-federation-1bb1"> Building a Micro Frontend Architecture with Vue 3, Vite and Module Federation </a> <a class="crayons-link crayons-link--contentful" href="/aaronksaunders/how-to-do-form-validation-in-vue-with-tanstack-form-39m5"> How To Do Form Validation in Vue with Tanstack Form </a> <a class="crayons-link crayons-link--contentful" href="/abubakersiddique761/2025-react-vs-vue-tech-stack-comparison-for-your-startup-556n"> 2025 React vs. Vue Tech Stack Comparison for Your Startup </a> <a class="crayons-link crayons-link--contentful" href="/seyedahmaddv/the-pros-and-cons-of-using-react-vs-vuejs-vs-angular-1ppk"> The Pros and Cons of Using React vs. Vue.js vs. Angular </a> <a class="crayons-link crayons-link--contentful" href="/robin-ivi/laravel-11-vuejs-3-crud-application-with-composition-api-26jj"> Laravel 11 Vue.js 3 CRUD Application with Composition API </a> <a class="crayons-link crayons-link--contentful" href="/jacobandrewsky/understanding-vues-virtual-dom-108p"> Understanding Vue’s Virtual DOM </a> <a class="crayons-link crayons-link--contentful" href="/jacobandrewsky/leveraging-nuxt-and-supabase-for-modern-fullstack-development-2mbh"> Leveraging Nuxt and Supabase for Modern Fullstack Development </a> <a class="crayons-link crayons-link--contentful" href="/aws-builders/async-events-with-appsync-events-api-3ljp"> Async events with AppSync Events API </a> <a class="crayons-link crayons-link--contentful" href="/jacobandrewsky/good-practices-for-vue-computed-properties-5gd7"> Good practices for Vue Computed Properties </a> <a class="crayons-link crayons-link--contentful" href="/deondazy/how-to-combine-filters-sorting-and-infinite-scrolling-in-laravel-inertiajs-v2-and-vue-3-24a7"> How to Combine Filters, Sorting, and Infinite Scrolling in Laravel, Inertia.js v2, and Vue 3 </a> <a class="crayons-link crayons-link--contentful" href="/robin-ivi/react-vs-vue-choosing-the-right-frontend-framework-1p7"> React vs Vue: Choosing the Right Frontend Framework </a> <a class="crayons-link crayons-link--contentful" href="/shaman_shetty/learning-js-frameworks-with-mepart-3vuejs-the-progressive-javascript-framework-3ne7"> Learning JS frameworks with me(part 3):Vue.js- The Progressive JavaScript Framework </a> </div> </div> </div> </aside> </div> </div> <script src="https://assets.dev.to/assets/storiesList-b9c50cbd898a3a64258a3a49db1c531651b0a4a11937be35ed4651111802b5b5.js" defer="defer"></script> <script src="https://assets.dev.to/assets/followButtons-f2455d1f50a862b83fa006b1953e3a1644598781243cae25d3e75b13c04184fd.js" defer="defer"></script> <script src="https://assets.dev.to/assets/tagFollows-25496b4e3bf8bec41c7881be6b330ac8e9aa612d1ce876863a984d934d839384.js" defer="defer"></script> <script src="https://assets.dev.to/assets/feedPreviewCards-8d16b0b656456a28c0a290f756cf6e21e19833111c4796f48c631bfea8323d51.js" defer="defer"></script> <script src="https://assets.dev.to/assets/hideBookmarkButtons-0cc08aac1c422e6b6f75e5284b5350215abf211b59fb3eb8d8a4ef85e205b607.js" defer="defer"></script> <script src="https://assets.dev.to/assets/drawerSliders-823098a874684cfb50f32368b8dd1c7854954b83a588b8b6cfaef1e8fd30d858.js" defer="defer"></script> <script src="https://assets.dev.to/assets/localizeArticleDates-70147c5c6bfe350b42e020ebb2a3dd37419d83978982b5a67b6389119bf162ac.js" defer="defer"></script> <div id="runtime-banner-container"></div> </div> </div> <footer id="footer" class="crayons-footer print-hidden"> <div id="footer-container" class="crayons-footer__container"> <style> .long-bb-body { max-height: calc(100vh - 200px); overflow: hidden; } .long-bb-bottom { height: 180px; background: linear-gradient(to top, var(--card-bg), transparent); margin-top: -180px; position:relative; z-index: 5; } </style> <div style="" data-display-unit data-id="146443" data-category-click="click" data-category-impression="impression" data-context-type="home" data-special="nothing" data-article-id="791646" data-type-of="in_house"> <p style="font-weight: bold;margin-bottom: 10px"> Thank you to our Diamond Sponsor <a href="https://neon.tech/?bb=146443">Neon</a> for supporting our community. </p> </div> <p class="fs-s crayons-footer__description"> <a class="c-link c-link--branded fw-medium" aria-label="DEV Community Home" href="/">DEV Community</a> — A constructive and inclusive social network for software developers. With you every step of your journey. </p> <ul class="footer__nav-links flex gap-2 justify-center flex-wrap fs-s p-0" style="" /> <li class="footer__nav-link flex items-center"> <a href="/"> Home </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/++"> DEV++ </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/pod"> Podcasts </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/videos"> Videos </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/tags"> Tags </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/help"> DEV Help </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="https://shop.forem.com/"> Forem Shop </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/advertise"> Advertise on DEV </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/challenges"> DEV Challenges </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/showcase"> DEV Showcase </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/about"> About </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/contact"> Contact </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/free-postgres-database-tier"> Free Postgres Database </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/software-comparisons"> Software comparisons </a> <span class="dot ml-2"></span> </li> </ul> <ul class="footer__nav-links flex gap-2 justify-center flex-wrap fs-s p-0" style="" /> <li class="footer__nav-link flex items-center"> <a href="/code-of-conduct"> Code of Conduct </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/privacy"> Privacy Policy </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/terms"> Terms of use </a> <span class="dot ml-2"></span> </li> </ul> <div class="fs-s"> <p>Built on <a class="c-link c-link--branded" target="_blank" rel="noopener" href="https://www.forem.com">Forem</a> — the <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/opensource">open source</a> software that powers <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to">DEV</a> and other inclusive communities.</p> <p>Made with love and <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/rails">Ruby on Rails</a>. DEV Community <span title="copyright">©</span> 2016 - 2025.</p> </div> </div> </footer> <div id="snack-zone"></div> <div id="global-signup-modal" class="authentication-modal hidden"> <div class="authentication-modal__container"> <figure class="authentication-modal__image-container"> <img class="authentication-modal__image" src="https://media2.dev.to/dynamic/image/width=190,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" alt="DEV Community" loading="lazy" /> </figure> <div class="authentication-modal__content"> <p class="authentication-modal__description"> We're a place where coders share, stay up-to-date and grow their careers. </p> </div> <div class="authentication-modal__actions"> <a href="/enter" class="crayons-btn" aria-label="Log in" data-no-instant> Log in </a> <a href="/enter?state=new-user" class="crayons-btn crayons-btn--ghost-brand js-global-signup-modal__create-account" aria-label="Create new account" data-no-instant> Create account </a> </div> </div> </div> <script src="https://assets.dev.to/assets/signupModalShortcuts-0b25469b985100a01e94cbd7fccaf7f0a4d776e129aac65c766aa32cb28ab29a.js" defer="defer"></script> <div id="cookie-consent"></div> <div id="i18n-translations" data-translations="{"en":{"core":{"add_comment":"Add comment","beta":"beta","comment":"Comment","copy_link":"Copy link","edit_profile":"Edit profile","follow":"Follow","follow_back":"Follow back","following":"Following","like":"Like","loading":"loading...","reaction":"Reaction","report_abuse":"Report abuse","search":"Search","success_settings":"Successfully updated settings.","counted_organization":{"one":"%{count} organization","other":"%{count} organizations"},"counted_user":{"one":"%{count} person","other":"%{count} people"},"not_following":"You're not following anyone","following_everyone":"You're following %{details} (everyone)","you_are_following":"You're following","and":"and"}}}"></div> <div id="reaction-category-resources" class="hidden" aria-hidden="true"> <img data-name="Like" data-slug="like" data-position="1" src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> <img data-name="Unicorn" data-slug="unicorn" data-position="2" src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> <img data-name="Exploding Head" data-slug="exploding_head" data-position="3" src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> <img data-name="Raised Hands" data-slug="raised_hands" data-position="4" src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> <img data-name="Fire" data-slug="fire" data-position="5" src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </div> <script> var userSignedIn = false; if (document.readyState === 'complete' || document.readyState === 'interactive') { initAuth(); } else { document.addEventListener('DOMContentLoaded', initAuth); } function initAuth() { var paramToken = new URLSearchParams(window.location.search).get('jwt'); if (paramToken && !userSignedIn) { authenticateUser(paramToken); } else { var iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = 'https://forem.com/auth_pass/iframe'; document.body.appendChild(iframe); window.addEventListener('message', function(event) { if (event.origin !== 'https://forem.com' && event.origin !== window.location.origin) { return; } var data = event.data; if (data.authenticated && !userSignedIn) { authenticateUser(data.token); } else if(data.authenticated && window.ReactNativeWebView && window.ReactNativeWebView.postMessage) { window.ReactNativeWebView.postMessage(JSON.stringify({ action: 'login', token: data.token, })); } }); } function authenticateUser(token) { fetch('/auth_pass/token_login', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': getMetaContent('csrf-token'), }, body: JSON.stringify({ token: token }), }) .then(function(response) { return response.json(); }) .then(function(data) { if (data.success) { if (document.head.querySelector('meta[name="user-signed-in"][content="false"]')) { // Reload the page to update the user's state location.reload(); } } }) .catch(function(error) { console.error('Error during authentication:', error); }); } function getMetaContent(name) { var element = document.querySelector('meta[name="' + name + '"]'); return element ? element.getAttribute('content') : ''; } } </script> </body> </html>