Real-Time with Nuxt 3: A Guide to WebSocket Integration
Learn how to bring real-time functionality to Nuxt 3 by building a foundation for a two-player board game, illustrating WebSocket setup, message handling, and in-game player interaction.
RSS Feed of krutiepatel.com
Vue.js and Nuxt.js blog and concept diagrams website feed!
Latest posts
Suffixes, Prefixes, and Nuxt Magic: A Developer’s Guide to Smart Coding
This guide will walk you through the essential prefixes and suffixes in Nuxt, explore what they do and the ways they can streamline your development process.
Understanding Aliases in Nuxt: A Detailed Breakdown
Learn about aliases in Nuxt that simplify and optimise the way you import files or modules in your project.
Understanding Auto-Imports in Nuxt
Learn about this powerful Nuxt feature designed to simplify development by automatically importing commonly used components, utilities, and composables without requiring manual imports in your code.
Server Components in Nuxt.js
A brief guide on Server Components in Nuxt.js, explaining what they are, when to use them, real-world examples, and best practices for implementation.
Server-Side Caching Strategies in Nuxt
In Nuxt.js, optimising performance and reducing server load requires effective use of both client-side and server-side caching strategies. This article explores how to implement server-side caching techniques to enhance your Nuxt projects.
Optimise API Caching: Balancing RouteRules with CacheEventHandler
In this article, we'll explore how to optimise API caching in Nuxt.js by balancing the use of API RouteRules and DefineCacheEventHandler. Learn which strategy takes precedence when handling API routes, how they interact, and how to effectively combine both for maximum performance and efficiency in your Nuxt applications.
Client-Side Caching Strategies in Nuxt
In Nuxt.js, optimising performance and reducing server load requires effective use of both client-side and server-side caching strategies. This article explores how to implement client-side caching techniques to enhance your Nuxt projects.
Vue Components Design Patterns: Back to Basics
Explore the foundational design patterns of Vue components in this comprehensive guide. Learn the basics of Single File Components, the Composition API, Render Function Components, Functional Components, and Renderless Components. Discover how to implement these patterns with practical examples, and enhance your understanding of Vue.js to build more efficient and maintainable applications.
Reactive Components in Vue
Reactive Components in Vue
Single File Components
Single File Components
Render Function Components
Render Function Components
Functional Components
Functional Components
Renderless Components
Renderless Components
From Nuxt 2 to Nuxt 3: Enhancing Performance and Flexibility
This blog dives deep into the transition from Nuxt 2 to Nuxt 3, highlighting how I enhanced both the performance and flexibility of my personal website.
Nuxt Layers Unwrapped - Q and A
Q and A - for my talk `Layers Unwrapped` at Nuxt Nation 2023
Nuxt Layers Unwrapped
A fresh approach to architect Nuxt 3 apps - supporting article for my talk `Layers Unwrapped` at Nuxt Nation 2023
nuxtServerInit: where is it in Nuxt 3
Learn how to implement nuxtServerInit in Nuxt 3
(untitled)
Simplify your understanding of #Nuxt Page Lifecycle with this week’s visual guide ✍️ Tap into each key stage of server-side rendering from runtime context to data fetching until the Vue component’s lifecycle takes over on the client-side 🚀
(untitled)
Nuxt 3 Layouts just got even better! This diagram explores how you can apply default, static and dynamic layouts, as well as apply them programmatically to customise the look and feel of your #Nuxt application.
(untitled)
This diagram illustrates the organisation of Nuxt pages, layouts, components, plugins, modules & all the new files & folders never seen before in Nuxt 2!
Nuxt Context: where is it in Nuxt 3
Learn what happened to Nuxt 2 context and where you can find it in Nuxt 3
How to think in terms of shapes, icons and legend
Beginners guide for front-end developers to create amazing conceptual diagrams
How to create technical conceptual diagrams
Beginners guide for front-end developers to create amazing conceptual diagrams
Compare DocsPage and MDX syntax in Storybook with example
Compare DocsPage vs MDX syntax side by side and learn to document components using Storybook
Create Card component story using Storybook with Nuxt
Create Card component story using Storybook with Nuxt
How to build Pinterest-like infinite grid in Nuxt
Build infinite loading masonry grid layout with Nuxt Composition API
(untitled)
Understand and write your own Nuxt modules
Nuxt Content module demo with sortable activity
Write, fetch and display data in Vue components using Nuxt content module.
(untitled)
Zoom in on Nuxt Content Module
(untitled)
Revised context diagram - Nuxt 2.13+
Convert bubble cannon animation from GSAP2 to GSAP3
Decipher bubble cannon animation created using GSAP 2 and convert it into GSAP 3 codebase along the way.
(untitled)
Improve Your Developer Experience With Nuxt Components
(untitled)
Revised version of Nuxt lifecycle hooks diagram ✍️ created for Nuxt 2.12
(untitled)
Little adventure with AWS ecosystem for the backend of my blog and obviously Nuxt for the frontend! AWS has overwhelming number of services, but I've started with the first five! And I've made this concept diagram to document my learning so far.
(untitled)
New to building custom VuePress theme? VuePress-theme-blog by @ ulivz is the perfect place to start. Here's one page explainer of how components are organised in VuePress blog-theme.
(untitled)
Vue application folder structure for the project created using Vue CLI 4
(untitled)
Little concept diagram to make sense of JavaScript proxy
(untitled)
Anatomy of Component in Vue 2 - one pager explainer to see what goes in Vue single-file component.
(untitled)
Anatomy of Component in Vue 2 - created in bullet-chamber style! One pager explainer to see what goes in Vue single-file component.
(untitled)
Context keys are huddled up in this single-page reference guide of Nuxt essential - one of my favourite features of Nuxt Js. Follow the colours & lines and it’ll all come together.
(untitled)
Brief summary of source code structure in Nuxt.js
Understanding modules, serverMiddleware and plugins in Nuxt Js Configuration
Understanding modules, serverMiddleware and plugins in Nuxt Js Configuration
(untitled)
This was my very first diagram I created for Nuxt Js! Understanding Nuxt.js Lifecycle Hooks... had ton of fun creating this diagram.