Vue Page 9 - DEV Community

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vue Page 9 - DEV Community</title> <meta name="last-updated" content="2025-04-09 20:22:13 UTC"> <meta name="user-signed-in" content="false"> <meta name="head-cached-at" content="1744230133"> <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/page/9" /> <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/page/9" /> <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-08T14:55:14Z" data-latest-commit-id="5a0700de76701df15587c62080964d2cb5e88158" 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="ac5olq6u09i71hn65cl1oum7dqllsboi" class="crayons-icon"><title id="ac5olq6u09i71hn65cl1oum7dqllsboi">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="arcevt4c42m2aa8m0rl1d0zpnatr3hn2" aria-hidden="true" class="crayons-icon"><title id="arcevt4c42m2aa8m0rl1d0zpnatr3hn2">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="a1vhtiatoc2abmq6bq0u495cm1ad9jdr" aria-hidden="true" class="crayons-icon"><title id="a1vhtiatoc2abmq6bq0u495cm1ad9jdr">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="ag6x6plkf7et7niu58gyi02t80tf0xl1" aria-hidden="true" class="crayons-icon c-btn__icon"><title id="ag6x6plkf7et7niu58gyi02t80tf0xl1">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> 6793 Posts Published </div> <hr /> <div class="olderposts-header">Older #vue posts</div> <div class="olderposts-links"> <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> <span class="olderposts-pagenumber">9</span> <a href="https://dev.to/t/vue/page/10" class="olderposts-pagenumber">10</a> <a href="https://dev.to/t/vue/page/11" class="olderposts-pagenumber">11</a> <a href="https://dev.to/t/vue/page/12" class="olderposts-pagenumber">12</a> <a href="https://dev.to/t/vue/page/13" class="olderposts-pagenumber">13</a> <a href="https://dev.to/t/vue/page/14" class="olderposts-pagenumber">14</a> </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="afjmly59uv2o76t2w1jfvr1yqptwtot7" class="crayons-icon"><title id="afjmly59uv2o76t2w1jfvr1yqptwtot7">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="ah9dr7imj734x2y7an0ei64t8ot19bsc" class="crayons-icon"><title id="ah9dr7imj734x2y7an0ei64t8ot19bsc">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="2160546" data-content-user-id="1254158"> <a href="https://dev.to/hkp22/10-must-know-typescript-features-to-improve-your-coding-efficiency-396m" aria-labelledby="article-link-2160546" class="crayons-story__hidden-navigation-link">10 Must-Know TypeScript Features to Improve Your Coding Efficiency</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/hkp22" 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%2F1254158%2Fb66d50a5-7b9a-4721-8d5a-b793a085baec.jpg" alt="hkp22 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/hkp22" class="crayons-story__secondary fw-medium m:hidden"> Harish Kumar </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2160546" aria-controls="story-author-preview-content-2160546" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Harish Kumar profile details"> Harish Kumar </button> <div id="story-author-preview-content-2160546" 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="/hkp22" 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%2F1254158%2Fb66d50a5-7b9a-4721-8d5a-b793a085baec.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Harish Kumar</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":1254158,"className":"User","name":"Harish Kumar"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1254158"></div> </div> </div> </div> </div> <a href="https://dev.to/hkp22/10-must-know-typescript-features-to-improve-your-coding-efficiency-396m" class="crayons-story__tertiary fs-xs"><time datetime="2024-12-17T07:50:06Z">Dec 17 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1734421806"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/hkp22/10-must-know-typescript-features-to-improve-your-coding-efficiency-396m" 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%2F3z2c1a6bjpo9f9ygamee.png" id="article-link-2160546"> 10 Must-Know TypeScript Features to Improve Your Coding Efficiency </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(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(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/hkp22/10-must-know-typescript-features-to-improve-your-coding-efficiency-396m" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2160546" aria-label="Add a comment to post - 10 Must-Know TypeScript Features to Improve Your Coding Efficiency"> <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">86<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/hkp22/10-must-know-typescript-features-to-improve-your-coding-efficiency-396m#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Must-Know TypeScript Features to Improve Your Coding Efficiency"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a8asojb9kilgy7510oo26ixyigve3rkz" class="crayons-icon"><title id="a8asojb9kilgy7510oo26ixyigve3rkz">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> 1<span class="hidden s:inline"> 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-2160546" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2160546" data-article-author-id="1254158" aria-label="Save post 10 Must-Know TypeScript Features to Improve Your Coding Efficiency to reading list" title="Save post 10 Must-Know TypeScript Features to Improve Your Coding Efficiency 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="2108981" data-content-user-id="2447785"> <a href="https://dev.to/geokala/step-by-step-tutorial-how-to-use-allais-for-effortless-ui-generation-40pk" aria-labelledby="article-link-2108981" class="crayons-story__hidden-navigation-link">Step-by-Step Tutorial: How to Use ALLAIS for Effortless UI Generation</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/geokala" 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%2F2447785%2F49f8eb85-60f9-4d2c-b2f3-2fbccfebddba.png" alt="geokala profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/geokala" class="crayons-story__secondary fw-medium m:hidden"> Geo </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2108981" aria-controls="story-author-preview-content-2108981" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Geo profile details"> Geo </button> <div id="story-author-preview-content-2108981" 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="/geokala" 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%2F2447785%2F49f8eb85-60f9-4d2c-b2f3-2fbccfebddba.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Geo</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":2447785,"className":"User","name":"Geo"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2447785"></div> </div> </div> </div> </div> <a href="https://dev.to/geokala/step-by-step-tutorial-how-to-use-allais-for-effortless-ui-generation-40pk" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-18T16:46:00Z">Nov 18 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731948360"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/geokala/step-by-step-tutorial-how-to-use-allais-for-effortless-ui-generation-40pk" 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%2Fxx435g6bv3ukxvmeu470.jpg" id="article-link-2108981"> Step-by-Step Tutorial: How to Use ALLAIS for Effortless UI Generation </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(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(255, 62, 0, 0.10); --tag-prefix: #ff3e00; --tag-bg-hover: rgba(255, 62, 0, 0.10); --tag-prefix-hover: #ff3e00; " href="/t/svelte"><span class="crayons-tag__prefix">#</span>svelte</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/geokala/step-by-step-tutorial-how-to-use-allais-for-effortless-ui-generation-40pk" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2108981" aria-label="Add a comment to post - Step-by-Step Tutorial: How to Use ALLAIS for Effortless UI Generation"> <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">5<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/geokala/step-by-step-tutorial-how-to-use-allais-for-effortless-ui-generation-40pk#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Step-by-Step Tutorial: How to Use ALLAIS for Effortless UI Generation"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aas4xm3xx9j49bd1nzd81pxiduo9180j" class="crayons-icon"><title id="aas4xm3xx9j49bd1nzd81pxiduo9180j">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-2108981" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2108981" data-article-author-id="2447785" aria-label="Save post Step-by-Step Tutorial: How to Use ALLAIS for Effortless UI Generation to reading list" title="Save post Step-by-Step Tutorial: How to Use ALLAIS for Effortless UI Generation 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="2108994" data-content-user-id="2447785"> <a href="https://dev.to/geokala/schritt-fur-schritt-anleitung-so-verwenden-sie-allais-fur-die-einfache-ui-generierung-1mcd" aria-labelledby="article-link-2108994" class="crayons-story__hidden-navigation-link">Schritt-für-Schritt-Anleitung: So verwenden Sie ALLAIS für die einfache UI-Generierung</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/geokala" 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%2F2447785%2F49f8eb85-60f9-4d2c-b2f3-2fbccfebddba.png" alt="geokala profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/geokala" class="crayons-story__secondary fw-medium m:hidden"> Geo </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2108994" aria-controls="story-author-preview-content-2108994" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Geo profile details"> Geo </button> <div id="story-author-preview-content-2108994" 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="/geokala" 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%2F2447785%2F49f8eb85-60f9-4d2c-b2f3-2fbccfebddba.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Geo</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":2447785,"className":"User","name":"Geo"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2447785"></div> </div> </div> </div> </div> <a href="https://dev.to/geokala/schritt-fur-schritt-anleitung-so-verwenden-sie-allais-fur-die-einfache-ui-generierung-1mcd" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-18T18:53:00Z">Nov 18 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731955980"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/geokala/schritt-fur-schritt-anleitung-so-verwenden-sie-allais-fur-die-einfache-ui-generierung-1mcd" 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%2Faldh6ltwsvb6xg8zjob7.jpg" id="article-link-2108994"> Schritt-für-Schritt-Anleitung: So verwenden Sie ALLAIS für die einfache UI-Generierung </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(255, 62, 0, 0.10); --tag-prefix: #ff3e00; --tag-bg-hover: rgba(255, 62, 0, 0.10); --tag-prefix-hover: #ff3e00; " href="/t/svelte"><span class="crayons-tag__prefix">#</span>svelte</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/geokala/schritt-fur-schritt-anleitung-so-verwenden-sie-allais-fur-die-einfache-ui-generierung-1mcd" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2108994" aria-label="Add a comment to post - Schritt-für-Schritt-Anleitung: So verwenden Sie ALLAIS für die einfache UI-Generierung"> <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">5<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/geokala/schritt-fur-schritt-anleitung-so-verwenden-sie-allais-fur-die-einfache-ui-generierung-1mcd#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Schritt-für-Schritt-Anleitung: So verwenden Sie ALLAIS für die einfache UI-Generierung"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a5vn0zppz6ykgv9qcf3mhzozoibawcm3" class="crayons-icon"><title id="a5vn0zppz6ykgv9qcf3mhzozoibawcm3">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-2108994" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2108994" data-article-author-id="2447785" aria-label="Save post Schritt-für-Schritt-Anleitung: So verwenden Sie ALLAIS für die einfache UI-Generierung to reading list" title="Save post Schritt-für-Schritt-Anleitung: So verwenden Sie ALLAIS für die einfache UI-Generierung 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="2110704" data-content-user-id="1125814"> <a href="https://dev.to/joshtheburgess/scaling-teams-ability-to-collaborate-efficiently-3pk4" aria-labelledby="article-link-2110704" class="crayons-story__hidden-navigation-link">Scaling Team’s Ability to Collaborate Efficiently</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/joshtheburgess" 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%2F1125814%2F1279e733-87a2-4c3a-a60c-0e53e0358167.jpg" alt="joshtheburgess profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/joshtheburgess" class="crayons-story__secondary fw-medium m:hidden"> Josh Burgess </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2110704" aria-controls="story-author-preview-content-2110704" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Josh Burgess profile details"> Josh Burgess </button> <div id="story-author-preview-content-2110704" 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="/joshtheburgess" 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%2F1125814%2F1279e733-87a2-4c3a-a60c-0e53e0358167.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Josh Burgess</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":1125814,"className":"User","name":"Josh Burgess"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1125814"></div> </div> </div> </div> </div> <a href="https://dev.to/joshtheburgess/scaling-teams-ability-to-collaborate-efficiently-3pk4" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-18T14:18:55Z">Nov 18 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731929558"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/joshtheburgess/scaling-teams-ability-to-collaborate-efficiently-3pk4" data-preload-image="" id="article-link-2110704"> Scaling Team’s Ability to Collaborate Efficiently </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(255, 204, 0, 0.10); --tag-prefix: #ffcc00; --tag-bg-hover: rgba(255, 204, 0, 0.10); --tag-prefix-hover: #ffcc00; " href="/t/agile"><span class="crayons-tag__prefix">#</span>agile</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(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/joshtheburgess/scaling-teams-ability-to-collaborate-efficiently-3pk4#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Scaling Team’s Ability to Collaborate Efficiently"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="amu6r0y30gla01pe1ybpqy206kgh6766" class="crayons-icon"><title id="amu6r0y30gla01pe1ybpqy206kgh6766">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"> 10 min read </small> <button type="button" id="article-save-button-2110704" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2110704" data-article-author-id="1125814" aria-label="Save post Scaling Team’s Ability to Collaborate Efficiently to reading list" title="Save post Scaling Team’s Ability to Collaborate Efficiently 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="2108963" data-content-user-id="2447785"> <a href="https://dev.to/geokala/allais-your-ultimate-personal-ui-generator-for-modern-web-development-452p" aria-labelledby="article-link-2108963" class="crayons-story__hidden-navigation-link">ALLAIS: Your Ultimate Personal UI Generator for Modern Web Development</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/geokala" 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%2F2447785%2F49f8eb85-60f9-4d2c-b2f3-2fbccfebddba.png" alt="geokala profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/geokala" class="crayons-story__secondary fw-medium m:hidden"> Geo </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2108963" aria-controls="story-author-preview-content-2108963" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Geo profile details"> Geo </button> <div id="story-author-preview-content-2108963" 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="/geokala" 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%2F2447785%2F49f8eb85-60f9-4d2c-b2f3-2fbccfebddba.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Geo</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":2447785,"className":"User","name":"Geo"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2447785"></div> </div> </div> </div> </div> <a href="https://dev.to/geokala/allais-your-ultimate-personal-ui-generator-for-modern-web-development-452p" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-18T08:01:00Z">Nov 18 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731916860"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/geokala/allais-your-ultimate-personal-ui-generator-for-modern-web-development-452p" 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%2F9x6302mh2ryyyr6vusno.png" id="article-link-2108963"> ALLAIS: Your Ultimate Personal UI Generator for Modern Web Development </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(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(255, 62, 0, 0.10); --tag-prefix: #ff3e00; --tag-bg-hover: rgba(255, 62, 0, 0.10); --tag-prefix-hover: #ff3e00; " href="/t/svelte"><span class="crayons-tag__prefix">#</span>svelte</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/geokala/allais-your-ultimate-personal-ui-generator-for-modern-web-development-452p" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2108963" aria-label="Add a comment to post - ALLAIS: Your Ultimate Personal UI Generator for Modern Web Development"> <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">5<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/geokala/allais-your-ultimate-personal-ui-generator-for-modern-web-development-452p#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - ALLAIS: Your Ultimate Personal UI Generator for Modern Web Development"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="acge3h2beoav0ypw5l86j3ty3be4cp9w" class="crayons-icon"><title id="acge3h2beoav0ypw5l86j3ty3be4cp9w">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-2108963" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2108963" data-article-author-id="2447785" aria-label="Save post ALLAIS: Your Ultimate Personal UI Generator for Modern Web Development to reading list" title="Save post ALLAIS: Your Ultimate Personal UI Generator for Modern Web Development 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="2108987" data-content-user-id="2447785"> <a href="https://dev.to/geokala/poshaghovyi-uchiebnik-kak-ispolzovat-allais-dlia-lieghkoi-ghienieratsii-ui-30h1" aria-labelledby="article-link-2108987" class="crayons-story__hidden-navigation-link">Пошаговый учебник: Как использовать ALLAIS для легкой генерации UI</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/geokala" 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%2F2447785%2F49f8eb85-60f9-4d2c-b2f3-2fbccfebddba.png" alt="geokala profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/geokala" class="crayons-story__secondary fw-medium m:hidden"> Geo </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2108987" aria-controls="story-author-preview-content-2108987" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Geo profile details"> Geo </button> <div id="story-author-preview-content-2108987" 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="/geokala" 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%2F2447785%2F49f8eb85-60f9-4d2c-b2f3-2fbccfebddba.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Geo</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":2447785,"className":"User","name":"Geo"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2447785"></div> </div> </div> </div> </div> <a href="https://dev.to/geokala/poshaghovyi-uchiebnik-kak-ispolzovat-allais-dlia-lieghkoi-ghienieratsii-ui-30h1" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-18T09:50:00Z">Nov 18 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731923400"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/geokala/poshaghovyi-uchiebnik-kak-ispolzovat-allais-dlia-lieghkoi-ghienieratsii-ui-30h1" 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%2Fozn3xte6dbv0thes7bj0.jpg" id="article-link-2108987"> Пошаговый учебник: Как использовать ALLAIS для легкой генерации UI </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(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(255, 62, 0, 0.10); --tag-prefix: #ff3e00; --tag-bg-hover: rgba(255, 62, 0, 0.10); --tag-prefix-hover: #ff3e00; " href="/t/svelte"><span class="crayons-tag__prefix">#</span>svelte</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/geokala/poshaghovyi-uchiebnik-kak-ispolzovat-allais-dlia-lieghkoi-ghienieratsii-ui-30h1" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2108987" aria-label="Add a comment to post - Пошаговый учебник: Как использовать ALLAIS для легкой генерации UI"> <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">5<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/geokala/poshaghovyi-uchiebnik-kak-ispolzovat-allais-dlia-lieghkoi-ghienieratsii-ui-30h1#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Пошаговый учебник: Как использовать ALLAIS для легкой генерации UI"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="acirc7yhhzp08iaxxk51fh5v0958z03j" class="crayons-icon"><title id="acirc7yhhzp08iaxxk51fh5v0958z03j">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-2108987" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2108987" data-article-author-id="2447785" aria-label="Save post Пошаговый учебник: Как использовать ALLAIS для легкой генерации UI to reading list" title="Save post Пошаговый учебник: Как использовать ALLAIS для легкой генерации UI 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="2108268" data-content-user-id="1599806"> <a href="https://dev.to/greenestgoat/vueframe-a-simple-vue-3-component-library-for-embedding-video-players-4nfj" aria-labelledby="article-link-2108268" class="crayons-story__hidden-navigation-link">vueframe a simple Vue 3 component library for embedding video players</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/greenestgoat" 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%2F1599806%2F5f18aca1-cb04-4625-b294-59510b341d23.png" alt="greenestgoat profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/greenestgoat" class="crayons-story__secondary fw-medium m:hidden"> GreenestGoat </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2108268" aria-controls="story-author-preview-content-2108268" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="GreenestGoat profile details"> GreenestGoat </button> <div id="story-author-preview-content-2108268" 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="/greenestgoat" 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%2F1599806%2F5f18aca1-cb04-4625-b294-59510b341d23.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">GreenestGoat</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":1599806,"className":"User","name":"GreenestGoat"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1599806"></div> </div> </div> </div> </div> <a href="https://dev.to/greenestgoat/vueframe-a-simple-vue-3-component-library-for-embedding-video-players-4nfj" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-17T17:09:48Z">Nov 17 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731863388"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/greenestgoat/vueframe-a-simple-vue-3-component-library-for-embedding-video-players-4nfj" data-preload-image="" id="article-link-2108268"> vueframe a simple Vue 3 component library for embedding video players </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(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(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> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/greenestgoat/vueframe-a-simple-vue-3-component-library-for-embedding-video-players-4nfj" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2108268" aria-label="Add a comment to post - vueframe a simple Vue 3 component library for embedding video players"> <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/greenestgoat/vueframe-a-simple-vue-3-component-library-for-embedding-video-players-4nfj#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - vueframe a simple Vue 3 component library for embedding video players"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ab8zz0c73elamo2iznaifvsxoaolvi6k" class="crayons-icon"><title id="ab8zz0c73elamo2iznaifvsxoaolvi6k">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-2108268" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2108268" data-article-author-id="1599806" aria-label="Save post vueframe a simple Vue 3 component library for embedding video players to reading list" title="Save post vueframe a simple Vue 3 component library for embedding video players 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="2166591" data-content-user-id="49483"> <a href="https://dev.to/leamsigc/how-to-add-comment-from-bluesky-to-staticvuenuxt-project-n1h" aria-labelledby="article-link-2166591" class="crayons-story__hidden-navigation-link">How to add comment from BlueSky to static/vue/nuxt project</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/leamsigc" 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%2F49483%2F0bfe39c2-a32e-4929-9ad6-716c873c2fbf.jpeg" alt="leamsigc profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/leamsigc" class="crayons-story__secondary fw-medium m:hidden"> Ismael Garcia </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2166591" aria-controls="story-author-preview-content-2166591" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Ismael Garcia profile details"> Ismael Garcia </button> <div id="story-author-preview-content-2166591" 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="/leamsigc" 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%2F49483%2F0bfe39c2-a32e-4929-9ad6-716c873c2fbf.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Ismael Garcia</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":49483,"className":"User","name":"Ismael Garcia"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="49483"></div> </div> </div> </div> </div> <a href="https://dev.to/leamsigc/how-to-add-comment-from-bluesky-to-staticvuenuxt-project-n1h" class="crayons-story__tertiary fs-xs"><time datetime="2024-12-20T09:09:58Z">Dec 20 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1734685798"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/leamsigc/how-to-add-comment-from-bluesky-to-staticvuenuxt-project-n1h" 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%2Fdn9mok108j77rwwpd6r1.png" id="article-link-2166591"> How to add comment from BlueSky to static/vue/nuxt project </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/bluesky"><span class="crayons-tag__prefix">#</span>bluesky</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(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/leamsigc/how-to-add-comment-from-bluesky-to-staticvuenuxt-project-n1h" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2166591" aria-label="Add a comment to post - How to add comment from BlueSky to static/vue/nuxt project"> <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">8<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/leamsigc/how-to-add-comment-from-bluesky-to-staticvuenuxt-project-n1h#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 add comment from BlueSky to static/vue/nuxt project"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a8b0r9bargisre0ubd6s6iloppxiguet" class="crayons-icon"><title id="a8b0r9bargisre0ubd6s6iloppxiguet">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"> 6 min read </small> <button type="button" id="article-save-button-2166591" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2166591" data-article-author-id="49483" aria-label="Save post How to add comment from BlueSky to static/vue/nuxt project to reading list" title="Save post How to add comment from BlueSky to static/vue/nuxt project 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="2163355" data-content-user-id="2586564"> <a href="https://dev.to/auth0/angular-vs-react-vs-vue-50m6" aria-labelledby="article-link-2163355" class="crayons-story__hidden-navigation-link">Angular vs. React vs. Vue</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a class="crayons-logo crayons-logo--l" href="/auth0"> <img alt="Auth0 logo" 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%2Forganization%2Fprofile_image%2F634%2Ffdecbcfe-076f-44ba-877c-ac6677b09e34.png" class="crayons-logo__image" loading="lazy" /> </a> <a href="/leichteckig" class="crayons-avatar crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted "> <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%2F2586564%2F4879b8a6-33cf-4213-a2ed-93f5a0beb695.jpg" alt="leichteckig profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/leichteckig" class="crayons-story__secondary fw-medium m:hidden"> Ramona Schwering </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2163355" aria-controls="story-author-preview-content-2163355" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Ramona Schwering profile details"> Ramona Schwering </button> <div id="story-author-preview-content-2163355" 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="/leichteckig" 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%2F2586564%2F4879b8a6-33cf-4213-a2ed-93f5a0beb695.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Ramona Schwering</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":2586564,"className":"User","name":"Ramona Schwering"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2586564"></div> </div> </div> </div> <span> <span class="crayons-story__tertiary fw-normal"> for </span><a href="/auth0" class="crayons-story__secondary fw-medium">Auth0</a> </span> </div> <a href="https://dev.to/auth0/angular-vs-react-vs-vue-50m6" class="crayons-story__tertiary fs-xs"><time datetime="2024-12-20T16:00:00Z">Dec 20 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1734710400"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/auth0/angular-vs-react-vs-vue-50m6" 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%2Fkk8qvhqbhlhsvc50aq4e.png" id="article-link-2163355"> Angular vs. React vs. Vue </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(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(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/auth0"><span class="crayons-tag__prefix">#</span>auth0</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/auth0/angular-vs-react-vs-vue-50m6" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2163355" aria-label="Add a comment to post - Angular vs. React vs. 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">4<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/auth0/angular-vs-react-vs-vue-50m6#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Angular vs. React vs. Vue"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="akm5jem0x06ns26ryumvr9w18vrxli3s" class="crayons-icon"><title id="akm5jem0x06ns26ryumvr9w18vrxli3s">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"> 12 min read </small> <button type="button" id="article-save-button-2163355" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2163355" data-article-author-id="2586564" aria-label="Save post Angular vs. React vs. Vue to reading list" title="Save post Angular vs. React vs. 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="2112664" data-content-user-id="580317"> <a href="https://dev.to/arthurgermano/accounting-overview-experience-1pjl" aria-labelledby="article-link-2112664" class="crayons-story__hidden-navigation-link">Accounting Overview - (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="/arthurgermano" 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%2F580317%2F065a581f-7feb-4994-9fef-53f44e766072.jpeg" alt="arthurgermano profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/arthurgermano" class="crayons-story__secondary fw-medium m:hidden"> Arthur Germano </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2112664" aria-controls="story-author-preview-content-2112664" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Arthur Germano profile details"> Arthur Germano </button> <div id="story-author-preview-content-2112664" 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="/arthurgermano" 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%2F580317%2F065a581f-7feb-4994-9fef-53f44e766072.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Arthur Germano</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":580317,"className":"User","name":"Arthur Germano"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="580317"></div> </div> </div> </div> </div> <a href="https://dev.to/arthurgermano/accounting-overview-experience-1pjl" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-19T21:10:39Z">Nov 19 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1732050639"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/arthurgermano/accounting-overview-experience-1pjl" 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%2Ffsybejhvv9lct829f6sh.png" id="article-link-2112664"> Accounting Overview - (Experience++) </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(53, 76, 199, 0.10); --tag-prefix: #354cc7; --tag-bg-hover: rgba(53, 76, 199, 0.10); --tag-prefix-hover: #354cc7; " href="/t/pwa"><span class="crayons-tag__prefix">#</span>pwa</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/webauthn"><span class="crayons-tag__prefix">#</span>webauthn</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/moleculer"><span class="crayons-tag__prefix">#</span>moleculer</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/arthurgermano/accounting-overview-experience-1pjl" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2112664" aria-label="Add a comment to post - Accounting Overview - (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/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/arthurgermano/accounting-overview-experience-1pjl#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Accounting Overview - (Experience++)"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ac6hx44b76gaptxf07hekhkho1gkh7kb" class="crayons-icon"><title id="ac6hx44b76gaptxf07hekhkho1gkh7kb">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-2112664" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2112664" data-article-author-id="580317" aria-label="Save post Accounting Overview - (Experience++) to reading list" title="Save post Accounting Overview - (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="2162236" data-content-user-id="2547507"> <a href="https://dev.to/ryo_suwito/when-goliath-fell-to-davids-smallest-stone-the-innocent-dropdown-tweak-that-shattered-react-vue-6p3" aria-labelledby="article-link-2162236" class="crayons-story__hidden-navigation-link">When Goliath Fell to David’s Smallest Stone: The Innocent Dropdown Tweak That Shattered React, Vue, and Svelte</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/ryo_suwito" 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%2F2547507%2F17a909c4-de00-476d-87b9-ba84d7facd61.png" alt="ryo_suwito profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/ryo_suwito" class="crayons-story__secondary fw-medium m:hidden"> Ryo Suwito </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2162236" aria-controls="story-author-preview-content-2162236" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Ryo Suwito profile details"> Ryo Suwito </button> <div id="story-author-preview-content-2162236" 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="/ryo_suwito" 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%2F2547507%2F17a909c4-de00-476d-87b9-ba84d7facd61.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Ryo Suwito</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":2547507,"className":"User","name":"Ryo Suwito"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2547507"></div> </div> </div> </div> </div> <a href="https://dev.to/ryo_suwito/when-goliath-fell-to-davids-smallest-stone-the-innocent-dropdown-tweak-that-shattered-react-vue-6p3" class="crayons-story__tertiary fs-xs"><time datetime="2024-12-18T05:17:57Z">Dec 18 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1734499077"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/ryo_suwito/when-goliath-fell-to-davids-smallest-stone-the-innocent-dropdown-tweak-that-shattered-react-vue-6p3" 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%2Fm67ko117ekx6gkgz5kgr.jpg" id="article-link-2162236"> When Goliath Fell to David’s Smallest Stone: The Innocent Dropdown Tweak That Shattered React, Vue, and Svelte </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(255, 62, 0, 0.10); --tag-prefix: #ff3e00; --tag-bg-hover: rgba(255, 62, 0, 0.10); --tag-prefix-hover: #ff3e00; " href="/t/svelte"><span class="crayons-tag__prefix">#</span>svelte</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/ryo_suwito/when-goliath-fell-to-davids-smallest-stone-the-innocent-dropdown-tweak-that-shattered-react-vue-6p3" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2162236" aria-label="Add a comment to post - When Goliath Fell to David’s Smallest Stone: The Innocent Dropdown Tweak That Shattered React, Vue, and Svelte"> <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">2<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/ryo_suwito/when-goliath-fell-to-davids-smallest-stone-the-innocent-dropdown-tweak-that-shattered-react-vue-6p3#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - When Goliath Fell to David’s Smallest Stone: The Innocent Dropdown Tweak That Shattered React, Vue, and Svelte"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ai1sjs70nqtbxdvwxr1web7zfo2dioy" class="crayons-icon"><title id="ai1sjs70nqtbxdvwxr1web7zfo2dioy">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> 9<span class="hidden s:inline"> comments</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-2162236" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2162236" data-article-author-id="2547507" aria-label="Save post When Goliath Fell to David’s Smallest Stone: The Innocent Dropdown Tweak That Shattered React, Vue, and Svelte to reading list" title="Save post When Goliath Fell to David’s Smallest Stone: The Innocent Dropdown Tweak That Shattered React, Vue, and Svelte 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="2146908" data-content-user-id="652576"> <a href="https://dev.to/jacobandrewsky/reactive-vs-ref-in-vue-3-whats-the-difference-1jm1" aria-labelledby="article-link-2146908" class="crayons-story__hidden-navigation-link">Reactive vs. Ref in Vue 3: What’s the difference?</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/jacobandrewsky" 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%2F652576%2F71679021-521f-4d3b-b57f-af2d4ad055d9.png" alt="jacobandrewsky profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/jacobandrewsky" class="crayons-story__secondary fw-medium m:hidden"> Jakub Andrzejewski </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2146908" aria-controls="story-author-preview-content-2146908" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Jakub Andrzejewski profile details"> Jakub Andrzejewski </button> <div id="story-author-preview-content-2146908" 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="/jacobandrewsky" 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%2F652576%2F71679021-521f-4d3b-b57f-af2d4ad055d9.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Jakub Andrzejewski</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":652576,"className":"User","name":"Jakub Andrzejewski"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="652576"></div> </div> </div> </div> </div> <a href="https://dev.to/jacobandrewsky/reactive-vs-ref-in-vue-3-whats-the-difference-1jm1" class="crayons-story__tertiary fs-xs"><time datetime="2024-12-16T07:55:37Z">Dec 16 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1734335737"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/jacobandrewsky/reactive-vs-ref-in-vue-3-whats-the-difference-1jm1" 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%2F0gk6ugyqnl3s7w5z3yf2.png" id="article-link-2146908"> Reactive vs. Ref in Vue 3: What’s the difference? </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> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 131, 53, 0.10); --tag-prefix: #008335; --tag-bg-hover: rgba(0, 131, 53, 0.10); --tag-prefix-hover: #008335; " href="/t/beginners"><span class="crayons-tag__prefix">#</span>beginners</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/jacobandrewsky/reactive-vs-ref-in-vue-3-whats-the-difference-1jm1" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2146908" aria-label="Add a comment to post - Reactive vs. Ref in Vue 3: What’s the difference?"> <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">35<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/jacobandrewsky/reactive-vs-ref-in-vue-3-whats-the-difference-1jm1#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Reactive vs. Ref in Vue 3: What’s the difference?"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a83t1a6ewv3rqu2k0cdftf9jpaql6izy" class="crayons-icon"><title id="a83t1a6ewv3rqu2k0cdftf9jpaql6izy">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> 6<span class="hidden s:inline"> comments</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-2146908" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2146908" data-article-author-id="652576" aria-label="Save post Reactive vs. Ref in Vue 3: What’s the difference? to reading list" title="Save post Reactive vs. Ref in Vue 3: What’s the difference? 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="2160555" data-content-user-id="2545739"> <a href="https://dev.to/fupeng_wang/what-is-evan-you-doing-by-creating-voidzero-and-what-are-the-issues-with-js-toolchains-149p" aria-labelledby="article-link-2160555" class="crayons-story__hidden-navigation-link">What is Evan You doing by creating VoidZero, and what are the issues with JS toolchains?</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/fupeng_wang" 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%2F2545739%2Fee1045d3-3715-4365-a2ea-2ff3bda1536c.PNG" alt="fupeng_wang profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/fupeng_wang" class="crayons-story__secondary fw-medium m:hidden"> Fupeng Wang </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2160555" aria-controls="story-author-preview-content-2160555" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Fupeng Wang profile details"> Fupeng Wang </button> <div id="story-author-preview-content-2160555" 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="/fupeng_wang" 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%2F2545739%2Fee1045d3-3715-4365-a2ea-2ff3bda1536c.PNG" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Fupeng Wang</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":2545739,"className":"User","name":"Fupeng Wang"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2545739"></div> </div> </div> </div> </div> <a href="https://dev.to/fupeng_wang/what-is-evan-you-doing-by-creating-voidzero-and-what-are-the-issues-with-js-toolchains-149p" class="crayons-story__tertiary fs-xs"><time datetime="2024-12-17T07:59:25Z">Dec 17 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1734422365"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/fupeng_wang/what-is-evan-you-doing-by-creating-voidzero-and-what-are-the-issues-with-js-toolchains-149p" data-preload-image="" id="article-link-2160555"> What is Evan You doing by creating VoidZero, and what are the issues with JS toolchains? </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(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(100, 108, 255, 0.10); --tag-prefix: #646cff; --tag-bg-hover: rgba(100, 108, 255, 0.10); --tag-prefix-hover: #646cff; " href="/t/vite"><span class="crayons-tag__prefix">#</span>vite</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(179, 203, 230, 0.10); --tag-prefix: #B3CBE6; --tag-bg-hover: rgba(179, 203, 230, 0.10); --tag-prefix-hover: #B3CBE6; " href="/t/webpack"><span class="crayons-tag__prefix">#</span>webpack</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/fupeng_wang/what-is-evan-you-doing-by-creating-voidzero-and-what-are-the-issues-with-js-toolchains-149p" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2160555" aria-label="Add a comment to post - What is Evan You doing by creating VoidZero, and what are the issues with JS toolchains?"> <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">4<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/fupeng_wang/what-is-evan-you-doing-by-creating-voidzero-and-what-are-the-issues-with-js-toolchains-149p#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 Evan You doing by creating VoidZero, and what are the issues with JS toolchains?"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a4ltdr5yddmr1adg8goi7sxnf0xetrem" class="crayons-icon"><title id="a4ltdr5yddmr1adg8goi7sxnf0xetrem">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"> 6 min read </small> <button type="button" id="article-save-button-2160555" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2160555" data-article-author-id="2545739" aria-label="Save post What is Evan You doing by creating VoidZero, and what are the issues with JS toolchains? to reading list" title="Save post What is Evan You doing by creating VoidZero, and what are the issues with JS toolchains? 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="2098794" data-content-user-id="2337256"> <a href="https://dev.to/1ce/sync-dom-state-and-data-without-ids-avoid-this-common-pitfall-h7k" aria-labelledby="article-link-2098794" class="crayons-story__hidden-navigation-link">Syncing DOM State and Data without IDs</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/1ce" 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%2F2337256%2F40090106-5ee4-4298-853e-14ce37ba5350.png" alt="1ce profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/1ce" class="crayons-story__secondary fw-medium m:hidden"> Sby </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2098794" aria-controls="story-author-preview-content-2098794" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Sby profile details"> Sby </button> <div id="story-author-preview-content-2098794" 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="/1ce" 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%2F2337256%2F40090106-5ee4-4298-853e-14ce37ba5350.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Sby</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":2337256,"className":"User","name":"Sby"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2337256"></div> </div> </div> </div> </div> <a href="https://dev.to/1ce/sync-dom-state-and-data-without-ids-avoid-this-common-pitfall-h7k" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-17T20:56:47Z">Nov 17 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731877007"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/1ce/sync-dom-state-and-data-without-ids-avoid-this-common-pitfall-h7k" 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%2Fomu7pl203nyvt8604mub.png" id="article-link-2098794"> Syncing DOM State and Data without IDs </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(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(255, 62, 0, 0.10); --tag-prefix: #ff3e00; --tag-bg-hover: rgba(255, 62, 0, 0.10); --tag-prefix-hover: #ff3e00; " href="/t/svelte"><span class="crayons-tag__prefix">#</span>svelte</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/1ce/sync-dom-state-and-data-without-ids-avoid-this-common-pitfall-h7k#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Syncing DOM State and Data without IDs"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aerpi099jdnzdye9f39m8ojahwxng13k" class="crayons-icon"><title id="aerpi099jdnzdye9f39m8ojahwxng13k">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-2098794" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2098794" data-article-author-id="2337256" aria-label="Save post Syncing DOM State and Data without IDs to reading list" title="Save post Syncing DOM State and Data without IDs 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="2158995" data-content-user-id="307576"> <a href="https://dev.to/eleftheriabatsou/why-you-should-attend-vuejs-nation-2025-dj9" aria-labelledby="article-link-2158995" class="crayons-story__hidden-navigation-link">Why You Should Attend Vue.js Nation 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="/eleftheriabatsou" 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%2F307576%2F19ff1340-330c-4493-b491-faf2c2fef939.jpg" alt="eleftheriabatsou profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/eleftheriabatsou" class="crayons-story__secondary fw-medium m:hidden"> Eleftheria Batsou </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2158995" aria-controls="story-author-preview-content-2158995" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Eleftheria Batsou profile details"> Eleftheria Batsou </button> <div id="story-author-preview-content-2158995" 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="/eleftheriabatsou" 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%2F307576%2F19ff1340-330c-4493-b491-faf2c2fef939.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Eleftheria Batsou</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":307576,"className":"User","name":"Eleftheria Batsou"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="307576"></div> </div> </div> </div> </div> <a href="https://dev.to/eleftheriabatsou/why-you-should-attend-vuejs-nation-2025-dj9" class="crayons-story__tertiary fs-xs"><time datetime="2024-12-16T10:36:10Z">Dec 16 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1734345370"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/eleftheriabatsou/why-you-should-attend-vuejs-nation-2025-dj9" 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%2Fdcunoo8xb10t58gsw7hj.jpg" id="article-link-2158995"> Why You Should Attend Vue.js Nation 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(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/conference"><span class="crayons-tag__prefix">#</span>conference</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/eleftheriabatsou/why-you-should-attend-vuejs-nation-2025-dj9" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2158995" aria-label="Add a comment to post - Why You Should Attend Vue.js Nation 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/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">11<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/eleftheriabatsou/why-you-should-attend-vuejs-nation-2025-dj9#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 You Should Attend Vue.js Nation 2025"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a4zj2q2cq0jed130v3bcmddb7p1f6gia" class="crayons-icon"><title id="a4zj2q2cq0jed130v3bcmddb7p1f6gia">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-2158995" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2158995" data-article-author-id="307576" aria-label="Save post Why You Should Attend Vue.js Nation 2025 to reading list" title="Save post Why You Should Attend Vue.js Nation 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="2156539" data-content-user-id="588438"> <a href="https://dev.to/biomousavi/easiest-way-to-set-up-github-action-cicd-for-vuejs-apps-18ec" aria-labelledby="article-link-2156539" class="crayons-story__hidden-navigation-link">Easiest Way to Set Up GitHub Action CI/CD for Vue.js Apps</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/biomousavi" 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%2F588438%2F50e843c2-cfe5-4a08-97da-f3e300c7ca29.jpg" alt="biomousavi profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/biomousavi" class="crayons-story__secondary fw-medium m:hidden"> Nick Mousavi </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2156539" aria-controls="story-author-preview-content-2156539" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Nick Mousavi profile details"> Nick Mousavi </button> <div id="story-author-preview-content-2156539" 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="/biomousavi" 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%2F588438%2F50e843c2-cfe5-4a08-97da-f3e300c7ca29.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Nick Mousavi</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":588438,"className":"User","name":"Nick Mousavi"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="588438"></div> </div> </div> </div> </div> <a href="https://dev.to/biomousavi/easiest-way-to-set-up-github-action-cicd-for-vuejs-apps-18ec" class="crayons-story__tertiary fs-xs"><time datetime="2024-12-14T13:18:59Z">Dec 14 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1734182339"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/biomousavi/easiest-way-to-set-up-github-action-cicd-for-vuejs-apps-18ec" 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%2F1uw4nzqx218lg9hnsvls.jpg" id="article-link-2156539"> Easiest Way to Set Up GitHub Action CI/CD for Vue.js Apps </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/cicd"><span class="crayons-tag__prefix">#</span>cicd</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(100, 108, 255, 0.10); --tag-prefix: #646cff; --tag-bg-hover: rgba(100, 108, 255, 0.10); --tag-prefix-hover: #646cff; " href="/t/vite"><span class="crayons-tag__prefix">#</span>vite</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/biomousavi/easiest-way-to-set-up-github-action-cicd-for-vuejs-apps-18ec" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2156539" aria-label="Add a comment to post - Easiest Way to Set Up GitHub Action CI/CD for Vue.js Apps"> <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">11<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/biomousavi/easiest-way-to-set-up-github-action-cicd-for-vuejs-apps-18ec#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Easiest Way to Set Up GitHub Action CI/CD for Vue.js Apps"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aire7qfde5r52sni789oook779i6ta12" class="crayons-icon"><title id="aire7qfde5r52sni789oook779i6ta12">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-2156539" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2156539" data-article-author-id="588438" aria-label="Save post Easiest Way to Set Up GitHub Action CI/CD for Vue.js Apps to reading list" title="Save post Easiest Way to Set Up GitHub Action CI/CD for Vue.js Apps 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="2146912" data-content-user-id="652576"> <a href="https://dev.to/jacobandrewsky/10-tips-to-write-cleaner-vuejs-code-1dp6" aria-labelledby="article-link-2146912" class="crayons-story__hidden-navigation-link">10 Tips to Write Cleaner Vue.js Code</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/jacobandrewsky" 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%2F652576%2F71679021-521f-4d3b-b57f-af2d4ad055d9.png" alt="jacobandrewsky profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/jacobandrewsky" class="crayons-story__secondary fw-medium m:hidden"> Jakub Andrzejewski </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2146912" aria-controls="story-author-preview-content-2146912" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Jakub Andrzejewski profile details"> Jakub Andrzejewski </button> <div id="story-author-preview-content-2146912" 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="/jacobandrewsky" 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%2F652576%2F71679021-521f-4d3b-b57f-af2d4ad055d9.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Jakub Andrzejewski</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":652576,"className":"User","name":"Jakub Andrzejewski"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="652576"></div> </div> </div> </div> </div> <a href="https://dev.to/jacobandrewsky/10-tips-to-write-cleaner-vuejs-code-1dp6" class="crayons-story__tertiary fs-xs"><time datetime="2024-12-09T07:51:37Z">Dec 9 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1733730697"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/jacobandrewsky/10-tips-to-write-cleaner-vuejs-code-1dp6" 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%2F4b9yzcp5wywlx5ryi0bu.png" id="article-link-2146912"> 10 Tips to Write Cleaner Vue.js Code </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/cleancode"><span class="crayons-tag__prefix">#</span>cleancode</a> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(0, 131, 53, 0.10); --tag-prefix: #008335; --tag-bg-hover: rgba(0, 131, 53, 0.10); --tag-prefix-hover: #008335; " href="/t/beginners"><span class="crayons-tag__prefix">#</span>beginners</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/jacobandrewsky/10-tips-to-write-cleaner-vuejs-code-1dp6" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2146912" aria-label="Add a comment to post - 10 Tips to Write Cleaner Vue.js Code"> <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">81<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/jacobandrewsky/10-tips-to-write-cleaner-vuejs-code-1dp6#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 10 Tips to Write Cleaner Vue.js Code"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aq84idlrggb5ghvboyq197qi9zk8o2kk" class="crayons-icon"><title id="aq84idlrggb5ghvboyq197qi9zk8o2kk">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> 13<span class="hidden s:inline"> comments</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-2146912" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2146912" data-article-author-id="652576" aria-label="Save post 10 Tips to Write Cleaner Vue.js Code to reading list" title="Save post 10 Tips to Write Cleaner Vue.js Code 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="2102013" data-content-user-id="1268652"> <a href="https://dev.to/logrocket/defineexpose-and-in-vue-3-for-component-interaction-and-theming-40d4" aria-labelledby="article-link-2102013" class="crayons-story__hidden-navigation-link">defineExpose and <style vars> in Vue 3 for component interaction and theming</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a class="crayons-logo crayons-logo--l" href="/logrocket"> <img alt="LogRocket logo" 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%2Forganization%2Fprofile_image%2F1506%2Fe0a84c58-6a79-4f06-9149-87a38b84afa8.png" class="crayons-logo__image" loading="lazy" /> </a> <a href="/leemeganj" class="crayons-avatar crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted "> <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%2F1268652%2Fab93215a-fbd4-479e-b461-ba0da9cce98c.png" alt="leemeganj profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/leemeganj" class="crayons-story__secondary fw-medium m:hidden"> Megan Lee </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2102013" aria-controls="story-author-preview-content-2102013" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Megan Lee profile details"> Megan Lee </button> <div id="story-author-preview-content-2102013" 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="/leemeganj" 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%2F1268652%2Fab93215a-fbd4-479e-b461-ba0da9cce98c.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Megan Lee</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":1268652,"className":"User","name":"Megan Lee"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1268652"></div> </div> </div> </div> <span> <span class="crayons-story__tertiary fw-normal"> for </span><a href="/logrocket" class="crayons-story__secondary fw-medium">LogRocket</a> </span> </div> <a href="https://dev.to/logrocket/defineexpose-and-in-vue-3-for-component-interaction-and-theming-40d4" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-14T15:00:00Z">Nov 14 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1731596400"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/logrocket/defineexpose-and-in-vue-3-for-component-interaction-and-theming-40d4" 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%2Fn1tbvv58t74nk9z7lrer.png" id="article-link-2102013"> defineExpose and <style vars> in Vue 3 for component interaction and theming </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(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/logrocket/defineexpose-and-in-vue-3-for-component-interaction-and-theming-40d4" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2102013" aria-label="Add a comment to post - defineExpose and <style vars> in Vue 3 for component interaction and theming"> <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">2<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/logrocket/defineexpose-and-in-vue-3-for-component-interaction-and-theming-40d4#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - defineExpose and <style vars> in Vue 3 for component interaction and theming"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="alcviy57p2khcm9i8427rm9zorrxivvd" class="crayons-icon"><title id="alcviy57p2khcm9i8427rm9zorrxivvd">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"> 9 min read </small> <button type="button" id="article-save-button-2102013" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2102013" data-article-author-id="1268652" aria-label="Save post defineExpose and <style vars> in Vue 3 for component interaction and theming to reading list" title="Save post defineExpose and <style vars> in Vue 3 for component interaction and theming 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="2154395" data-content-user-id="2564678"> <a href="https://dev.to/ash_arutam_3fce868e24bbd6/vue3-ui-components-for-chats-conversations-ai-4013" aria-labelledby="article-link-2154395" class="crayons-story__hidden-navigation-link">Vue3 UI components for chats, conversations, ai</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/ash_arutam_3fce868e24bbd6" 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%2F2564678%2F1944de08-7302-42a6-89cb-86208b1a517c.png" alt="ash_arutam_3fce868e24bbd6 profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/ash_arutam_3fce868e24bbd6" class="crayons-story__secondary fw-medium m:hidden"> Ash Arutam </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2154395" aria-controls="story-author-preview-content-2154395" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Ash Arutam profile details"> Ash Arutam </button> <div id="story-author-preview-content-2154395" 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="/ash_arutam_3fce868e24bbd6" 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%2F2564678%2F1944de08-7302-42a6-89cb-86208b1a517c.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Ash Arutam</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":2564678,"className":"User","name":"Ash Arutam"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="2564678"></div> </div> </div> </div> </div> <a href="https://dev.to/ash_arutam_3fce868e24bbd6/vue3-ui-components-for-chats-conversations-ai-4013" class="crayons-story__tertiary fs-xs"><time datetime="2024-12-13T05:27:08Z">Dec 13 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1734067628"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/ash_arutam_3fce868e24bbd6/vue3-ui-components-for-chats-conversations-ai-4013" 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%2Fpml67v5jk41p5xcf21yf.png" id="article-link-2154395"> Vue3 UI components for chats, conversations, ai </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(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(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/ash_arutam_3fce868e24bbd6/vue3-ui-components-for-chats-conversations-ai-4013" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2154395" aria-label="Add a comment to post - Vue3 UI components for chats, conversations, ai"> <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/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">4<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/ash_arutam_3fce868e24bbd6/vue3-ui-components-for-chats-conversations-ai-4013#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Vue3 UI components for chats, conversations, ai"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aozqhr08lqrgx7xxrf6qaw1tatdyceco" class="crayons-icon"><title id="aozqhr08lqrgx7xxrf6qaw1tatdyceco">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> 1<span class="hidden s:inline"> 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-2154395" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2154395" data-article-author-id="2564678" aria-label="Save post Vue3 UI components for chats, conversations, ai to reading list" title="Save post Vue3 UI components for chats, conversations, ai 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="2154556" data-content-user-id="1209415"> <a href="https://dev.to/fridaymeng/roadmap-for-vite-4hdd" aria-labelledby="article-link-2154556" class="crayons-story__hidden-navigation-link">RoadMap for Vite</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/fridaymeng" 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%2F1209415%2Fc4625caa-ec04-43ef-9f5a-2f795c14367c.jpg" alt="fridaymeng profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/fridaymeng" class="crayons-story__secondary fw-medium m:hidden"> friday </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2154556" aria-controls="story-author-preview-content-2154556" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="friday profile details"> friday </button> <div id="story-author-preview-content-2154556" 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="/fridaymeng" 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%2F1209415%2Fc4625caa-ec04-43ef-9f5a-2f795c14367c.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">friday</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":1209415,"className":"User","name":"friday"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1209415"></div> </div> </div> </div> </div> <a href="https://dev.to/fridaymeng/roadmap-for-vite-4hdd" class="crayons-story__tertiary fs-xs"><time datetime="2024-12-13T08:01:41Z">Dec 13 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1734076901"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/fridaymeng/roadmap-for-vite-4hdd" data-preload-image="" id="article-link-2154556"> RoadMap for Vite </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(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> <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(179, 203, 230, 0.10); --tag-prefix: #B3CBE6; --tag-bg-hover: rgba(179, 203, 230, 0.10); --tag-prefix-hover: #B3CBE6; " href="/t/webpack"><span class="crayons-tag__prefix">#</span>webpack</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/fridaymeng/roadmap-for-vite-4hdd" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2154556" aria-label="Add a comment to post - RoadMap for Vite"> <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/fridaymeng/roadmap-for-vite-4hdd#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - RoadMap for Vite"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="atb84svcuy71rws9s0un1n38oocknlmi" class="crayons-icon"><title id="atb84svcuy71rws9s0un1n38oocknlmi">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"> 5 min read </small> <button type="button" id="article-save-button-2154556" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2154556" data-article-author-id="1209415" aria-label="Save post RoadMap for Vite to reading list" title="Save post RoadMap for Vite 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="2153985" data-content-user-id="1700999"> <a href="https://dev.to/lymestack/simpleauth-open-source-webapi-based-alternative-to-aspnet-core-identity-40i8" aria-labelledby="article-link-2153985" class="crayons-story__hidden-navigation-link">SimpleAuth - Open Source WebApi Based Alternative to ASP.NET Core Identity</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/lymestack" 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%2F1700999%2Ff36d1e58-0ee8-41bf-8de5-4e927c2121b0.png" alt="lymestack profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/lymestack" class="crayons-story__secondary fw-medium m:hidden"> Michael Joseph </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2153985" aria-controls="story-author-preview-content-2153985" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Michael Joseph profile details"> Michael Joseph </button> <div id="story-author-preview-content-2153985" 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="/lymestack" 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%2F1700999%2Ff36d1e58-0ee8-41bf-8de5-4e927c2121b0.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Michael Joseph</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":1700999,"className":"User","name":"Michael Joseph"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1700999"></div> </div> </div> </div> </div> <a href="https://dev.to/lymestack/simpleauth-open-source-webapi-based-alternative-to-aspnet-core-identity-40i8" class="crayons-story__tertiary fs-xs"><time datetime="2024-12-12T20:43:54Z">Dec 12 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1734036234"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/lymestack/simpleauth-open-source-webapi-based-alternative-to-aspnet-core-identity-40i8" data-preload-image="" id="article-link-2153985"> SimpleAuth - Open Source WebApi Based Alternative to ASP.NET Core Identity </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " style=" --tag-bg: rgba(81, 42, 213, 0.10); --tag-prefix: #512ad5; --tag-bg-hover: rgba(81, 42, 213, 0.10); --tag-prefix-hover: #512ad5; " href="/t/dotnet"><span class="crayons-tag__prefix">#</span>dotnet</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(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/lymestack/simpleauth-open-source-webapi-based-alternative-to-aspnet-core-identity-40i8" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2153985" aria-label="Add a comment to post - SimpleAuth - Open Source WebApi Based Alternative to ASP.NET Core Identity"> <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/lymestack/simpleauth-open-source-webapi-based-alternative-to-aspnet-core-identity-40i8#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - SimpleAuth - Open Source WebApi Based Alternative to ASP.NET Core Identity"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a6womwf82of28l0x11g5gp432ahqpal3" class="crayons-icon"><title id="a6womwf82of28l0x11g5gp432ahqpal3">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-2153985" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2153985" data-article-author-id="1700999" aria-label="Save post SimpleAuth - Open Source WebApi Based Alternative to ASP.NET Core Identity to reading list" title="Save post SimpleAuth - Open Source WebApi Based Alternative to ASP.NET Core Identity 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="2151543" data-content-user-id="127567"> <a href="https://dev.to/bhaidar/implementing-infinite-scrolling-with-laravel-inertiajs-v20-and-vue-3-3il" aria-labelledby="article-link-2151543" class="crayons-story__hidden-navigation-link">Implementing Infinite Scrolling with Laravel, Inertia.js v2.0, and Vue 3</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/bhaidar" 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%2F127567%2Ff131b7c5-65e0-4f76-be20-363ec27aa152.png" alt="bhaidar profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/bhaidar" class="crayons-story__secondary fw-medium m:hidden"> Bilal Haidar </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2151543" aria-controls="story-author-preview-content-2151543" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Bilal Haidar profile details"> Bilal Haidar </button> <div id="story-author-preview-content-2151543" 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="/bhaidar" 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%2F127567%2Ff131b7c5-65e0-4f76-be20-363ec27aa152.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Bilal Haidar</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":127567,"className":"User","name":"Bilal Haidar"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="127567"></div> </div> </div> </div> </div> <a href="https://dev.to/bhaidar/implementing-infinite-scrolling-with-laravel-inertiajs-v20-and-vue-3-3il" class="crayons-story__tertiary fs-xs"><time datetime="2024-12-11T12:21:48Z">Dec 11 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1733919708"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/bhaidar/implementing-infinite-scrolling-with-laravel-inertiajs-v20-and-vue-3-3il" data-preload-image="" id="article-link-2151543"> Implementing Infinite Scrolling with Laravel, Inertia.js v2.0, and Vue 3 </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(59, 73, 223, 0.10); --tag-prefix: #3b49df; --tag-bg-hover: rgba(59, 73, 223, 0.10); --tag-prefix-hover: #3b49df; " href="/t/inertiajs"><span class="crayons-tag__prefix">#</span>inertiajs</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/bhaidar/implementing-infinite-scrolling-with-laravel-inertiajs-v20-and-vue-3-3il" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2151543" aria-label="Add a comment to post - Implementing Infinite Scrolling with Laravel, Inertia.js v2.0, and Vue 3"> <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">9<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/bhaidar/implementing-infinite-scrolling-with-laravel-inertiajs-v20-and-vue-3-3il#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - Implementing Infinite Scrolling with Laravel, Inertia.js v2.0, and Vue 3"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="adwucrrc7521yo9im7bm7lq29fgr16w6" class="crayons-icon"><title id="adwucrrc7521yo9im7bm7lq29fgr16w6">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-2151543" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2151543" data-article-author-id="127567" aria-label="Save post Implementing Infinite Scrolling with Laravel, Inertia.js v2.0, and Vue 3 to reading list" title="Save post Implementing Infinite Scrolling with Laravel, Inertia.js v2.0, and Vue 3 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="2083582" data-content-user-id="617039"> <a href="https://dev.to/freecoderx/uniapp-ru-men-shi-zhan-19jiang-qian-duan-ye-mian-dao-chu-cheng-pdf-1cfg" aria-labelledby="article-link-2083582" class="crayons-story__hidden-navigation-link">uniapp 入门实战 19：将前端页面导出成pdf</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/freecoderx" 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%2F617039%2Fe9aa8111-802c-4e88-9b7d-22ccefc8114c.jpg" alt="freecoderx profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/freecoderx" class="crayons-story__secondary fw-medium m:hidden"> FreeCoderX </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2083582" aria-controls="story-author-preview-content-2083582" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="FreeCoderX profile details"> FreeCoderX </button> <div id="story-author-preview-content-2083582" 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="/freecoderx" 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%2F617039%2Fe9aa8111-802c-4e88-9b7d-22ccefc8114c.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">FreeCoderX</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":617039,"className":"User","name":"FreeCoderX"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="617039"></div> </div> </div> </div> </div> <a href="https://dev.to/freecoderx/uniapp-ru-men-shi-zhan-19jiang-qian-duan-ye-mian-dao-chu-cheng-pdf-1cfg" class="crayons-story__tertiary fs-xs"><time datetime="2024-11-07T09:05:52Z">Nov 7 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1730970352"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/freecoderx/uniapp-ru-men-shi-zhan-19jiang-qian-duan-ye-mian-dao-chu-cheng-pdf-1cfg" 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%2Fqb4yd3k7eorw8lv45rq0.jpg" id="article-link-2083582"> uniapp 入门实战 19：将前端页面导出成pdf </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/uniapp"><span class="crayons-tag__prefix">#</span>uniapp</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/pdf"><span class="crayons-tag__prefix">#</span>pdf</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/freecoderx/uniapp-ru-men-shi-zhan-19jiang-qian-duan-ye-mian-dao-chu-cheng-pdf-1cfg" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2083582" aria-label="Add a comment to post - uniapp 入门实战 19：将前端页面导出成pdf"> <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/freecoderx/uniapp-ru-men-shi-zhan-19jiang-qian-duan-ye-mian-dao-chu-cheng-pdf-1cfg#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - uniapp 入门实战 19：将前端页面导出成pdf"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="alymjs63h6aryo17l8l0m79cqbc06uoq" class="crayons-icon"><title id="alymjs63h6aryo17l8l0m79cqbc06uoq">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-2083582" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2083582" data-article-author-id="617039" aria-label="Save post uniapp 入门实战 19：将前端页面导出成pdf to reading list" title="Save post uniapp 入门实战 19：将前端页面导出成pdf 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="2147068" data-content-user-id="1145007"> <a href="https://dev.to/vue-pdf-viewer/popular-pdf-viewers-for-vuejs-which-one-is-right-for-you-32kd" aria-labelledby="article-link-2147068" class="crayons-story__hidden-navigation-link">📄 Popular PDF Viewers for Vue.js: Which One Is Right for You? 🤔</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a class="crayons-logo crayons-logo--l" href="/vue-pdf-viewer"> <img alt="Vue PDF Viewer logo" 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%2Forganization%2Fprofile_image%2F9659%2Fa855b275-485d-4335-86e4-6b27642b5a96.jpg" class="crayons-logo__image" loading="lazy" /> </a> <a href="/ansonch" class="crayons-avatar crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted "> <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%2F1145007%2Fa3c932d3-7633-48d1-9637-8f266c3b973e.jpg" alt="ansonch profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/ansonch" class="crayons-story__secondary fw-medium m:hidden"> Anson Ch </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2147068" aria-controls="story-author-preview-content-2147068" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="Anson Ch profile details"> Anson Ch </button> <div id="story-author-preview-content-2147068" 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="/ansonch" 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%2F1145007%2Fa3c932d3-7633-48d1-9637-8f266c3b973e.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Anson Ch</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":1145007,"className":"User","name":"Anson Ch"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="1145007"></div> </div> </div> </div> <span> <span class="crayons-story__tertiary fw-normal"> for </span><a href="/vue-pdf-viewer" class="crayons-story__secondary fw-medium">Vue PDF Viewer</a> </span> </div> <a href="https://dev.to/vue-pdf-viewer/popular-pdf-viewers-for-vuejs-which-one-is-right-for-you-32kd" class="crayons-story__tertiary fs-xs"><time datetime="2024-12-10T11:13:35Z">Dec 10 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1733829215"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/vue-pdf-viewer/popular-pdf-viewers-for-vuejs-which-one-is-right-for-you-32kd" 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%2Fscma52r895durjp6kpcr.png" id="article-link-2147068"> 📄 Popular PDF Viewers for Vue.js: Which One Is Right for You? 🤔 </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(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> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/vue-pdf-viewer/popular-pdf-viewers-for-vuejs-which-one-is-right-for-you-32kd" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="2147068" aria-label="Add a comment to post - 📄 Popular PDF Viewers for Vue.js: Which One Is Right for You? 🤔"> <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/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">5<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/vue-pdf-viewer/popular-pdf-viewers-for-vuejs-which-one-is-right-for-you-32kd#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - 📄 Popular PDF Viewers for Vue.js: Which One Is Right for You? 🤔"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="amilnxep08171fazz6u6v0x6dxlw5999" class="crayons-icon"><title id="amilnxep08171fazz6u6v0x6dxlw5999">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"> 8 min read </small> <button type="button" id="article-save-button-2147068" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2147068" data-article-author-id="1145007" aria-label="Save post 📄 Popular PDF Viewers for Vue.js: Which One Is Right for You? 🤔 to reading list" title="Save post 📄 Popular PDF Viewers for Vue.js: Which One Is Right for You? 🤔 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="2134569" data-content-user-id="540789"> <a href="https://dev.to/allhandsondeck/an-opinionated-testing-approach-in-vuejs-3p0a" aria-labelledby="article-link-2134569" class="crayons-story__hidden-navigation-link">An opinionated testing approach for VueJS</a> <div class="crayons-story__body"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/allhandsondeck" 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%2F540789%2F6c5a7786-f2fd-4cbd-8ce5-8c75a9cc70f6.jpeg" alt="allhandsondeck profile" class="crayons-avatar__image" loading="lazy" /> </a> </div> <div> <div> <a href="/allhandsondeck" class="crayons-story__secondary fw-medium m:hidden"> allhandsondeck </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> <button id="story-author-preview-trigger-2134569" aria-controls="story-author-preview-content-2134569" class="profile-preview-card__trigger fs-s p-1 -ml-1 -my-2 crayons-btn crayons-btn--ghost" aria-label="allhandsondeck profile details"> allhandsondeck </button> <div id="story-author-preview-content-2134569" 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="/allhandsondeck" 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%2F540789%2F6c5a7786-f2fd-4cbd-8ce5-8c75a9cc70f6.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5">allhandsondeck</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":540789,"className":"User","name":"allhandsondeck"}'> Follow </button> </div> <div class="author-preview-metadata-container" data-author-id="540789"></div> </div> </div> </div> </div> <a href="https://dev.to/allhandsondeck/an-opinionated-testing-approach-in-vuejs-3p0a" class="crayons-story__tertiary fs-xs"><time datetime="2024-12-07T18:55:19Z">Dec 7 '24</time><span class="time-ago-indicator-initial-placeholder" data-seconds="1733597719"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title"> <a href="https://dev.to/allhandsondeck/an-opinionated-testing-approach-in-vuejs-3p0a" data-preload-image="" id="article-link-2134569"> An opinionated testing approach for VueJS </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/unittest"><span class="crayons-tag__prefix">#</span>unittest</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/allhandsondeck/an-opinionated-testing-approach-in-vuejs-3p0a#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center" aria-label="Add a comment to post - An opinionated testing approach for VueJS"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ahlvt3lpvc2m3yp1d9i0bbhxwr0rbx0v" class="crayons-icon"><title id="ahlvt3lpvc2m3yp1d9i0bbhxwr0rbx0v">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"> 8 min read </small> <button type="button" id="article-save-button-2134569" class="c-btn c-btn--icon-alone bookmark-button" data-reactable-id="2134569" data-article-author-id="540789" aria-label="Save post An opinionated testing approach for VueJS to reading list" title="Save post An opinionated testing approach for VueJS 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> <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="" 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>

CINXE.COM

Vue Page 9 - DEV Community