[{"data":1,"prerenderedAt":815},["ShallowReactive",2],{"site-info":3,"writing":55},{"id":4,"title":5,"baseTitle":6,"body":7,"city":14,"description":11,"extension":15,"firstName":16,"lastName":17,"meta":18,"navigation":19,"path":35,"resumeUrl":36,"role":37,"seo":38,"socialLinks":39,"state":52,"stem":53,"__hash__":54},"siteInfo\u002Fsite-information.md","Site Information","| Front-End Software Engineer | Cincinnati, OH",{"type":8,"value":9,"toc":10},"minimark",[],{"title":11,"searchDepth":12,"depth":12,"links":13},"",2,[],"Cincinnati","md","Dave","Berning",{},[20,23,26,29,32],{"name":21,"to":22},"About","\u002Fabout",{"name":24,"to":25},"Work","\u002Fwork",{"name":27,"to":28},"Writing","\u002Fwriting",{"name":30,"to":31},"Endorsements","\u002Fendorsements",{"name":33,"to":34},"Contact","\u002Fcontact","\u002Fsite-information","\u002Fresume","Front-End Software Engineer",{"description":11},[40,44,48],{"label":41,"href":42,"icon":43},"LinkedIn","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fdavidberning\u002F","simple-icons:linkedin",{"label":45,"href":46,"icon":47},"GitHub","https:\u002F\u002Fgithub.com\u002Fdaveberning","simple-icons:github",{"label":49,"href":50,"icon":51},"Email","mailto:hello@daveberning.io","lucide:mail","OH","site-information","Riwsk3KNMBr9V9OmxgoWlnFymJ_mfMFTDiaiIADNjUo",[56,106,153,190,256,301,342,379,414,451,493,531,565,604,642,688,725,766],{"id":57,"title":58,"body":59,"category":86,"description":87,"extension":15,"externalUrl":88,"featuredImage":89,"meta":90,"navigation":91,"path":92,"platform":93,"publishedAt":94,"readingTime":95,"seo":96,"status":97,"stem":98,"tags":99,"updatedAt":11,"__hash__":105},"writing\u002Fwriting\u002Fhow-to-debug-components-state-and-events-with-vue-js-devtools.md","How To Debug Components, State, and Events with Vue.js Devtools",{"type":8,"value":60,"toc":84},[61,70,77],[62,63,64,65,69],"p",{},"This ",[66,67,68],"strong",{},"Vue Devtools tutorial"," focuses on one of the fastest ways to debug a Vue.js application: inspecting components, state, and events directly in the browser. Instead of constantly switching between source files and the running app, the guide shows how Vue Devtools shortens the feedback loop for everyday debugging work.",[62,71,72,73,76],{},"The article covers installing the extension, exploring component properties, testing state changes live, tracing emitted events, and reviewing ",[66,74,75],{},"Vuex actions, mutations, and store state",". That combination makes it especially valuable when you are working through UI bugs, state issues, or hard-to-follow component interactions.",[62,78,79,80,83],{},"For developers who want a better workflow around ",[66,81,82],{},"Vue debugging, component inspection, event tracing, and Vuex debugging",", this guide explains why Vue Devtools quickly becomes an essential part of the stack.",{"title":11,"searchDepth":12,"depth":12,"links":85},[],"Tutorial","Learn how to use Vue Devtools to inspect components, trace events, debug Vuex state, and speed up troubleshooting in Vue.js applications.","https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Fhow-to-debug-components-state-and-events-with-vue-js-devtools","\u002Fwriting\u002Fvuejs.webp",{},true,"\u002Fwriting\u002Fhow-to-debug-components-state-and-events-with-vue-js-devtools","DigitalOcean","2022-01-25",5,{"title":58,"description":87},"published","writing\u002Fhow-to-debug-components-state-and-events-with-vue-js-devtools",[100,101,102,103,104],"JavaScript","Vue","Vuex","Vue Devtools","Debugging","KVc3FrKtn0l5GADao5Wd_4bDYQ8D2rnM_DjMn6ouFic",{"id":107,"title":108,"body":109,"category":86,"description":142,"extension":15,"externalUrl":143,"featuredImage":89,"meta":144,"navigation":91,"path":145,"platform":93,"publishedAt":146,"readingTime":147,"seo":148,"status":97,"stem":149,"tags":150,"updatedAt":11,"__hash__":152},"writing\u002Fwriting\u002Fhow-to-make-your-vue-js-application-dry-with-slots-mixins-and-composition-api.md","How To Make Your Vue.js Application DRY with Slots, Mixins, and Composition API",{"type":8,"value":110,"toc":140},[111,118,133],[62,112,113,114,117],{},"This article is about keeping a ",[66,115,116],{},"Vue.js application DRY"," by choosing the right reuse strategy for the problem in front of you. Rather than repeating template code or duplicating component logic, it compares several of Vue’s built-in patterns for sharing behavior more intelligently.",[62,119,120,121,124,125,128,129,132],{},"The tutorial looks at ",[66,122,123],{},"slots"," for flexible layouts, ",[66,126,127],{},"mixins"," for shared methods and state, and the ",[66,130,131],{},"Composition API"," for extracting reusable logic into cleaner, more maintainable units. That makes it especially relevant for teams working on larger Vue codebases where repeated code quickly becomes a maintenance burden.",[62,134,135,136,139],{},"If you want a better grasp of ",[66,137,138],{},"Vue code reuse, slots, mixins, Composition API patterns, and scalable component design",", this guide lays out the tradeoffs clearly.",{"title":11,"searchDepth":12,"depth":12,"links":141},[],"Learn how to keep Vue applications DRY with slots, mixins, and the Composition API so you can reuse logic, reduce duplication, and scale cleanly.","https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Fhow-to-make-your-vue-js-application-dry-with-slots-mixins-and-composition-api",{},"\u002Fwriting\u002Fhow-to-make-your-vue-js-application-dry-with-slots-mixins-and-composition-api","2021-12-03",6,{"title":108,"description":142},"writing\u002Fhow-to-make-your-vue-js-application-dry-with-slots-mixins-and-composition-api",[100,101,131,151],"Component Reuse","_FiAoZJi1V7SU61eRx2MMAyP2Q5CeVJvJoRczWUKxrY",{"id":154,"title":155,"body":156,"category":86,"description":180,"extension":15,"externalUrl":181,"featuredImage":89,"meta":182,"navigation":91,"path":183,"platform":93,"publishedAt":184,"readingTime":147,"seo":185,"status":97,"stem":186,"tags":187,"updatedAt":11,"__hash__":189},"writing\u002Fwriting\u002Fhow-to-manage-state-in-a-vue-js-application-with-vuex.md","How To Manage State in a Vue.js Application with Vuex",{"type":8,"value":157,"toc":178},[158,164,171],[62,159,64,160,163],{},[66,161,162],{},"Vuex state management tutorial"," is a practical walkthrough of how to manage shared data in a growing Vue.js application. Using a favorites-based example, it explains the single source of truth pattern and shows how Vuex helps keep application state predictable as more components need access to the same data.",[62,165,166,167,170],{},"The tutorial covers installing Vuex, creating a store, and wiring up ",[66,168,169],{},"actions, mutations, getters, and modules"," so state changes stay organized and traceable. Instead of passing props through multiple layers or juggling duplicated state, the article shows how a structured Vuex store can simplify data flow across the app.",[62,172,173,174,177],{},"For developers comparing local component state versus a centralized store, this article gives a strong introduction to ",[66,175,176],{},"Vuex, state management, reusable store architecture, and scalable Vue application design",".",{"title":11,"searchDepth":12,"depth":12,"links":179},[],"Learn how to manage state in Vue.js with Vuex using stores, actions, mutations, and modules to build predictable, scalable front-end applications.","https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Fhow-to-manage-state-in-a-vue-js-application-with-vuex",{},"\u002Fwriting\u002Fhow-to-manage-state-in-a-vue-js-application-with-vuex","2021-09-30",{"title":155,"description":180},"writing\u002Fhow-to-manage-state-in-a-vue-js-application-with-vuex",[100,101,102,188],"State Management","qAWZGNp2viZY3UfBPkak2sukSGu9zgkBqZpt0bp8CzI",{"id":191,"title":192,"body":193,"category":86,"description":245,"extension":15,"externalUrl":246,"featuredImage":89,"meta":247,"navigation":91,"path":248,"platform":93,"publishedAt":249,"readingTime":95,"seo":250,"status":97,"stem":251,"tags":252,"updatedAt":11,"__hash__":255},"writing\u002Fwriting\u002Fhow-to-use-built-in-and-custom-directives-in-vue-js.md","How To Use Built-In and Custom Directives in Vue.js",{"type":8,"value":194,"toc":243},[195,230,237],[62,196,64,197,200,201,205,206,209,210,213,214,217,218,221,222,225,226,229],{},[66,198,199],{},"Vue.js directives tutorial"," breaks down the built-in template features that make Vue feel fast, expressive, and productive for frontend development. It explains when to use ",[202,203,204],"code",{},"v-if",", ",[202,207,208],{},"v-else-if",", and ",[202,211,212],{},"v-show"," for conditional rendering, how ",[202,215,216],{},"v-on"," handles event listeners, how ",[202,219,220],{},"v-bind"," and ",[202,223,224],{},"v-model"," power dynamic attributes and form input binding, and where ",[202,227,228],{},"v-html"," fits when you need to render raw markup carefully.",[62,231,232,233,236],{},"The article also moves beyond the basics and shows how ",[66,234,235],{},"custom Vue directives"," can package repeated DOM behavior into reusable logic. That makes it especially useful for developers who want a clearer mental model of how Vue directives work and when a custom directive is a better fit than component logic alone.",[62,238,239,240,177],{},"If you are learning Vue fundamentals or sharpening your template syntax, this summary of the original guide highlights the key concepts behind ",[66,241,242],{},"Vue directives, data binding, event handling, and reusable DOM behavior",{"title":11,"searchDepth":12,"depth":12,"links":244},[],"Learn how to use Vue.js directives like v-if, v-show, v-bind, v-model, and custom directives to build dynamic, interactive front-end components.","https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Fhow-to-use-built-in-and-custom-directives-in-vue-js",{},"\u002Fwriting\u002Fhow-to-use-built-in-and-custom-directives-in-vue-js","2021-08-12",{"title":192,"description":245},"writing\u002Fhow-to-use-built-in-and-custom-directives-in-vue-js",[100,101,253,254],"Vue Directives","Frontend","PaO83OkAe09zee8F-7-DSeKNYHb9slCzuBlSClIFAHc",{"id":257,"title":258,"body":259,"category":86,"description":290,"extension":15,"externalUrl":291,"featuredImage":89,"meta":292,"navigation":91,"path":293,"platform":93,"publishedAt":294,"readingTime":95,"seo":295,"status":97,"stem":296,"tags":297,"updatedAt":11,"__hash__":300},"writing\u002Fwriting\u002Fhow-to-create-user-interactions-with-events-in-vue.md","How To Create User Interactions with Events in Vue",{"type":8,"value":260,"toc":288},[261,267,281],[62,262,64,263,266],{},[66,264,265],{},"Vue events tutorial"," explains how user interactions move through a Vue application, from simple DOM clicks to communication between components. It starts with the role of browser events, then shows how Vue simplifies common interaction patterns inside templates.",[62,268,269,270,272,273,276,277,280],{},"The guide covers listening for events with ",[202,271,216],{},", using ",[66,274,275],{},"event modifiers and key modifiers",", and creating ",[66,278,279],{},"custom events"," so child components can notify parent components cleanly. That makes it a useful introduction for developers who are still building intuition around interactive Vue interfaces.",[62,282,283,284,287],{},"If you want to understand ",[66,285,286],{},"Vue event handling, custom events, keyboard interactions, and component communication",", this article gives a practical overview of the core patterns.",{"title":11,"searchDepth":12,"depth":12,"links":289},[],"Learn how to handle Vue events with v-on, event modifiers, key modifiers, and custom events so components respond cleanly to user interactions.","https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Fhow-to-create-user-interactions-with-events-in-vue",{},"\u002Fwriting\u002Fhow-to-create-user-interactions-with-events-in-vue","2021-05-28",{"title":258,"description":290},"writing\u002Fhow-to-create-user-interactions-with-events-in-vue",[100,101,298,299],"Events","Component Communication","halKG3YxYp7t_PQZCDID8Pmf_plbHc6ye0sSrT-WJ8I",{"id":302,"title":303,"body":304,"category":86,"description":331,"extension":15,"externalUrl":332,"featuredImage":89,"meta":333,"navigation":91,"path":334,"platform":93,"publishedAt":335,"readingTime":95,"seo":336,"status":97,"stem":337,"tags":338,"updatedAt":11,"__hash__":341},"writing\u002Fwriting\u002Fhow-to-create-reusable-blocks-of-code-with-vue-single-file-components.md","How To Create Reusable Blocks of Code with Vue Single-File Components",{"type":8,"value":305,"toc":329},[306,312,322],[62,307,64,308,311],{},[66,309,310],{},"Vue Single-File Components tutorial"," explains how to turn a growing interface into smaller, reusable blocks of code. It starts with the basic structure of an SFC, then shows how Vue components become easier to scale when markup, logic, and styling are grouped into focused units.",[62,313,314,315,318,319,321],{},"The walkthrough covers creating a component, passing data with ",[66,316,317],{},"props",", and using ",[66,320,123],{}," to build a more flexible card component that can adapt to different layouts. That combination makes the article especially helpful for developers who want to move past monolithic templates and build cleaner component systems.",[62,323,324,325,328],{},"If you are learning ",[66,326,327],{},"Vue component architecture, props, slots, and reusable Single-File Components",", this guide gives a practical introduction to the patterns that matter most.",{"title":11,"searchDepth":12,"depth":12,"links":330},[],"Learn how Vue Single-File Components, props, and slots help you build reusable UI blocks, cleaner component architecture, and more maintainable Vue apps.","https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Fhow-to-create-reusable-blocks-of-code-with-vue-single-file-components",{},"\u002Fwriting\u002Fhow-to-create-reusable-blocks-of-code-with-vue-single-file-components","2021-04-07",{"title":303,"description":331},"writing\u002Fhow-to-create-reusable-blocks-of-code-with-vue-single-file-components",[100,101,339,340],"Single-File Components","Component Architecture","g2WMLbnxeScG5CRh9BustD1-Xg46MSSd70Biboc3vUs",{"id":343,"title":344,"body":345,"category":86,"description":368,"extension":15,"externalUrl":369,"featuredImage":89,"meta":370,"navigation":91,"path":371,"platform":93,"publishedAt":372,"readingTime":95,"seo":373,"status":97,"stem":374,"tags":375,"updatedAt":11,"__hash__":378},"writing\u002Fwriting\u002Fhow-to-navigate-between-views-with-vue-router.md","How To Navigate Between Views with Vue Router",{"type":8,"value":346,"toc":366},[347,353,360],[62,348,64,349,352],{},[66,350,351],{},"Vue Router tutorial"," walks through the essentials of client-side navigation in a Vue single-page application. It starts with the routing problem that SPAs need to solve, then shows how Vue Router gives structure to multiple views rendered inside one browser page.",[62,354,355,356,359],{},"The article covers installing Vue Router, creating view components, defining routes, working with ",[66,357,358],{},"route parameters",", and navigating between pages from the interface. That makes it a useful guide for developers who want a clear foundation before moving on to nested routes, guards, or more advanced routing patterns.",[62,361,324,362,365],{},[66,363,364],{},"Vue Router, dynamic routes, SPA navigation, and view-based application structure",", this article provides a practical introduction you can build on.",{"title":11,"searchDepth":12,"depth":12,"links":367},[],"Learn how to use Vue Router for client-side routing, dynamic routes, and navigation between views in a Vue single-page application.","https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Fhow-to-navigate-between-views-with-vue-router",{},"\u002Fwriting\u002Fhow-to-navigate-between-views-with-vue-router","2021-03-22",{"title":344,"description":368},"writing\u002Fhow-to-navigate-between-views-with-vue-router",[100,101,376,377],"Vue Router","Single-Page Applications","lbG_27--aDdujPVDrUfx9xZvniRvV_I6YbLSlcdl-KA",{"id":380,"title":381,"body":382,"category":86,"description":403,"extension":15,"externalUrl":404,"featuredImage":89,"meta":405,"navigation":91,"path":406,"platform":93,"publishedAt":407,"readingTime":147,"seo":408,"status":97,"stem":409,"tags":410,"updatedAt":11,"__hash__":413},"writing\u002Fwriting\u002Fhow-to-use-vue-js-environment-modes-with-a-node-js-mock-data-layer.md","How To Use Vue.js Environment Modes with a Node.js Mock Data Layer",{"type":8,"value":383,"toc":401},[384,391,394],[62,385,386,387,390],{},"This tutorial tackles a common frontend workflow problem: building a Vue.js interface before the real backend is ready. It shows how to use ",[66,388,389],{},"Vue environment modes"," to swap configurations cleanly and pair the app with a lightweight Node.js mock data layer during development.",[62,392,393],{},"The article walks through creating environment-specific modes, setting up mock data, iterating over that data inside the app, and using computed properties to load the right source per environment. That gives teams a practical way to keep moving on the frontend while API work is still in progress.",[62,395,396,397,400],{},"For developers interested in ",[66,398,399],{},"Vue environment variables, mock APIs, Node.js development tooling, and parallel frontend-backend workflows",", this guide offers a pragmatic pattern you can reuse.",{"title":11,"searchDepth":12,"depth":12,"links":402},[],"Learn how to use Vue environment modes with a Node.js mock API so frontend development can move faster before the real backend is ready.","https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Fhow-to-use-vue-js-environment-modes-with-a-node-js-mock-data-layer",{},"\u002Fwriting\u002Fhow-to-use-vue-js-environment-modes-with-a-node-js-mock-data-layer","2021-02-11",{"title":381,"description":403},"writing\u002Fhow-to-use-vue-js-environment-modes-with-a-node-js-mock-data-layer",[100,101,411,412],"Node.js","Mock APIs","21-cO3lhlHnREteM4rEDtaPIdE_5V63uz2sCHt6rck8",{"id":415,"title":416,"body":417,"category":86,"description":441,"extension":15,"externalUrl":442,"featuredImage":89,"meta":443,"navigation":91,"path":444,"platform":93,"publishedAt":445,"readingTime":95,"seo":446,"status":97,"stem":447,"tags":448,"updatedAt":11,"__hash__":450},"writing\u002Fwriting\u002Fhow-to-generate-a-vue-js-single-page-app-with-vue-create.md","How To Generate a Vue.js Single Page App With the Vue CLI",{"type":8,"value":418,"toc":439},[419,425,432],[62,420,64,421,424],{},[66,422,423],{},"Vue CLI tutorial"," shows how to generate a Vue.js single-page application and then shape it into a cleaner component-based project. It begins with installing Vue CLI and scaffolding a new app, which makes it a useful starting point for developers who are new to modern Vue project setup.",[62,426,427,428,431],{},"After the initial setup, the tutorial walks through building header and footer components so readers can see how a default starter app becomes a more organized ",[66,429,430],{},"Vue single-page application",". The focus stays practical, with enough structure to help newer developers understand how a Vue project is assembled.",[62,433,434,435,438],{},"For anyone learning ",[66,436,437],{},"Vue CLI, Vue SPA architecture, and reusable components",", this article is a solid introduction to the workflow behind a modern Vue application.",{"title":11,"searchDepth":12,"depth":12,"links":440},[],"Learn how to scaffold a Vue.js single-page application with the Vue CLI, understand the project structure, and start building reusable Vue components.","https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Fhow-to-generate-a-vue-js-single-page-app-with-vue-create",{},"\u002Fwriting\u002Fhow-to-generate-a-vue-js-single-page-app-with-vue-create","2021-01-11",{"title":416,"description":441},"writing\u002Fhow-to-generate-a-vue-js-single-page-app-with-vue-create",[100,101,449,377],"Vue CLI","m09V6LUs1L_f43cYf4qARNYr6aJXiDw-GE6pqyYP0V8",{"id":452,"title":453,"body":454,"category":86,"description":482,"extension":15,"externalUrl":483,"featuredImage":484,"meta":485,"navigation":91,"path":486,"platform":93,"publishedAt":487,"readingTime":95,"seo":488,"status":97,"stem":489,"tags":490,"updatedAt":11,"__hash__":492},"writing\u002Fwriting\u002Fvuejs-using-typescript-with-vue.md","How To Use TypeScript with Vue Single File Components",{"type":8,"value":455,"toc":480},[456,466,473],[62,457,64,458,461,462,465],{},[66,459,460],{},"TypeScript with Vue"," tutorial explains how to bring stronger typing into a Vue project without losing the simplicity of Single-File Components. It walks through generating a Vue CLI app with TypeScript support, configuring the compiler, and using typed data structures inside ",[202,463,464],{},".vue"," files.",[62,467,468,469,472],{},"Along the way, the article covers ",[66,470,471],{},"basic types, custom types, and typed component logic",", giving readers a practical path from plain JavaScript to safer, more maintainable Vue code. That makes it a useful guide for teams that want better editor tooling, clearer contracts, and fewer runtime surprises.",[62,474,475,476,479],{},"If you are exploring ",[66,477,478],{},"TypeScript in Vue, typed Single-File Components, and better front-end maintainability",", this article gives a grounded introduction to the concepts that matter most.",{"title":11,"searchDepth":12,"depth":12,"links":481},[],"Learn how to use TypeScript with Vue Single-File Components to type props, component state, and application logic more reliably.","https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Fvuejs-using-typescript-with-vue","https:\u002F\u002Fwww.digitalocean.com\u002Fapi\u002Fstatic-content\u002Fv1\u002Fimages?src=https%3A%2F%2Fcommunity-cdn-digitalocean-com.global.ssl.fastly.net%2FVWgNzkr4k1aKz7fmAiXjy3Xp&width=1920",{},"\u002Fwriting\u002Fvuejs-using-typescript-with-vue","2019-09-03",{"title":453,"description":482},"writing\u002Fvuejs-using-typescript-with-vue",[100,491,101,339],"TypeScript","8vnlX_uyfL3xtFZFCGFKR1DvnavnxF2HD6p7JcWglxE",{"id":494,"title":495,"body":496,"category":86,"description":519,"extension":15,"externalUrl":520,"featuredImage":521,"meta":522,"navigation":91,"path":523,"platform":93,"publishedAt":524,"readingTime":95,"seo":525,"status":97,"stem":526,"tags":527,"updatedAt":11,"__hash__":530},"writing\u002Fwriting\u002Fvuejs-server-side-rendering-with-nuxtjs.md","Getting Started with Server-Side Rendering Using Nuxt.js",{"type":8,"value":497,"toc":517},[498,504,511],[62,499,64,500,503],{},[66,501,502],{},"Nuxt.js server-side rendering tutorial"," introduces the core ideas behind building universal Vue applications with better first-load performance and stronger SEO potential. It explains why SSR matters, how Nuxt simplifies the setup, and why the framework became such a popular entry point for Vue developers exploring server-rendered apps.",[62,505,506,507,510],{},"The guide covers installing Nuxt, understanding its opinionated architecture, working with ",[66,508,509],{},"page transitions and the loading bar",", and selectively disabling SSR for components that should only run on the client. Those details make it more than a high-level overview because it shows how Nuxt behaves in real application development.",[62,512,283,513,516],{},[66,514,515],{},"Nuxt, Vue server-side rendering, universal apps, and SSR tradeoffs",", this article gives a clear, practical foundation.",{"title":11,"searchDepth":12,"depth":12,"links":518},[],"Learn how Nuxt.js simplifies server-side rendering for Vue applications, improving SEO, first-load performance, and universal app architecture.","https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Fvuejs-server-side-rendering-with-nuxtjs",null,{},"\u002Fwriting\u002Fvuejs-server-side-rendering-with-nuxtjs","2018-04-16",{"title":495,"description":519},"writing\u002Fvuejs-server-side-rendering-with-nuxtjs",[100,101,528,529],"Nuxt","Server-Side Rendering","VpE72Ftv6MR2oWHScQ7OUo3DYjIqZUscJmus1sAB_X0",{"id":532,"title":533,"body":534,"category":86,"description":554,"extension":15,"externalUrl":555,"featuredImage":521,"meta":556,"navigation":91,"path":557,"platform":93,"publishedAt":558,"readingTime":95,"seo":559,"status":97,"stem":560,"tags":561,"updatedAt":11,"__hash__":564},"writing\u002Fwriting\u002Fvuejs-implementing-infinite-scroll.md","How To Implement an Infinite Scroll with Vue.js",{"type":8,"value":535,"toc":552},[536,542,545],[62,537,64,538,541],{},[66,539,540],{},"Vue infinite scroll tutorial"," shows how to load more content automatically as the user reaches the bottom of the page. That pattern replaces traditional pagination with a smoother experience that feels more natural on mobile devices and content-heavy interfaces.",[62,543,544],{},"The article covers project setup, fetching an initial dataset, detecting the scroll threshold with vanilla JavaScript, and loading additional API results on demand. It stays focused on the mechanics that matter, which makes it useful for feeds, galleries, and any interface that needs progressive loading without overwhelming the browser upfront.",[62,546,547,548,551],{},"For developers building ",[66,549,550],{},"infinite scrolling in Vue, lazy data loading, and feed-style interfaces",", this guide offers a practical starting point.",{"title":11,"searchDepth":12,"depth":12,"links":553},[],"Learn how to build infinite scroll in Vue.js by detecting scroll position, fetching paginated API data, and loading content without page refreshes.","https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Fvuejs-implementing-infinite-scroll",{},"\u002Fwriting\u002Fvuejs-implementing-infinite-scroll","2018-04-03",{"title":533,"description":554},"writing\u002Fvuejs-implementing-infinite-scroll",[100,101,562,563],"Infinite Scroll","User Experience","aSagRahz7S-ryiF1drFT_cPSPYcYQHz9JUYG9yTBHfo",{"id":566,"title":567,"body":568,"category":86,"description":593,"extension":15,"externalUrl":594,"featuredImage":89,"meta":595,"navigation":91,"path":596,"platform":93,"publishedAt":597,"readingTime":95,"seo":598,"status":97,"stem":599,"tags":600,"updatedAt":11,"__hash__":603},"writing\u002Fwriting\u002Fvuejs-css-frameworks-vuejs.md","Integrating and Using CSS Frameworks with Vue.js",{"type":8,"value":569,"toc":591},[570,577,584],[62,571,572,573,576],{},"This article explores how to integrate ",[66,574,575],{},"CSS frameworks with Vue.js"," while still preserving clean component design. Using Bootstrap 4 as the primary example and touching on Bulma and Foundation, it shows the setup process and the shared ideas behind bringing a framework into a Vue project.",[62,578,579,580,583],{},"What makes the piece valuable is that it goes beyond installation and focuses on ",[66,581,582],{},"best practices for theming, reusability, and component structure",". Rather than letting a CSS framework dictate every markup decision, the tutorial argues for using frameworks intentionally so Vue components stay modular and maintainable.",[62,585,586,587,590],{},"For developers comparing ",[66,588,589],{},"Bootstrap, Bulma, Foundation, and frontend styling strategies in Vue",", this guide is a practical overview of both setup and long-term tradeoffs.",{"title":11,"searchDepth":12,"depth":12,"links":592},[],"Learn how to integrate Bootstrap, Bulma, and Foundation with Vue.js while keeping your component architecture clean, reusable, and maintainable.","https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Fvuejs-css-frameworks-vuejs",{},"\u002Fwriting\u002Fvuejs-css-frameworks-vuejs","2018-04-01",{"title":567,"description":593},"writing\u002Fvuejs-css-frameworks-vuejs",[100,101,601,602],"CSS Frameworks","CSS","aBtvgCd1mEKj0MED2jVcQphezzC1vNeBRoYRLn2J1z4",{"id":605,"title":606,"body":607,"category":86,"description":631,"extension":15,"externalUrl":632,"featuredImage":521,"meta":633,"navigation":91,"path":634,"platform":93,"publishedAt":635,"readingTime":95,"seo":636,"status":97,"stem":637,"tags":638,"updatedAt":11,"__hash__":641},"writing\u002Fwriting\u002Fvuejs-vue-chart-js.md","How To Use Chart.js with Vue.js",{"type":8,"value":608,"toc":629},[609,615,622],[62,610,64,611,614],{},[66,612,613],{},"Chart.js with Vue.js tutorial"," shows how to turn reactive application data into polished charts inside a Vue component. It starts with project setup, then walks through building a reusable chart component that can render canvas-based visualizations without a lot of ceremony.",[62,616,617,618,621],{},"From there, the article explains how to prepare datasets, feed them into Chart.js, and display mixed chart types for richer ",[66,619,620],{},"data visualization in Vue",". The example stays practical, which makes it useful for dashboards, analytics views, and any interface where users need to understand trends quickly.",[62,623,624,625,628],{},"If you want a clean introduction to ",[66,626,627],{},"Vue charts, Chart.js integration, and reusable visualization components",", this article gives you the core ideas without unnecessary complexity.",{"title":11,"searchDepth":12,"depth":12,"links":630},[],"Learn how to use Chart.js with Vue.js to build reusable chart components, map reactive data to visualizations, and create interactive dashboards.","https:\u002F\u002Fwww.digitalocean.com\u002Fcommunity\u002Ftutorials\u002Fvuejs-vue-chart-js",{},"\u002Fwriting\u002Fvuejs-vue-chart-js","2018-01-28",{"title":606,"description":631},"writing\u002Fvuejs-vue-chart-js",[100,101,639,640],"Chart.js","Data Visualization","UVr-rx6eFqi7pVIWnywmhE3Nc4_zQ2dsDGN8_8IBLjM",{"id":643,"title":644,"body":645,"category":673,"description":674,"extension":15,"externalUrl":675,"featuredImage":676,"meta":677,"navigation":91,"path":678,"platform":679,"publishedAt":680,"readingTime":681,"seo":682,"status":97,"stem":683,"tags":684,"updatedAt":11,"__hash__":687},"writing\u002Fwriting\u002Fimporting-global-libraries-into-vue-cli-the-clean-way.md","Importing Global Libraries into Vue CLI (The Clean Way)",{"type":8,"value":646,"toc":671},[647,653,664],[62,648,64,649,652],{},[66,650,651],{},"Vue CLI and Webpack tutorial"," focuses on a cleaner way to import global libraries into a Vue project. Instead of relying on awkward relative paths or dropping global styles into the wrong place, the article uses Bulma to show how a small alias configuration can make dependency imports more readable and maintainable.",[62,654,655,656,659,660,663],{},"The tutorial walks through installing the package, defining a ",[66,657,658],{},"Webpack alias"," for the library, and importing it once in ",[202,661,662],{},"main.js"," so it is available throughout the application. It is short, but it solves a real problem for developers working with older Vue CLI and Webpack-based setups.",[62,665,666,667,670],{},"If you are looking for a practical approach to ",[66,668,669],{},"global library imports in Vue, Webpack aliases, and cleaner Bulma integration",", this article gives you the essential pattern quickly.",{"title":11,"searchDepth":12,"depth":12,"links":672},[],"Article","Learn the clean way to import global libraries into Vue CLI with Webpack aliases so shared CSS and JavaScript dependencies stay maintainable.","https:\u002F\u002Fmedium.com\u002Ffront-end-weekly\u002Fimporting-global-libraries-into-vue-cli-the-clean-way-9a7945213fa0","https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1400\u002Fformat:webp\u002F1*MoHYZRrpQcOociJZTo83zg.png",{},"\u002Fwriting\u002Fimporting-global-libraries-into-vue-cli-the-clean-way","Medium","2018-01-06",3,{"title":644,"description":674},"writing\u002Fimporting-global-libraries-into-vue-cli-the-clean-way",[100,101,685,686],"Webpack","Bulma","5lf6e557QtIdtAv8aBuUFysMPy9fkAc6uOEZN6sb464",{"id":689,"title":690,"body":691,"category":673,"description":714,"extension":15,"externalUrl":715,"featuredImage":521,"meta":716,"navigation":91,"path":717,"platform":679,"publishedAt":718,"readingTime":681,"seo":719,"status":97,"stem":720,"tags":721,"updatedAt":11,"__hash__":724},"writing\u002Fwriting\u002Fcreating-alias-for-package-imports-in-react.md","Creating Alias' For Package Imports in React",{"type":8,"value":692,"toc":712},[693,699,705],[62,694,64,695,698],{},[66,696,697],{},"React and Webpack article"," focuses on a small workflow improvement that has a big impact on code quality: creating import aliases. Instead of scattering deep relative paths throughout a project, the tutorial shows how aliases make components, assets, and shared dependencies easier to import and easier to refactor later.",[62,700,701,702,704],{},"The article contrasts brittle relative imports with cleaner root-based imports, then walks through adding a ",[66,703,658],{}," in a create-react-app setup after ejecting. It also shows how the same idea can apply to common dependencies, not just application components.",[62,706,707,708,711],{},"If you are trying to improve ",[66,709,710],{},"React import paths, create-react-app structure, Webpack aliases, and long-term maintainability",", this guide captures the core benefits of the pattern.",{"title":11,"searchDepth":12,"depth":12,"links":713},[],"Learn how to use Webpack aliases in React to replace brittle relative imports, clean up create-react-app code, and simplify front-end maintenance.","https:\u002F\u002Fmedium.com\u002Ffront-end-weekly\u002Fcreating-alias-for-package-imports-in-react-99d455284029",{},"\u002Fwriting\u002Fcreating-alias-for-package-imports-in-react","2017-12-29",{"title":690,"description":714},"writing\u002Fcreating-alias-for-package-imports-in-react",[100,722,685,723],"React","Create React App","KFGqyNUrlL7ZEFdMCoKuTab4dXaErbamcHLf14_bzAM",{"id":726,"title":727,"body":728,"category":673,"description":752,"extension":15,"externalUrl":753,"featuredImage":521,"meta":754,"navigation":91,"path":755,"platform":679,"publishedAt":756,"readingTime":757,"seo":758,"status":97,"stem":759,"tags":760,"updatedAt":11,"__hash__":765},"writing\u002Fwriting\u002Fhow-to-stay-ahead-of-googles-non-intrusive-popup-update.md","How to Stay Ahead of Google's Non-Intrusive Popup Update",{"type":8,"value":729,"toc":750},[730,740,743],[62,731,64,732,735,736,739],{},[66,733,734],{},"mobile SEO and UX article"," breaks down Google’s intrusive interstitial update, which began affecting search visibility on ",[66,737,738],{},"January 10, 2017",". The post explains why large popups and blocking interstitials create a poor mobile experience and how that can translate into ranking penalties when they interfere with page content.",[62,741,742],{},"The article outlines which popup patterns are risky, which exceptions remain acceptable, and why marketers need to rethink lead capture tactics when mobile usability is on the line. It then points to a more balanced alternative: a small, dismissible banner that expands only when the user chooses to engage.",[62,744,745,746,749],{},"If you are evaluating ",[66,747,748],{},"intrusive popups, interstitial penalties, mobile UX, and Google SEO guidance",", this summary captures the main takeaway from the original article: protect conversions without sacrificing the search experience.",{"title":11,"searchDepth":12,"depth":12,"links":751},[],"Learn how Google's intrusive interstitial update affects mobile SEO, which popups are risky, and how to protect rankings without hurting conversions.","https:\u002F\u002Fmedium.com\u002Fparsec-digital\u002Fhow-to-stay-ahead-of-googles-non-intrusive-popup-update-6c386f1ac1f6",{},"\u002Fwriting\u002Fhow-to-stay-ahead-of-googles-non-intrusive-popup-update","2016-09-18",4,{"title":727,"description":752},"writing\u002Fhow-to-stay-ahead-of-googles-non-intrusive-popup-update",[761,762,763,764],"SEO","Mobile SEO","UX","Google","CLCe83UuxMvvIqi8ioEC65iDWHmSpLqAV8qudZGjn1o",{"id":767,"title":768,"body":769,"category":673,"description":803,"extension":15,"externalUrl":804,"featuredImage":521,"meta":805,"navigation":91,"path":806,"platform":679,"publishedAt":807,"readingTime":681,"seo":808,"status":97,"stem":809,"tags":810,"updatedAt":11,"__hash__":814},"writing\u002Fwriting\u002Fwhich-is-better-for-seo-www-or-non-www.md","Which is Better for SEO?: WWW or non-WWW",{"type":8,"value":770,"toc":801},[771,784,794],[62,772,64,773,776,777,780,781,783],{},[66,774,775],{},"technical SEO article"," answers a question that still comes up in client work and site migrations: should you use ",[202,778,779],{},"www"," or a non-",[202,782,779],{}," domain? The core takeaway is straightforward. Google does not rank one version above the other, so the real SEO issue is not preference but consistency.",[62,785,786,787,221,790,793],{},"The article explains that search engines treat ",[202,788,789],{},"www.example.com",[202,791,792],{},"example.com"," as separate hosts, which means you need to choose a preferred version, keep your internal links aligned, and redirect the alternate version properly. It also frames the topic through branding and implementation rather than myths about ranking boosts.",[62,795,796,797,800],{},"If you care about ",[66,798,799],{},"domain canonicalization, redirects, technical SEO, and URL consistency",", this summary captures the key point of the original post: pick one version and stay disciplined everywhere.",{"title":11,"searchDepth":12,"depth":12,"links":802},[],"Learn whether www or non-www is better for SEO, how canonical redirects work, and why URL consistency matters more than domain preference.","https:\u002F\u002Fmedium.com\u002Fparsec-digital\u002Fwhich-is-better-for-seo-www-or-non-www-871edd4fe5aa",{},"\u002Fwriting\u002Fwhich-is-better-for-seo-www-or-non-www","2016-09-08",{"title":768,"description":803},"writing\u002Fwhich-is-better-for-seo-www-or-non-www",[761,811,812,813],"Technical SEO","Domains","Canonical URLs","FODRB4IEa5Ou23xQBPOpx-F4Y08Ipksby6ZqyFyylwY",1775505057990]