# Michael Hoffmann - Senior Frontend Developer (Freelancer) > Michael Hoffmann (@mokkapps) is a freelance Senior Frontend Developer from Germany. Known online as Mokkapps. Specializes in Vue.js, Nuxt.js, TypeScript, and AI-assisted development. Available for remote full-time Vue.js/Nuxt.js freelance work. ## Documentation Sets - [Michael Hoffmann (Mokkapps) — Full Site Content](https://mokkapps.de/llms-full.txt): Complete markdown export of mokkapps.de — pages, blog posts, and Vue tips for AI grounding. ## About & Hiring Core identity and hiring information for Michael Hoffmann (Mokkapps). - [About Michael Hoffmann](/about): Biography, experience, and expertise overview - [Hire Me — Vue.js & Nuxt.js Freelancer](/hire-me): Freelance Vue.js/Nuxt.js services, skills, and availability - [Work With Me](/en/work-with-me): Why hire Michael for Vue.js/Nuxt.js projects - [Testimonials](/testimonials): Client testimonials and references - [Contact](/contact): Get in touch for freelance inquiries ## Content Technical writing, talks, and Vue.js community content by Mokkapps. - [Blog](/blog): Technical blog on Vue.js, Nuxt.js, and frontend development - [Vue Tips](/vue-tips): Short Vue.js and Nuxt.js tips and tricks - [Publications & Talks](/publications): Conference talks, articles, and eBooks - [RSS Feed](/rss.xml): RSS feed of blog posts ## Projects Open-source and commercial projects by Michael Hoffmann. - [Projects](/projects): Portfolio of SaaS products and open-source tools - [Nuxt Starter Kit](https://nuxtstarterkit.com): Production-ready Nuxt starter kit for SaaS projects - [VueDigest](https://vuedigest.com): Daily Vue.js and Nuxt news digest ## Profiles & Community External profiles where Michael Hoffmann (Mokkapps) is active. - [GitHub — Mokkapps](https://github.com/mokkapps): Open-source repositories and contributions - [LinkedIn — Michael Hoffmann](https://www.linkedin.com/in/mokkapps): Professional profile and work history - [X (Twitter) — @mokkapps](https://x.com/mokkapps): Social updates on Vue.js and Nuxt.js - [YouTube — @mokkapps](https://www.youtube.com/@mokkapps): Video tutorials and talks - [Weekly Vue News](https://weekly-vue.news): Weekly newsletter about Vue.js and Nuxt.js ecosystem - [npm — Mokkapps](https://www.npmjs.com/~mokkapps): Published npm packages - [Dev.to — Mokkapps](https://dev.to/mokkapps): Technical articles on Dev.to ## Blog - [5 Reasons Why I Quit My Job And Started Freelancing](https://mokkapps.de/raw/blog/5-reasons-why-i-quit-my-job-and-started-freelancing.md): I recently quit my job and decided to start a new chapter in my life as a freelancer. This idea was in my head for about one year, but to be honest, back in these days, I was not brave enough to go this step. In this article, I want to tell you why I quit and started freelancing. These are the five reasons which I will talk about in detail: - [A Comprehensive Guide to Data Fetching in Nuxt 3](https://mokkapps.de/raw/blog/a-comprehensive-guide-to-data-fetching-in-nuxt-3.md): With Nuxt 3's rendering modes, you can execute API calls and render pages both on the client and server, which has some challenges. For example, we want to avoid duplicate network calls, efficient caching, and ensure that the calls work across environments. To address these challenges, Nuxt provides a built-in data fetching library ($fetch) and two composable (useFetch and useAsyncData). - [Analyze Memory Leaks in Your Nuxt App](https://mokkapps.de/raw/blog/analyze-memory-leaks-in-your-nuxt-app.md): In one of my client projects, we recently had to analyze and fix a memory leak in our Nuxt 3+ application. I share my experience and our steps to identify and fix the memory leak. - [Boost Your Productivity By Using The Terminal (iTerm & ZSH)](https://mokkapps.de/raw/blog/boost-your-productivity-by-using-the-terminal-iterm-and-zsh.md): Using the terminal is one of the biggest productivity boosts you can gain in your daily work as a developer. If you know your shortcuts, you will be way faster than using the mouse. In this article, I want to show you my terminal setup and how I use it on a daily basis. The cover image shows my current setup in action. - [Build and Deploy a Serverless GraphQL React App Using AWS Amplify](https://mokkapps.de/raw/blog/build-and-deploy-a-serverless-graphql-react-app-using-aws-amplify.md): Recently I recognized that some SaaS (Software as a Service) products use AWS Amplify which helps them to build serverless full-stack applications. I think serverless computing will be the future of apps and software. Therefore, I wanted to gather some hands-on experience, and I built a serverless application using AWS Amplify that uses React as frontend framework and GraphQL as backend API. - [Building a Polite Newsletter Popup With Nuxt 3](https://mokkapps.de/raw/blog/building-a-polite-newsletter-popup-with-nuxt-3.md): This year I launched a free eBook with 27 helpful tips for Vue developers for subscribers of my weekly Vue newsletter. For marketing purposes, I showed a popup on the landing page of my portfolio page each time a user visited my site. I was aware that users probably could get annoyed by that popup. Thus I added a "Don't show again" button to that popup. I thought I solved the problem! - [Building a Vue 3 Desktop App With Pinia, Electron and Quasar](https://mokkapps.de/raw/blog/building-a-vue-3-desktop-app-with-pinia-electron-and-quasar.md): Recently, I planned to rewrite my "Scrum Daily Standup Picker" Electron application in Vue 3. I wrote the initial release in Angular, but I wanted to refactor the code base and rewrite it in Vue 3. - [Chrome Recorder: Record, Replay and Measure User Flows](https://mokkapps.de/raw/blog/chrome-recorder-record-replay-and-measure-user-flows.md): Typically, a user needs to process multiple pages or steps to finish his journey, such as submitting an order or completing a registration. If we as developers need to develop one of the last pages of this user flow, we need to manually process all the previous pages/steps every time we refresh the page or need to restart the flow. - [Connecting a MySQL Database in Nuxt with Drizzle ORM](https://mokkapps.de/raw/blog/connecting-mysql-database-nuxt-drizzle-orm.md): Explore how to seamlessly integrate MySQL databases into your Nuxt applications using the Drizzle ORM. This guide covers setup, configuration, and an example of executing queries, all to enhance your full-stack development workflow with modern, efficient tools. - [Create a Blog With Nuxt Content v2](https://mokkapps.de/raw/blog/create-a-blog-with-nuxt-content-v2.md): I prefer simple Markdown files as the content source for my blog posts. In this article, I want to show you how can set up a simple blog using Nuxt Content v2. - [Create a Table of Contents With Active States in Nuxt 3](https://mokkapps.de/raw/blog/create-a-table-of-contents-with-active-states-in-nuxt-3.md): I'm a big fan of a table of contents (ToC) on the side of a blog post page, especially if it is a long article. It helps me gauge the article's length and allows me to navigate between the sections quickly. - [Create an RSS Feed With Nuxt 3 and Nuxt Content v2](https://mokkapps.de/raw/blog/create-an-rss-feed-with-nuxt-3-and-nuxt-content-v2.md): My portfolio website is built with Nuxt 3 and Nuxt Content v2. An RSS feed with my latest five blog posts is available here. In this article, you'll learn how to add an RSS feed to your Nuxt website. - [Dark Mode Switch With Tailwind CSS & Nuxt 3](https://mokkapps.de/raw/blog/dark-mode-switch-with-tailwind-css-and-nuxt-3.md): I am currently rewriting my portfolio website with Nuxt 3 which is still in beta. In this article, I want to show you how I implemented a dark mode switch in Nuxt 3 using Tailwind CSS that I will use in my new portfolio website. - [Debug Why React (Re-)Renders a Component](https://mokkapps.de/raw/blog/debug-why-react-re-renders-a-component.md): React is known for its performance by using the Virtual DOM (VDOM). It only triggers an update for the parts of the real DOM that have changed. In my opinion, it is important to know when React triggers a re-rendering of a component to be able to debug performance issues and develop fast and efficient components. - [Dockerizing a Nuxt App: A Comprehensive Guide](https://mokkapps.de/raw/blog/dockerizing-a-nuxt-app.md): Learn how to dockerize your Nuxt 3+ application to ensure consistency, isolation, scalability, and portability across different environments. This guide walks you through the steps to create a Docker container for your Nuxt 3+ app, making deployment seamless and efficient. - [Document & Test Vue 3 Components With Storybook](https://mokkapps.de/raw/blog/document-and-test-vue-3-components-with-storybook.md): Storybook is my tool of choice for UI component documentation. Vue.js is very well supported in the Storybook ecosystem and has first-class integrations with Vuetify and NuxtJS. It also has official support for Vue 3, the latest major installment of Vue.js. - [Document Your Nuxt Endpoints With OpenAPI and Visualize With Swagger or Scalar](https://mokkapps.de/raw/blog/document-your-nuxt-endpoints-with-open-api-and-visualize-with-swagger-or-scalar.md): Learn how to document your Nuxt endpoints using OpenAPI and easily visualize them with Swagger or Scalar. This guide walks you through setting up API documentation for better clarity, maintainability, and developer collaboration. - [Focus & Code Diff in Nuxt Content Code Blocks](https://mokkapps.de/raw/blog/focus-and-code-diff-in-nuxt-content-code-blocks.md): Custom code blocks are essential for my blog as my articles usually contain a lot of code snippets. My blog is powered by Nuxt Content v2, which is a Nuxt 3 module. I already wrote an article about how you can create custom code blocks using Nuxt Content v2. - [How I Built A Custom Stepper/Wizard Component Using The Angular Material CDK](https://mokkapps.de/raw/blog/how-i-built-a-custom-stepper-wizard-using-angular-material-cdk.md): Update 12.02.2018: Meanwhile, I have created a PR to the Angular Material repository and added there an official guide - [How I Built A Self-Updating README On My Github Profile](https://mokkapps.de/raw/blog/how-i-built-a-self-updating-readme-on-my-git-hub-profile.md): On Hacker News I discovered the article Building a self-updating profile README for GitHub. I was very fascinated about this new GitHub feature and wanted to build something similar for my GitHub profile. - [How I Built a Twitter Keyword Monitoring Using a Serverless Node.js Function With AWS Amplify](https://mokkapps.de/raw/blog/how-i-built-a-twitter-keyword-monitoring-using-a-serverless-node-js-function-with-aws-amplify.md): In this article, I will demonstrate to you how I built a simple serverless Node.js function on AWS that sends me a daily email with a list of tweets that mention me on Twitter. - [How I Built My Website With Hugo And Netlify](https://mokkapps.de/raw/blog/how-i-built-my-website-using-netlify-and-hugo.md): At the end of last year, I started working on my private portfolio website and researching how to build and deploy such static websites quickly. - [How I Increased My Productivity With Visual Studio Code](https://mokkapps.de/raw/blog/how-i-increased-my-productivity-with-visual-code.md): In this post, I will describe how I increased my productivity by learning to use Visual Studio Code more efficiently. - [How I Replaced Google Analytics With a Private, Open-Source & Self-Hosted Alternative](https://mokkapps.de/raw/blog/how-i-replaced-google-analytics-with-a-private-open-source-and-self-hosted-alternative.md): For me, it is important to see analytics about my portfolio website. This way, I can see which posts got the most views, which country my users are from, and which browser & operating system they are using. The simplest solution to add analytics to your site is Google Analytics as it is free and easy to set up. But as we all know, this service is only free as we pay it indirectly by providing data to it. What you need to know about Google Analytics and privacy. - [How I Replaced Revue With a Custom-Built Newsletter Service Using Nuxt 3, Supabase, Serverless, and Amazon SES](https://mokkapps.de/raw/blog/how-i-replaced-revue-with-a-custom-built-newsletter-service-using-nuxt-3-supabase-serverless-and-amazon-ses.md): Twitter will shut down Revue on January 18, 2023, which I previously used as a newsletter provider for Weekly Vue News. - [How I Set Up A New Angular Project](https://mokkapps.de/raw/blog/how-i-set-up-a-new-angular-project.md): I think Angular is the best choice for large enterprise applications. The basic project setup, which is generated using the Angular CLI is good, but I prefer another way to set up a new project. In this article, I want to talk about these topics: - [How I Write Marble Tests For RxJS Observables In Angular](https://mokkapps.de/raw/blog/how-i-write-marble-tests-for-rxjs-observables-in-angular.md): I am a passionate Reactive Extensions user and mostly use them in RxJS, which is integrated into the Angular framework. - [How I Write My Blog Posts](https://mokkapps.de/raw/blog/how-i-write-my-blog-posts.md): I'm often asked how I write my blog posts and in this article, I want to describe my process from start to finish. In this blog post I will cover these topics: - [How To Automatically Generate A Helpful Changelog From Your Git Commit Messages](https://mokkapps.de/raw/blog/how-to-automatically-generate-a-helpful-changelog-from-your-git-commit-messages.md): Creating a changelog is a usual task if a new software version is going to be released. It contains all the changes which were made since the last release and is helpful to remember what has changed in the code and to be able to inform the users of our code. - [How To Build An Angular App Once And Deploy It To Multiple Environments](https://mokkapps.de/raw/blog/how-to-build-an-angular-app-once-and-deploy-it-to-multiple-environments.md): In my last projects, we always had the same requirement: Build the application once and deploy the same build fragment to multiple environments. This leads to some technical challenges, as we need to be able to inject environment-specific information to our application during runtime. - [How to Create a Custom Code Block With Nuxt Content v2](https://mokkapps.de/raw/blog/how-to-create-a-custom-code-block-with-nuxt-content-v2.md): Code blocks are essential for blogs about software development. In this article, I want to show you how can define a custom code block component in Nuxt Content v2 with the following features: - [How to Deploy a Heroku Backend to a Netlify Subdomain](https://mokkapps.de/raw/blog/how-to-deploy-a-heroku-backend-to-a-netlify-subdomain.md): On my main domain mokkapps.de I have deployed my private portfolio website. For different use cases, I want to have a Node.js backend deployed to a subdomain, e.g. api.mokkapps.de. - [How To Easily Write And Debug RxJS Marble Tests](https://mokkapps.de/raw/blog/how-to-easily-write-and-debug-rxjs-marble-tests.md): End of 2018, I wrote an article about how I write marble tests for RxJS observables in Angular. The content is still valid, but I recently found a new library that I like and makes debugging marble tests easier. - [How To Generate Angular & Spring Code From OpenAPI Specification](https://mokkapps.de/raw/blog/how-to-generate-angular-and-spring-code-from-open-api-specification.md): If you are developing the backend and frontend part of an application you know that it can be tricky to keep the data models between the backend & frontend code in sync. Luckily, we can use generators that generate server stubs, models, configuration and more based on a OpenAPI specification. - [How to Use Environment Variables to Store Secrets in AWS Amplify Backend](https://mokkapps.de/raw/blog/how-to-use-environment-variables-to-store-secrets-in-aws-amplify-backend.md): The twelve-factor app is a known methodology for building software-as-a-service apps. One factor describes that an application's configuration should be stored in the environment and not in the code to enforce a strict separation of config from code. - [Implementing Edge-Side Rendering (ESR) in Nuxt 3+ for Enhanced Performance](https://mokkapps.de/raw/blog/implementing-esr-nuxt.md): Discover how Edge-Side Rendering (ESR) can be employed in Nuxt 3++ applications to improve performance by rendering content at the edge, closer to the end-user. - [JHipster - The Fastest Way To Build A Production-Ready Angular & Spring Boot Application](https://mokkapps.de/raw/blog/jhipster-the-fastest-way-to-build-a-production-ready-angular-and-spring-boot-application.md): In the last years, I mainly worked on the frontend part of web & mobile applications, but I also did some minor backend work. Since mid of this year, I have been working to improve my backend knowledge and started to focus on Java backend development using Spring Boot. - [Lazy Load Vue Component When It Becomes Visible](https://mokkapps.de/raw/blog/lazy-load-vue-component-when-it-becomes-visible.md): In this blog post, I'll show you how a simple mechanism to lazy load your Vue components if they become visible using the Intersection Observer API. - [Lessons Learned: My First Smartphone Game](https://mokkapps.de/raw/blog/lessons-learned-my-first-smartphone-game.md): In 2017, I have released my first smartphone game "Supermarket Challenge" for iOS and Android. I learned a lot during the game development and wanted to share my experiences with you. - [Login at Supabase via REST API in Playwright E2E Test](https://mokkapps.de/raw/blog/login-at-supabase-via-rest-api-in-playwright-e2e-test.md): Learn how to login a user via the Supabase REST API in a Playwright end-to-end test and test authenticated pages. - [Manually Lazy Load Modules And Components In Angular](https://mokkapps.de/raw/blog/manually-lazy-load-modules-and-components-in-angular.md): In Angular enterprise applications, it is often a requirement to load a configuration from a server via HTTP request which contains a UI configuration. Based on this configuration data, multiple modules and/or components need to be lazy-loaded and its routes dynamically added to the application. - [Monitoring Spring Boot Application With Micrometer, Prometheus And Grafana Using Custom Metrics](https://mokkapps.de/raw/blog/monitoring-spring-boot-application-with-micrometer-prometheus-and-grafana-using-custom-metrics.md): It is important to monitor an application's metrics and health which helps us to improve performance, manage the app in a better way, and notice unoptimized behavior. Monitoring each service is important to be able to maintain a system that consists of many microservices. - [My Definition Of A Senior Developer](https://mokkapps.de/raw/blog/my-definition-of-a-senior-software-developer.md): I met and worked with many other developers as a software developer. Some just started their apprenticeship, some started their first job after university, some already had multiple years of work experience, and some even had 10+ years of experience working as a software developer. - [My First NPM Package: github-traffic-cli](https://mokkapps.de/raw/blog/my-first-npm-package.md): Since I published my first projects on GitHub I've enjoyed viewing the traffic on my repositories. It is exciting to see how many people visit or clone my repositories. - [My First Visual Code Extension](https://mokkapps.de/raw/blog/my-first-vs-code-extension.md): I am a big fan of Visual Code and use it as my main IDE for software development. The available selection of extensions (see the Extension Marketplace) is amazing. - [My Top Angular Interview Questions](https://mokkapps.de/raw/blog/my-top-angular-interview-questions.md): This article summarizes a list of Angular interview questions that I would ask candidates and that I get often asked in interviews. - [My Top React Interview Questions](https://mokkapps.de/raw/blog/my-top-react-interview-questions.md): This article summarizes a list of React interview questions that I would ask candidates and that I get often asked in interviews. - [My Top Vue.js Interview Questions](https://mokkapps.de/raw/blog/my-top-vue-js-interview-questions.md): This article summarizes a list of Vue.js interview questions that I would ask candidates and that I get often asked in interviews. - [NestJS - The missing piece to easily develop full-stack TypeScript web applications](https://mokkapps.de/raw/blog/nest-js-the-missing-piece-to-easily-develop-full-stack-typescript-web-applications.md): I think we all know this problem: You need to develop a new web application, and therefore, you need to implement the application's core in the backend and frontend. Both can be time-consuming, and if you make the wrong architectural decisions in the beginning, they can hardly be maintainable over time. - [Property Based Testing With Typescript](https://mokkapps.de/raw/blog/property-based-testing-with-type-script.md): In my current project my colleague Michael Seifert introduced property based testing in our Python codebase. It was the first time I heard about it and it sounded fascinating, so I wanted to also implement it in our frontend code based on Vue.js with Jest as testing framework and TypeScript as programming language. - [Ref vs. Reactive: What to Choose Using Vue 3 Composition API?](https://mokkapps.de/raw/blog/ref-vs-reactive-what-to-choose-using-vue-3-composition-api.md): I love Vue 3's Composition API, but it provides two approaches to adding a reactive state to Vue components: ref and reactive. It can be cumbersome to use .value everywhere when using refs but you can also easily lose reactivity when destructuring reactive objects created with reactive. - [Rendering Dynamic Markdown in Nuxt 3+](https://mokkapps.de/raw/blog/rendering-dynamic-markdown-in-nuxt-3.md): Learn how to dynamically render markdown content in a Nuxt 3+ application using the @nuxtjs/mdc module. - [Run Automated Electron App Tests Using Travis CI](https://mokkapps.de/raw/blog/run-automated-electron-app-tests-using-travis-ci.md): Last year I developed the Standup Picker, which is an Angular application running in an Electron shell. - [Run, Build & Deploy Stencil and Storybook From One Repository](https://mokkapps.de/raw/blog/run-build-and-deploy-stencil-and-storybook-from-one-repository.md): I recently joined a project where the team used two separate Git repositories for their web components based on Stencil and Storybook. But the idea of Storybook is that the so-called "stories" live next to the components source code. Therefore, it made no sense to me to have those two tools in different repositories, and I combined them both in one repository. - [Self-Host Your Nuxt App With Coolify](https://mokkapps.de/raw/blog/self-host-your-nuxt-app-with-coolify.md): I share my experiences of how I self-hosted my Nuxt apps with Coolify on Hetzner servers. - [Sending Message To Specific Anonymous User On Spring WebSocket](https://mokkapps.de/raw/blog/sending-message-to-specific-anonymous-user-on-spring-websocket.md): In my current, I had the opportunity to develop a new application based on Vue.js in the frontend and Spring Boot in the backend. The backend should send updates to the frontend via a WebSocket connection so that users do not need to refresh the website to see the latest information. - [Simpler Two-Way Binding in Vue With defineModel](https://mokkapps.de/raw/blog/simpler-two-way-binding-in-vue-with-define-model.md): The new defineModel compiler macro has available since Vue 3.4 and makes two-way binding much simpler and cleaner. - [Sticky Footer in GatsbyJS using Flexbox](https://mokkapps.de/raw/blog/sticky-footer-in-gatsbyjs-using-flexbox.md): I recently developed some static websites based on GatsbyJS with a sticky footer. A sticky footer is always positioned on the bottom of the page, even for sparse content. - [The 10 Favorite Features of My Developer Portfolio Website](https://mokkapps.de/raw/blog/the-10-favorite-features-of-my-developer-portfolio-website.md): Inspired by Braydon Coyer's new blogfolio, I've added some excellent new features to my portfolio website. - [The Engineering Behind My Portfolio Website](https://mokkapps.de/raw/blog/the-engineering-behind-my-portfolio-website.md): I created my first personal website in 2017 when I launched my first smartphone game. I use Google Analytics in this game, and it is, therefore necessary to provide a link to a privacy policy website from inside the game. I used WordPress and a free theme as I had nearly no frontend knowledge at that time: - [The Last Guide For Angular Change Detection You'll Ever Need](https://mokkapps.de/raw/blog/the-last-guide-for-angular-change-detection-you-will-ever-need.md): Angular's Change Detection is a core mechanic of the framework but (at least from my experience) it is very hard to understand. Unfortunately, there exists no official guide on the official website about this topic. - [The Mistakes I Made In My First Software Project](https://mokkapps.de/raw/blog/the-mistakes-i-made-in-my-first-software-project.md): Before starting my professional career as a developer, I mainly developed Android apps using Java as the programming language. I got hired by a software service company, and we had to develop JavaScript-based applications for cars in my first project. So the first time in my life, I had to work with JavaScript, and I made many mistakes during this time which I now want to share with you. - [Track Twitter Follower Growth Over Time Using A Serverless Node.js API on AWS Amplify](https://mokkapps.de/raw/blog/track-twitter-follower-growth-over-time-using-an-serverless-node-js-api-on-aws-amplify.md): In March 2021 I started to use FeedHive to help me grow an audience on Twitter. Recently, I wanted to check how my Twitter followers have grown over time. Unfortunately, Twitter Analytics only provides data from the last 30 days. So I decided to develop a simple serverless API to fetch and store my follower count each month. - [Unlocking the Power of v-for Loops in Vue With These Useful Tips](https://mokkapps.de/raw/blog/unlocking-the-power-of-v-for-loops-in-vue-with-these-useful-tips.md): Looping through arrays and objects is a common task in Vue applications. The v-for directive is the perfect tool for this job. It is mighty, and you can use it in many different ways. In this article, I will show you some valuable tips and tricks to get the most out of the v-for directive. - [Use Git Bisect to Find the Commit That Introduced a Bug](https://mokkapps.de/raw/blog/use-git-bisect-to-find-the-commit-that-introduced-a-bug.md): As a developer you know that situation: the code worked like a charm and suddenly there is a bug but you have no idea where and when it was introduced. - [Use Nitro as Mock Server](https://mokkapps.de/raw/blog/use-nitro-as-mock-server.md): Nitro is a sever toolkit that allows you to create web servers with everything you need and deploy them wherever you prefer. It is used in Nuxt 3 to power the server-side part of your Nuxt applications. In this article, I will show you can use Nitro as a mock server for your frontend development. - [Use Shiki to Style Code Blocks in HTML Emails](https://mokkapps.de/raw/blog/use-shiki-to-style-code-blocks-in-html-emails.md): I recently developed a custom newsletter service using Nuxt 3. One of the main reasons why I developed it on my own was that I wanted to use good-looking code blocks in my emails. - [Vercel Acquires NuxtLabs: What This Means for the Future of Nuxt](https://mokkapps.de/raw/blog/vercel-acquires-nuxtlabs.md): Explore the implications of Vercel's acquisition of NuxtLabs and what it means for the Nuxt community. Discover how this will influence innovation, access to tools, and the broader ecosystem. - [Navigating State Management in Vue: Composables, Provide/Inject, and Pinia](https://mokkapps.de/raw/blog/vue-state-management-composables-provide-inject-pinia.md): Explore the best practices for using Composables, Provide/Inject, and Pinia in Vue applications. Learn when to use each approach to manage state effectively in your projects, understanding the nuances that make each method suitable for different scenarios. - [What's New in Vue 3.3](https://mokkapps.de/raw/blog/whats-new-in-vue-3-3.md): This article gives an overview of the highlighted features in Vue 3.3 - [When to Use useState in Nuxt](https://mokkapps.de/raw/blog/when-to-use-use-state-in-nuxt.md): Nuxt provides the useState composable which creates a reactive and SSR-friendly shared state. You might be confused when to use useState or ref in your Nuxt app. In this article, I want to answer this question - [Why A Good Frontend Developer Should Care About Web Accessibility](https://mokkapps.de/raw/blog/why-a-good-frontend-developer-should-care-about-web-accessibility.md): Cover image from Poakpong licensed under CC 2.0 - [Why I Developed My Own Nuxt Starter Kit for SaaS Products](https://mokkapps.de/raw/blog/why-i-developed-my-own-nuxt-starter-kit.md): Discover the reasons behind the development of my unique Nuxt starter kit tailored for creating SaaS products. Learn why I opted for a highly opinionated and custom solution over existing options, and how it enhances productivity and maintainability. - [Why I Love Vue 3's Composition API](https://mokkapps.de/raw/blog/why-i-love-vue-3-s-composition-api.md): Vue 3 introduced the Composition API to provide a better way to collocate code related to the same logical concern. In this article, I want to tell you why I love this new way of writing Vue components. - [Why I Picked Vue.js as My Freelancer Niche](https://mokkapps.de/raw/blog/why-i-picked-vue-js-as-my-freelancer-niche.md): I have professional experience with the three big players in web development: Angular, Vue.js and React. I've reached the point in my career where I need to choose one of the three frameworks/libraries that I will use for my future freelancing career. - [Why I Switched Back From VS Code to IntelliJ IDEA: A Developer's Journey](https://mokkapps.de/raw/blog/why-i-switched-back-from-vscode-to-intellij-idea.md): In this blog post, I'll share the reasons why I transitioned back to using IntelliJ as my primary integrated development environment (IDE) after a period with Visual Studio Code. Despite VS Code's early advantages for developing with Nuxt 3, recent developments have led me back to IntelliJ due to its superior Git integration, efficient project indexing, minimalist plugin needs, and robust debugging and database tools. - [Why I Switched From Visual Studio Code to JetBrains WebStorm (IntelliJ)](https://mokkapps.de/raw/blog/why-i-switched-from-vscode-to-webstorm.md): As I started my first JavaScript project in 2015, I used JetBrains WebStorm, which is an IDE (integrated development environment) for JavaScript development. I was already used to JetBrains IDEs as I worked before with Android Studio, which is based on IntelliJ IDEA. Additionally, I got a WebStorm license from my company and could use it without any restrictions. - [With These Tips You Will Rock Every Technical Job Interview](https://mokkapps.de/raw/blog/with-these-tips-you-will-rock-every-technical-job-interview.md): In my previous company, I got the opportunity to be one of 20 so-called "candidate interviewers". I participated in technical interviews, an essential part of this company's application procedure. I participated in about 30 interviews and learned a lot during this time, and I want to share my experiences with you. In my opinion, there are some rules to adhere to succeed in a technical interview. ## Content - [5 Reasons Why I Quit My Job And Started Freelancing](https://mokkapps.de/raw/blog/5-reasons-why-i-quit-my-job-and-started-freelancing.md): I recently quit my job and decided to start a new chapter in my life as a freelancer. This idea was in my head for about one year, but to be honest, back in these days, I was not brave enough to go this step. In this article, I want to tell you why I quit and started freelancing. These are the five reasons which I will talk about in detail: - [A Comprehensive Guide to Data Fetching in Nuxt 3](https://mokkapps.de/raw/blog/a-comprehensive-guide-to-data-fetching-in-nuxt-3.md): With Nuxt 3's rendering modes, you can execute API calls and render pages both on the client and server, which has some challenges. For example, we want to avoid duplicate network calls, efficient caching, and ensure that the calls work across environments. To address these challenges, Nuxt provides a built-in data fetching library ($fetch) and two composable (useFetch and useAsyncData). - [Analyze Memory Leaks in Your Nuxt App](https://mokkapps.de/raw/blog/analyze-memory-leaks-in-your-nuxt-app.md): In one of my client projects, we recently had to analyze and fix a memory leak in our Nuxt 3+ application. I share my experience and our steps to identify and fix the memory leak. - [Boost Your Productivity By Using The Terminal (iTerm & ZSH)](https://mokkapps.de/raw/blog/boost-your-productivity-by-using-the-terminal-iterm-and-zsh.md): Using the terminal is one of the biggest productivity boosts you can gain in your daily work as a developer. If you know your shortcuts, you will be way faster than using the mouse. In this article, I want to show you my terminal setup and how I use it on a daily basis. The cover image shows my current setup in action. - [Build and Deploy a Serverless GraphQL React App Using AWS Amplify](https://mokkapps.de/raw/blog/build-and-deploy-a-serverless-graphql-react-app-using-aws-amplify.md): Recently I recognized that some SaaS (Software as a Service) products use AWS Amplify which helps them to build serverless full-stack applications. I think serverless computing will be the future of apps and software. Therefore, I wanted to gather some hands-on experience, and I built a serverless application using AWS Amplify that uses React as frontend framework and GraphQL as backend API. - [Building a Polite Newsletter Popup With Nuxt 3](https://mokkapps.de/raw/blog/building-a-polite-newsletter-popup-with-nuxt-3.md): This year I launched a free eBook with 27 helpful tips for Vue developers for subscribers of my weekly Vue newsletter. For marketing purposes, I showed a popup on the landing page of my portfolio page each time a user visited my site. I was aware that users probably could get annoyed by that popup. Thus I added a "Don't show again" button to that popup. I thought I solved the problem! - [Building a Vue 3 Desktop App With Pinia, Electron and Quasar](https://mokkapps.de/raw/blog/building-a-vue-3-desktop-app-with-pinia-electron-and-quasar.md): Recently, I planned to rewrite my "Scrum Daily Standup Picker" Electron application in Vue 3. I wrote the initial release in Angular, but I wanted to refactor the code base and rewrite it in Vue 3. - [Chrome Recorder: Record, Replay and Measure User Flows](https://mokkapps.de/raw/blog/chrome-recorder-record-replay-and-measure-user-flows.md): Typically, a user needs to process multiple pages or steps to finish his journey, such as submitting an order or completing a registration. If we as developers need to develop one of the last pages of this user flow, we need to manually process all the previous pages/steps every time we refresh the page or need to restart the flow. - [Connecting a MySQL Database in Nuxt with Drizzle ORM](https://mokkapps.de/raw/blog/connecting-mysql-database-nuxt-drizzle-orm.md): Explore how to seamlessly integrate MySQL databases into your Nuxt applications using the Drizzle ORM. This guide covers setup, configuration, and an example of executing queries, all to enhance your full-stack development workflow with modern, efficient tools. - [Create a Blog With Nuxt Content v2](https://mokkapps.de/raw/blog/create-a-blog-with-nuxt-content-v2.md): I prefer simple Markdown files as the content source for my blog posts. In this article, I want to show you how can set up a simple blog using Nuxt Content v2. - [Create a Table of Contents With Active States in Nuxt 3](https://mokkapps.de/raw/blog/create-a-table-of-contents-with-active-states-in-nuxt-3.md): I'm a big fan of a table of contents (ToC) on the side of a blog post page, especially if it is a long article. It helps me gauge the article's length and allows me to navigate between the sections quickly. - [Create an RSS Feed With Nuxt 3 and Nuxt Content v2](https://mokkapps.de/raw/blog/create-an-rss-feed-with-nuxt-3-and-nuxt-content-v2.md): My portfolio website is built with Nuxt 3 and Nuxt Content v2. An RSS feed with my latest five blog posts is available here. In this article, you'll learn how to add an RSS feed to your Nuxt website. - [Dark Mode Switch With Tailwind CSS & Nuxt 3](https://mokkapps.de/raw/blog/dark-mode-switch-with-tailwind-css-and-nuxt-3.md): I am currently rewriting my portfolio website with Nuxt 3 which is still in beta. In this article, I want to show you how I implemented a dark mode switch in Nuxt 3 using Tailwind CSS that I will use in my new portfolio website. - [Debug Why React (Re-)Renders a Component](https://mokkapps.de/raw/blog/debug-why-react-re-renders-a-component.md): React is known for its performance by using the Virtual DOM (VDOM). It only triggers an update for the parts of the real DOM that have changed. In my opinion, it is important to know when React triggers a re-rendering of a component to be able to debug performance issues and develop fast and efficient components. - [Dockerizing a Nuxt App: A Comprehensive Guide](https://mokkapps.de/raw/blog/dockerizing-a-nuxt-app.md): Learn how to dockerize your Nuxt 3+ application to ensure consistency, isolation, scalability, and portability across different environments. This guide walks you through the steps to create a Docker container for your Nuxt 3+ app, making deployment seamless and efficient. - [Document & Test Vue 3 Components With Storybook](https://mokkapps.de/raw/blog/document-and-test-vue-3-components-with-storybook.md): Storybook is my tool of choice for UI component documentation. Vue.js is very well supported in the Storybook ecosystem and has first-class integrations with Vuetify and NuxtJS. It also has official support for Vue 3, the latest major installment of Vue.js. - [Document Your Nuxt Endpoints With OpenAPI and Visualize With Swagger or Scalar](https://mokkapps.de/raw/blog/document-your-nuxt-endpoints-with-open-api-and-visualize-with-swagger-or-scalar.md): Learn how to document your Nuxt endpoints using OpenAPI and easily visualize them with Swagger or Scalar. This guide walks you through setting up API documentation for better clarity, maintainability, and developer collaboration. - [Focus & Code Diff in Nuxt Content Code Blocks](https://mokkapps.de/raw/blog/focus-and-code-diff-in-nuxt-content-code-blocks.md): Custom code blocks are essential for my blog as my articles usually contain a lot of code snippets. My blog is powered by Nuxt Content v2, which is a Nuxt 3 module. I already wrote an article about how you can create custom code blocks using Nuxt Content v2. - [How I Built A Custom Stepper/Wizard Component Using The Angular Material CDK](https://mokkapps.de/raw/blog/how-i-built-a-custom-stepper-wizard-using-angular-material-cdk.md): Update 12.02.2018: Meanwhile, I have created a PR to the Angular Material repository and added there an official guide - [How I Built A Self-Updating README On My Github Profile](https://mokkapps.de/raw/blog/how-i-built-a-self-updating-readme-on-my-git-hub-profile.md): On Hacker News I discovered the article Building a self-updating profile README for GitHub. I was very fascinated about this new GitHub feature and wanted to build something similar for my GitHub profile. - [How I Built a Twitter Keyword Monitoring Using a Serverless Node.js Function With AWS Amplify](https://mokkapps.de/raw/blog/how-i-built-a-twitter-keyword-monitoring-using-a-serverless-node-js-function-with-aws-amplify.md): In this article, I will demonstrate to you how I built a simple serverless Node.js function on AWS that sends me a daily email with a list of tweets that mention me on Twitter. - [How I Built My Website With Hugo And Netlify](https://mokkapps.de/raw/blog/how-i-built-my-website-using-netlify-and-hugo.md): At the end of last year, I started working on my private portfolio website and researching how to build and deploy such static websites quickly. - [How I Increased My Productivity With Visual Studio Code](https://mokkapps.de/raw/blog/how-i-increased-my-productivity-with-visual-code.md): In this post, I will describe how I increased my productivity by learning to use Visual Studio Code more efficiently. - [How I Replaced Google Analytics With a Private, Open-Source & Self-Hosted Alternative](https://mokkapps.de/raw/blog/how-i-replaced-google-analytics-with-a-private-open-source-and-self-hosted-alternative.md): For me, it is important to see analytics about my portfolio website. This way, I can see which posts got the most views, which country my users are from, and which browser & operating system they are using. The simplest solution to add analytics to your site is Google Analytics as it is free and easy to set up. But as we all know, this service is only free as we pay it indirectly by providing data to it. What you need to know about Google Analytics and privacy. - [How I Replaced Revue With a Custom-Built Newsletter Service Using Nuxt 3, Supabase, Serverless, and Amazon SES](https://mokkapps.de/raw/blog/how-i-replaced-revue-with-a-custom-built-newsletter-service-using-nuxt-3-supabase-serverless-and-amazon-ses.md): Twitter will shut down Revue on January 18, 2023, which I previously used as a newsletter provider for Weekly Vue News. - [How I Set Up A New Angular Project](https://mokkapps.de/raw/blog/how-i-set-up-a-new-angular-project.md): I think Angular is the best choice for large enterprise applications. The basic project setup, which is generated using the Angular CLI is good, but I prefer another way to set up a new project. In this article, I want to talk about these topics: - [How I Write Marble Tests For RxJS Observables In Angular](https://mokkapps.de/raw/blog/how-i-write-marble-tests-for-rxjs-observables-in-angular.md): I am a passionate Reactive Extensions user and mostly use them in RxJS, which is integrated into the Angular framework. - [How I Write My Blog Posts](https://mokkapps.de/raw/blog/how-i-write-my-blog-posts.md): I'm often asked how I write my blog posts and in this article, I want to describe my process from start to finish. In this blog post I will cover these topics: - [How To Automatically Generate A Helpful Changelog From Your Git Commit Messages](https://mokkapps.de/raw/blog/how-to-automatically-generate-a-helpful-changelog-from-your-git-commit-messages.md): Creating a changelog is a usual task if a new software version is going to be released. It contains all the changes which were made since the last release and is helpful to remember what has changed in the code and to be able to inform the users of our code. - [How To Build An Angular App Once And Deploy It To Multiple Environments](https://mokkapps.de/raw/blog/how-to-build-an-angular-app-once-and-deploy-it-to-multiple-environments.md): In my last projects, we always had the same requirement: Build the application once and deploy the same build fragment to multiple environments. This leads to some technical challenges, as we need to be able to inject environment-specific information to our application during runtime. - [How to Create a Custom Code Block With Nuxt Content v2](https://mokkapps.de/raw/blog/how-to-create-a-custom-code-block-with-nuxt-content-v2.md): Code blocks are essential for blogs about software development. In this article, I want to show you how can define a custom code block component in Nuxt Content v2 with the following features: - [How to Deploy a Heroku Backend to a Netlify Subdomain](https://mokkapps.de/raw/blog/how-to-deploy-a-heroku-backend-to-a-netlify-subdomain.md): On my main domain mokkapps.de I have deployed my private portfolio website. For different use cases, I want to have a Node.js backend deployed to a subdomain, e.g. api.mokkapps.de. - [How To Easily Write And Debug RxJS Marble Tests](https://mokkapps.de/raw/blog/how-to-easily-write-and-debug-rxjs-marble-tests.md): End of 2018, I wrote an article about how I write marble tests for RxJS observables in Angular. The content is still valid, but I recently found a new library that I like and makes debugging marble tests easier. - [How To Generate Angular & Spring Code From OpenAPI Specification](https://mokkapps.de/raw/blog/how-to-generate-angular-and-spring-code-from-open-api-specification.md): If you are developing the backend and frontend part of an application you know that it can be tricky to keep the data models between the backend & frontend code in sync. Luckily, we can use generators that generate server stubs, models, configuration and more based on a OpenAPI specification. - [How to Use Environment Variables to Store Secrets in AWS Amplify Backend](https://mokkapps.de/raw/blog/how-to-use-environment-variables-to-store-secrets-in-aws-amplify-backend.md): The twelve-factor app is a known methodology for building software-as-a-service apps. One factor describes that an application's configuration should be stored in the environment and not in the code to enforce a strict separation of config from code. - [Implementing Edge-Side Rendering (ESR) in Nuxt 3+ for Enhanced Performance](https://mokkapps.de/raw/blog/implementing-esr-nuxt.md): Discover how Edge-Side Rendering (ESR) can be employed in Nuxt 3++ applications to improve performance by rendering content at the edge, closer to the end-user. - [JHipster - The Fastest Way To Build A Production-Ready Angular & Spring Boot Application](https://mokkapps.de/raw/blog/jhipster-the-fastest-way-to-build-a-production-ready-angular-and-spring-boot-application.md): In the last years, I mainly worked on the frontend part of web & mobile applications, but I also did some minor backend work. Since mid of this year, I have been working to improve my backend knowledge and started to focus on Java backend development using Spring Boot. - [Lazy Load Vue Component When It Becomes Visible](https://mokkapps.de/raw/blog/lazy-load-vue-component-when-it-becomes-visible.md): In this blog post, I'll show you how a simple mechanism to lazy load your Vue components if they become visible using the Intersection Observer API. - [Lessons Learned: My First Smartphone Game](https://mokkapps.de/raw/blog/lessons-learned-my-first-smartphone-game.md): In 2017, I have released my first smartphone game "Supermarket Challenge" for iOS and Android. I learned a lot during the game development and wanted to share my experiences with you. - [Login at Supabase via REST API in Playwright E2E Test](https://mokkapps.de/raw/blog/login-at-supabase-via-rest-api-in-playwright-e2e-test.md): Learn how to login a user via the Supabase REST API in a Playwright end-to-end test and test authenticated pages. - [Manually Lazy Load Modules And Components In Angular](https://mokkapps.de/raw/blog/manually-lazy-load-modules-and-components-in-angular.md): In Angular enterprise applications, it is often a requirement to load a configuration from a server via HTTP request which contains a UI configuration. Based on this configuration data, multiple modules and/or components need to be lazy-loaded and its routes dynamically added to the application. - [Monitoring Spring Boot Application With Micrometer, Prometheus And Grafana Using Custom Metrics](https://mokkapps.de/raw/blog/monitoring-spring-boot-application-with-micrometer-prometheus-and-grafana-using-custom-metrics.md): It is important to monitor an application's metrics and health which helps us to improve performance, manage the app in a better way, and notice unoptimized behavior. Monitoring each service is important to be able to maintain a system that consists of many microservices. - [My Definition Of A Senior Developer](https://mokkapps.de/raw/blog/my-definition-of-a-senior-software-developer.md): I met and worked with many other developers as a software developer. Some just started their apprenticeship, some started their first job after university, some already had multiple years of work experience, and some even had 10+ years of experience working as a software developer. - [My First NPM Package: github-traffic-cli](https://mokkapps.de/raw/blog/my-first-npm-package.md): Since I published my first projects on GitHub I've enjoyed viewing the traffic on my repositories. It is exciting to see how many people visit or clone my repositories. - [My First Visual Code Extension](https://mokkapps.de/raw/blog/my-first-vs-code-extension.md): I am a big fan of Visual Code and use it as my main IDE for software development. The available selection of extensions (see the Extension Marketplace) is amazing. - [My Top Angular Interview Questions](https://mokkapps.de/raw/blog/my-top-angular-interview-questions.md): This article summarizes a list of Angular interview questions that I would ask candidates and that I get often asked in interviews. - [My Top React Interview Questions](https://mokkapps.de/raw/blog/my-top-react-interview-questions.md): This article summarizes a list of React interview questions that I would ask candidates and that I get often asked in interviews. - [My Top Vue.js Interview Questions](https://mokkapps.de/raw/blog/my-top-vue-js-interview-questions.md): This article summarizes a list of Vue.js interview questions that I would ask candidates and that I get often asked in interviews. - [NestJS - The missing piece to easily develop full-stack TypeScript web applications](https://mokkapps.de/raw/blog/nest-js-the-missing-piece-to-easily-develop-full-stack-typescript-web-applications.md): I think we all know this problem: You need to develop a new web application, and therefore, you need to implement the application's core in the backend and frontend. Both can be time-consuming, and if you make the wrong architectural decisions in the beginning, they can hardly be maintainable over time. - [Property Based Testing With Typescript](https://mokkapps.de/raw/blog/property-based-testing-with-type-script.md): In my current project my colleague Michael Seifert introduced property based testing in our Python codebase. It was the first time I heard about it and it sounded fascinating, so I wanted to also implement it in our frontend code based on Vue.js with Jest as testing framework and TypeScript as programming language. - [Ref vs. Reactive: What to Choose Using Vue 3 Composition API?](https://mokkapps.de/raw/blog/ref-vs-reactive-what-to-choose-using-vue-3-composition-api.md): I love Vue 3's Composition API, but it provides two approaches to adding a reactive state to Vue components: ref and reactive. It can be cumbersome to use .value everywhere when using refs but you can also easily lose reactivity when destructuring reactive objects created with reactive. - [Rendering Dynamic Markdown in Nuxt 3+](https://mokkapps.de/raw/blog/rendering-dynamic-markdown-in-nuxt-3.md): Learn how to dynamically render markdown content in a Nuxt 3+ application using the @nuxtjs/mdc module. - [Run Automated Electron App Tests Using Travis CI](https://mokkapps.de/raw/blog/run-automated-electron-app-tests-using-travis-ci.md): Last year I developed the Standup Picker, which is an Angular application running in an Electron shell. - [Run, Build & Deploy Stencil and Storybook From One Repository](https://mokkapps.de/raw/blog/run-build-and-deploy-stencil-and-storybook-from-one-repository.md): I recently joined a project where the team used two separate Git repositories for their web components based on Stencil and Storybook. But the idea of Storybook is that the so-called "stories" live next to the components source code. Therefore, it made no sense to me to have those two tools in different repositories, and I combined them both in one repository. - [Self-Host Your Nuxt App With Coolify](https://mokkapps.de/raw/blog/self-host-your-nuxt-app-with-coolify.md): I share my experiences of how I self-hosted my Nuxt apps with Coolify on Hetzner servers. - [Sending Message To Specific Anonymous User On Spring WebSocket](https://mokkapps.de/raw/blog/sending-message-to-specific-anonymous-user-on-spring-websocket.md): In my current, I had the opportunity to develop a new application based on Vue.js in the frontend and Spring Boot in the backend. The backend should send updates to the frontend via a WebSocket connection so that users do not need to refresh the website to see the latest information. - [Simpler Two-Way Binding in Vue With defineModel](https://mokkapps.de/raw/blog/simpler-two-way-binding-in-vue-with-define-model.md): The new defineModel compiler macro has available since Vue 3.4 and makes two-way binding much simpler and cleaner. - [Sticky Footer in GatsbyJS using Flexbox](https://mokkapps.de/raw/blog/sticky-footer-in-gatsbyjs-using-flexbox.md): I recently developed some static websites based on GatsbyJS with a sticky footer. A sticky footer is always positioned on the bottom of the page, even for sparse content. - [The 10 Favorite Features of My Developer Portfolio Website](https://mokkapps.de/raw/blog/the-10-favorite-features-of-my-developer-portfolio-website.md): Inspired by Braydon Coyer's new blogfolio, I've added some excellent new features to my portfolio website. - [The Engineering Behind My Portfolio Website](https://mokkapps.de/raw/blog/the-engineering-behind-my-portfolio-website.md): I created my first personal website in 2017 when I launched my first smartphone game. I use Google Analytics in this game, and it is, therefore necessary to provide a link to a privacy policy website from inside the game. I used WordPress and a free theme as I had nearly no frontend knowledge at that time: - [The Last Guide For Angular Change Detection You'll Ever Need](https://mokkapps.de/raw/blog/the-last-guide-for-angular-change-detection-you-will-ever-need.md): Angular's Change Detection is a core mechanic of the framework but (at least from my experience) it is very hard to understand. Unfortunately, there exists no official guide on the official website about this topic. - [The Mistakes I Made In My First Software Project](https://mokkapps.de/raw/blog/the-mistakes-i-made-in-my-first-software-project.md): Before starting my professional career as a developer, I mainly developed Android apps using Java as the programming language. I got hired by a software service company, and we had to develop JavaScript-based applications for cars in my first project. So the first time in my life, I had to work with JavaScript, and I made many mistakes during this time which I now want to share with you. - [Track Twitter Follower Growth Over Time Using A Serverless Node.js API on AWS Amplify](https://mokkapps.de/raw/blog/track-twitter-follower-growth-over-time-using-an-serverless-node-js-api-on-aws-amplify.md): In March 2021 I started to use FeedHive to help me grow an audience on Twitter. Recently, I wanted to check how my Twitter followers have grown over time. Unfortunately, Twitter Analytics only provides data from the last 30 days. So I decided to develop a simple serverless API to fetch and store my follower count each month. - [Unlocking the Power of v-for Loops in Vue With These Useful Tips](https://mokkapps.de/raw/blog/unlocking-the-power-of-v-for-loops-in-vue-with-these-useful-tips.md): Looping through arrays and objects is a common task in Vue applications. The v-for directive is the perfect tool for this job. It is mighty, and you can use it in many different ways. In this article, I will show you some valuable tips and tricks to get the most out of the v-for directive. - [Use Git Bisect to Find the Commit That Introduced a Bug](https://mokkapps.de/raw/blog/use-git-bisect-to-find-the-commit-that-introduced-a-bug.md): As a developer you know that situation: the code worked like a charm and suddenly there is a bug but you have no idea where and when it was introduced. - [Use Nitro as Mock Server](https://mokkapps.de/raw/blog/use-nitro-as-mock-server.md): Nitro is a sever toolkit that allows you to create web servers with everything you need and deploy them wherever you prefer. It is used in Nuxt 3 to power the server-side part of your Nuxt applications. In this article, I will show you can use Nitro as a mock server for your frontend development. - [Use Shiki to Style Code Blocks in HTML Emails](https://mokkapps.de/raw/blog/use-shiki-to-style-code-blocks-in-html-emails.md): I recently developed a custom newsletter service using Nuxt 3. One of the main reasons why I developed it on my own was that I wanted to use good-looking code blocks in my emails. - [Vercel Acquires NuxtLabs: What This Means for the Future of Nuxt](https://mokkapps.de/raw/blog/vercel-acquires-nuxtlabs.md): Explore the implications of Vercel's acquisition of NuxtLabs and what it means for the Nuxt community. Discover how this will influence innovation, access to tools, and the broader ecosystem. - [Navigating State Management in Vue: Composables, Provide/Inject, and Pinia](https://mokkapps.de/raw/blog/vue-state-management-composables-provide-inject-pinia.md): Explore the best practices for using Composables, Provide/Inject, and Pinia in Vue applications. Learn when to use each approach to manage state effectively in your projects, understanding the nuances that make each method suitable for different scenarios. - [What's New in Vue 3.3](https://mokkapps.de/raw/blog/whats-new-in-vue-3-3.md): This article gives an overview of the highlighted features in Vue 3.3 - [When to Use useState in Nuxt](https://mokkapps.de/raw/blog/when-to-use-use-state-in-nuxt.md): Nuxt provides the useState composable which creates a reactive and SSR-friendly shared state. You might be confused when to use useState or ref in your Nuxt app. In this article, I want to answer this question - [Why A Good Frontend Developer Should Care About Web Accessibility](https://mokkapps.de/raw/blog/why-a-good-frontend-developer-should-care-about-web-accessibility.md): Cover image from Poakpong licensed under CC 2.0 - [Why I Developed My Own Nuxt Starter Kit for SaaS Products](https://mokkapps.de/raw/blog/why-i-developed-my-own-nuxt-starter-kit.md): Discover the reasons behind the development of my unique Nuxt starter kit tailored for creating SaaS products. Learn why I opted for a highly opinionated and custom solution over existing options, and how it enhances productivity and maintainability. - [Why I Love Vue 3's Composition API](https://mokkapps.de/raw/blog/why-i-love-vue-3-s-composition-api.md): Vue 3 introduced the Composition API to provide a better way to collocate code related to the same logical concern. In this article, I want to tell you why I love this new way of writing Vue components. - [Why I Picked Vue.js as My Freelancer Niche](https://mokkapps.de/raw/blog/why-i-picked-vue-js-as-my-freelancer-niche.md): I have professional experience with the three big players in web development: Angular, Vue.js and React. I've reached the point in my career where I need to choose one of the three frameworks/libraries that I will use for my future freelancing career. - [Why I Switched Back From VS Code to IntelliJ IDEA: A Developer's Journey](https://mokkapps.de/raw/blog/why-i-switched-back-from-vscode-to-intellij-idea.md): In this blog post, I'll share the reasons why I transitioned back to using IntelliJ as my primary integrated development environment (IDE) after a period with Visual Studio Code. Despite VS Code's early advantages for developing with Nuxt 3, recent developments have led me back to IntelliJ due to its superior Git integration, efficient project indexing, minimalist plugin needs, and robust debugging and database tools. - [Why I Switched From Visual Studio Code to JetBrains WebStorm (IntelliJ)](https://mokkapps.de/raw/blog/why-i-switched-from-vscode-to-webstorm.md): As I started my first JavaScript project in 2015, I used JetBrains WebStorm, which is an IDE (integrated development environment) for JavaScript development. I was already used to JetBrains IDEs as I worked before with Android Studio, which is based on IntelliJ IDEA. Additionally, I got a WebStorm license from my company and could use it without any restrictions. - [With These Tips You Will Rock Every Technical Job Interview](https://mokkapps.de/raw/blog/with-these-tips-you-will-rock-every-technical-job-interview.md): In my previous company, I got the opportunity to be one of 20 so-called "candidate interviewers". I participated in technical interviews, an essential part of this company's application procedure. I participated in about 30 interviews and learned a lot during this time, and I want to share my experiences with you. In my opinion, there are some rules to adhere to succeed in a technical interview. - [Content Components Demo](https://mokkapps.de/raw/content-components.md) - [Über mich](https://mokkapps.de/raw/de/about.md) - [Arbeite mit mir zusammen](https://mokkapps.de/raw/de/work-with-me.md) - [27 Helpful Tips for Vue Developers](https://mokkapps.de/raw/ebook/27-helpful-tips-for-vue-developers.md): Do you want to bring your Vue knowledge to the next level? In this free eBook, I will show you 27 helpful Vue.js tips that will help you reach that goal. - [About me](https://mokkapps.de/raw/en/about.md) - [Work with me](https://mokkapps.de/raw/en/work-with-me.md) - [Legal Disclosure](https://mokkapps.de/raw/legal-notice.md) - [Parents Soundboard](https://mokkapps.de/raw/parents-soundboard.md): iOS & Android soundboard app where you can define custom sentences and let the smartphone speak them for you. - [Privacy Policy](https://mokkapps.de/raw/privacy-policy.md) - [RebelGamer](https://mokkapps.de/raw/rebelgamer.md): iOS & Android news app for the German gaming blog RebelGamer.de - [Standup Picker](https://mokkapps.de/raw/standup-picker.md): A Vue.js desktop application which can be used in Scrum teams to initiate the daily Scrum meeting. - [Supermarket Challenge](https://mokkapps.de/raw/supermarket-challenge.md): Supermarket Challenge is an iOS & Android smartphone game that delivers an addictive gameplay experience. - [JavaScript Tip: Throw an Error if a Required Parameter Is Missing](https://mokkapps.de/raw/tips/js/a-function-that-throws-an-error-if-a-required-parameter-is-missing.md): Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed. We can use this approach to write a function that throws an error if a required parameter is missing. - [JavaScript Tip: Get Valuable Info About Device Battery](https://mokkapps.de/raw/tips/js/battery-api-get-valuable-info-about-device-battery.md): TODO - [JavaScript Tip: How to Sort an Array of Integers](https://mokkapps.de/raw/tips/js/how-to-sort-an-array-of-integers.md): To sort an array of integers in JavaScript, we must provide a compare function that defines the sort order. - [JavaScript Tip: Replace Switch Statements With Object Literals](https://mokkapps.de/raw/tips/js/replace-switch-statements-with-object-literals.md): I prefer using JavaScript's object literals over switch statements as the code is faster, more readable, and less verbose. - [JavaScript Tip: Return Object Literal From an Arrow Function](https://mokkapps.de/raw/tips/js/return-object-literal-from-an-arrow-function.md): How to return an object literal from an expression-bodied arrow function as introduced by ECMAScript 2015. - [Uses](https://mokkapps.de/raw/uses.md): List of tools and hardware that I use on a daily basis. - [Vue Tip: Access DOM in Watcher Callback After Vue Updated It](https://mokkapps.de/raw/vue-tips/access-dom-in-watcher-callback-after-vue-updated-it.md): To access the DOM after Vue has updated it in a watcher callback, you can use the flush post option.' - [Nuxt Tip: Accessing Pinia Store in Production Build](https://mokkapps.de/raw/vue-tips/accessing-pinia-store-in-nuxt-production-build.md): A concise guide on how to access your Pinia store within a Nuxt production build. - [Vue Tip: Accessing Template Ref in Child Component](https://mokkapps.de/raw/vue-tips/accessing-template-ref-in-child-component.md): Learn how to access template refs in a child component within a Vue.js application, enabling you to manipulate and interact with specific elements in the child component's template from the parent component. - [Nuxt Tip: Add Custom iframe Tab to Nuxt DevTools](https://mokkapps.de/raw/vue-tips/add-custom-iframe-tab-to-nuxt-dev-tools.md): Nuxt DevTools is designed to be extensible. You can add your own modules' integration to the DevTools. - [Nuxt Tip: An URL Object Working on Both Server-Side and Client-Side](https://mokkapps.de/raw/vue-tips/an-url-object-working-on-both-server-side-and-client-side.md): Nuxt provides a helper function called useRequestURL that returns an URL object working on both server side and client side. - [Vue Tip: Animate Child Component Before Route Leave](https://mokkapps.de/raw/vue-tips/animate-child-component-before-route-leave.md): Vue Router provides a way to use transitions on route components and animate the navigations. But sometimes, you might want to animate a specific (sub-)component before a route is left. - [Vue Tip: Assign Handler for Uncaught Errors](https://mokkapps.de/raw/vue-tips/assign-handler-for-uncaught-errors.md): Error monitoring is important in production, and we can use the errorHandler function to send errors to error tracking services. - [Vue Tip: Automatic Global Registration of Base Components](https://mokkapps.de/raw/vue-tips/automatic-global-registration-of-base-components.md): We can use webpack to register our Vue.js base components globally. - [Vue Tip: Automatically Import Components](https://mokkapps.de/raw/vue-tips/automatically-import-components.md): Use the unplugin-vue-components tool to automatically import your Vue components. - [Vue Tip: Avoid Directly DOM Manipulation](https://mokkapps.de/raw/vue-tips/avoid-directly-dom-manipulation.md): It is a no-go to manipulate the DOM in Vue.js directly. Instead, you should use the "ref" attribute. - [Vue Tip: Avoid Empty Class Attributes](https://mokkapps.de/raw/vue-tips/avoid-empty-class-attributes.md): This Vue tip helps to avoid empty class attributes in the rendered HTML - [Vue Tip: Avoid Empty Wrapper for Conditions](https://mokkapps.de/raw/vue-tips/avoid-empty-wrapper-for-conditions.md): There are many situations when you need to conditionally display multiple Vue components. To avoid "empty" wrappers you should use not use HTML tags. - [Vue Tip: Avoid Mutating a Prop Directly](https://mokkapps.de/raw/vue-tips/avoid-mutating-a-prop-directly.md): Mutating props is an anti-pattern. You should use computed properties instead. - [Vue Tip: Avoid Side Effects in Computed Properties](https://mokkapps.de/raw/vue-tips/avoid-side-effects-in-computed-properties.md): It is considered bad practice to introduce side effects inside computed properties and functions because it makes the code unpredictable and hard to understand. - [Vue Tip: Best Way to Force Re-Render Vue Component](https://mokkapps.de/raw/vue-tips/best-way-to-force-re-render-vue-component.md): In certain scenarios, Vue's reactivity approach isn’t sufficient, and we need to force re-rendering of specific components. - [Vue Tip: Cache Component Instances With the KeepAlive Component](https://mokkapps.de/raw/vue-tips/cache-component-instances-with-the-keep-alive-component.md): KeepAlive is a built-in Vue component that allows you to conditionally cache component instances when dynamically switching between multiple components. - [Vue Tip: Chaining Event Modifiers](https://mokkapps.de/raw/vue-tips/chaining-event-modifiers.md): By chaining multiple event modifiers together, you can create sophisticated event handling scenarios with ease. - [Nuxt Tip: Change Status Code of the Response](https://mokkapps.de/raw/vue-tips/change-status-code-of-the-response.md): `setResponseStatus` is a Nuxt composable to set the status code and (and optionally the status message) of the response. - [Vue Tip: Change the Interpolation Delimiter](https://mokkapps.de/raw/vue-tips/change-the-interpolation-delimiter.md): It is possible to adjust the delimiters used for text interpolation within the template to avoid conflicting with server-side frameworks that also use mustache syntax. - [Vue Tip: Check if Component Has Event Listener Attached](https://mokkapps.de/raw/vue-tips/check-if-component-has-event-listener-attached.md): Sometimes, you want to apply specific styles to a component only if it has an event listener attached. - [Vue Tip: Check if Slot Is Empty](https://mokkapps.de/raw/vue-tips/check-if-slot-is-empty.md): You can check if a slot is empty, for example, only to render it if it has content. - [Vue Tip: Check Version at Runtime](https://mokkapps.de/raw/vue-tips/check-version-at-runtime.md): You can easily check the Vue version at runtime. - [Vue Tip: Composable to Define Keyboard Shortcuts](https://mokkapps.de/raw/vue-tips/composable-to-define-keyboard-shortcuts.md): I show you a handy Vue composable that allows you to define keyboard shortcuts in your app. - [Vue Tip: Create Custom v-model Modifier](https://mokkapps.de/raw/vue-tips/create-custom-v-model-modifier.md): v-model has some built-in modifiers, but in some cases, you might need to add your custom modifier. - [Vue Tip: Creating a Custom Directive](https://mokkapps.de/raw/vue-tips/creating-a-custom-directive.md): In addition to the default set of directives like v-model or v-show, you can also register your own custom directives. - [Nuxt Tip: Custom SPA Loading Template for Your Nuxt Application](https://mokkapps.de/raw/vue-tips/custom-spa-loading-template-for-your-nuxt-application.md): When using the client-side rendering mode, Nuxt will display a loading indicator until the application is hydrated. The loading indicator is a simple spinner. You can customize the loading indicator by creating a custom loading component. - [Vue Tip: Debug Computed Properties](https://mokkapps.de/raw/vue-tips/debug-computed-properties.md): We can debug properties by passing computed() a second options object. - [Vue Tip: Debug Watcher](https://mokkapps.de/raw/vue-tips/debug-watcher.md): You can debug watchers by passing a third options object with onTrack and onTrigger callbacks. - [Vue Tip: Debugging in Templates](https://mokkapps.de/raw/vue-tips/debugging-in-templates.md): Guide to debug Vue component templates using the Browser DevTools. - [Vue Tip: Declare and Mutate v-model Props as Normal Variable Using defineModel](https://mokkapps.de/raw/vue-tips/declare-and-mutate-v-model-props-as-normal-variable-using-define-models.md): Declaring and mutate v-model props as the same as normal variable using the defineModel. - [Vue Tip: Deep Watch on Arrays](https://mokkapps.de/raw/vue-tips/deep-watch-on-arrays.md): In Vue 3, when using the watch option to watch an array, the callback will only trigger when the array is replaced. To trigger the watcher on mutation, the deep option must be specified. - [Vue Tip: Defining and Registering Vue Web Components](https://mokkapps.de/raw/vue-tips/defining-and-registering-vue-web-components.md): Web Components is an umbrella term for a set of web native APIs that allows developers to create reusable custom elements. Vue has excellent support for both consuming and creating custom elements. - [Vue Tip: Delay Loading Appearance of Spinner](https://mokkapps.de/raw/vue-tips/delay-loading-appearance-of-spinner.md): Eager delay spinners are not a good user experience. They can make a snappy user interface feel slower. We want delay spinners to appear only after a perceivable delay. - [Vue Tip: Destructure in v-for](https://mokkapps.de/raw/vue-tips/destructure-in-v-for.md): It is possible to use ES6 destructuring in a v-for in Vue - [Vue Tip: Destructure Props in Composition API Without Losing Reactivity](https://mokkapps.de/raw/vue-tips/destructure-props-in-composition-api-without-losing-reactivity.md): How to correctly destructure props object in a Vue component while maintaining the reactivity. - [Vue Tip: Detailed Prop Definitions](https://mokkapps.de/raw/vue-tips/detailed-props.md): Define your Vue prop definitions as detailed as possible. - [Vue Tip: Detect Mouse Hover](https://mokkapps.de/raw/vue-tips/detect-mouse-hover.md): You can use Vue event handlers to detect mouse hover events. - [Nuxt Tip: Detecting Server vs. Client-Side Code Execution](https://mokkapps.de/raw/vue-tips/detecting-server-vs-client-side-code-execution-in-nuxt.md): Nuxt 3 provides a way to detect whether your code is running on the server or client-side. - [Nuxt Tip: Difference Between useFetch and event.$fetch](https://mokkapps.de/raw/vue-tips/difference-between-use-fetch-and-event-fetch.md): Understand the key distinction between useFetch and event.$fetch in Nuxt. Learn why using event.$fetch for server-side API calls is the recommended approach for better performance and SSR correctness. - [Nuxt Tip: Differentiate Client and Server Components](https://mokkapps.de/raw/vue-tips/differentiate-client-and-server-components-in-nuxt.md): Nuxt allows you to define client-side and standalone server components - [Vue Tip: Disable Attribute Inheritance](https://mokkapps.de/raw/vue-tips/disable-attribute-inheritance.md): By default, parent scope attribute bindings that are not recognized as props will "fallthrough". This may not always be the desired behavior and, therefore, can be disabled. A typical use case is a component with multiple root nodes. - [Vue Tip: Display Raw HTML](https://mokkapps.de/raw/vue-tips/display-raw-html.md): The double mustaches interpret the data as plain text, not HTML. To output real HTML, you will need to use the v-html directive. - [Vue Tip: Document Your Component Props Using JSDoc](https://mokkapps.de/raw/vue-tips/document-your-component-props-using-js-doc.md): You can use JSDoc to document your component props so that they show up when you hover over the component in your IDE. - [Vue Tip: Don't Use Reactive Object for Template Refs](https://mokkapps.de/raw/vue-tips/dont-use-reactive-object-for-template-refs.md): Template Refs are a way to access elements in the DOM from within a Vue component. As the name suggests, you should use a ref to access the element in the template. - [Vue Tip: Don't Use v-if With v-for](https://mokkapps.de/raw/vue-tips/dont-use-v-if-with-v-for.md): It can be tempting to combine v-if with v-for but you should avoid it as it will throw an error. - [Vue Tip: Dynamic Return Values in Composables](https://mokkapps.de/raw/vue-tips/dynamic-return-values-in-composables.md): FIXME - [Vue Tip: Dynamic Slot Names](https://mokkapps.de/raw/vue-tips/dynamic-slot-names.md): Dynamic directive arguments also work on v-slot, allowing the definition of dynamic slot names. - [Vue Tip: Dynamically Add & Remove Route While App Is Running](https://mokkapps.de/raw/vue-tips/dynamically-add-and-remove-route-while-app-is-running.md): Adding routes to your router is usually done via the `routes` option, but in some situations, you might want to add or remove routes while the application is already running. - [Vue Tip: Dynamically Change Page Title](https://mokkapps.de/raw/vue-tips/dynamically-change-page-title.md): I will show you a few ways how you can easily change the page title when navigating your application - [Vue Tip: Effortless Handle Asynchronous Components With Suspense](https://mokkapps.de/raw/vue-tips/effortless-handle-asynchronous-components-with-suspense.md): Suspense components are used to display fallback content when waiting for some sort of asynchronous component to resolve. - [Vue Tip: Emit Event From Composable](https://mokkapps.de/raw/vue-tips/emit-event-from-composable.md): Your application may contain a lot of components that are using the same logic, like emitting the same event. In this case, it might be tempting to create a composable that will emit this event and is used in all components. But how do you emit an event from inside a composable? - [Vue Tip: Event Handling](https://mokkapps.de/raw/vue-tips/event-handling.md): There are different ways how to handle events in Vue. Let's take a look at them. - [Vue Tip: Expose Properties in a Script Setup Component](https://mokkapps.de/raw/vue-tips/expose-properties-in-a-script-setup-component.md): Components using script setup are closed by default and will not expose any of the bindings declared inside script setup. - [Vue Tip: Expose Slots From a Child Component ](https://mokkapps.de/raw/vue-tips/expose-slots-from-a-child-component.md): Third-party components are often wrapped in a custom component. But in that way, the slots of the third-party component get lost. - [Vue Tip: Force-Enable Vue Devtools in Production Build](https://mokkapps.de/raw/vue-tips/force-enable-vue-devtools-in-production-build.md): Usually, the Vue Devtool extension is disabled in production builds, but there is a way to force-enable it. - [Vue Tip: How I Write Class & Style Bindings](https://mokkapps.de/raw/vue-tips/how-i-write-class-and-style-bindings.md): Styling your components in Vue.js can be done in multiple ways. One of the most common ways is to use the class attribute, especially if you are using a CSS framework like Tailwind. In combination with v-bind you can dynamically assign classes to your components. - [Nuxt Tip: How Nuxt Uses Nitro, h3 and ofetch Internally](https://mokkapps.de/raw/vue-tips/how-nuxt-uses-nitro-h3-and-ofetch-internally.md): Nitro, h3 and ofetch are UnJS packages that are used to power the Nuxt 3 server engine. - [Nuxt Tip: How to Fix "Nuxt Instance Unavailable" Error](https://mokkapps.de/raw/vue-tips/how-to-fix-nuxt-instance-unavailable-error-in-nuxt.md): If you are using Nuxt 3, you probably already encountered the 'Nuxt Instance Unavailable' error. What is it, and how to fix it? - [Vue Tip: Infer Props From Components in a Component Map](https://mokkapps.de/raw/vue-tips/infer-props-from-component-map.md): Use a typed entry helper to infer props from each component in a component map. This is useful when rendering dynamic blocks from CMS or configuration data. - [Nuxt Tip: Lazy Load Components in Nuxt 3](https://mokkapps.de/raw/vue-tips/lazy-load-components-in-nuxt-3.md): Learn how you can dynamically import components in Nuxt 3 only when they’re needed. - [Vue Tip: Lifecycle Hooks for Debugging](https://mokkapps.de/raw/vue-tips/lifecycle-hooks-for-debugging.md): Vue provides two lifecycle hooks that we can use for debugging purposes. - [Nuxt Tip: Managing Page Load States With useLoadingIndicator](https://mokkapps.de/raw/vue-tips/managing-page-load-states-in-nuxt-with-use-loading-indicator.md): Learn how to use the useLoadingIndicator composable in Nuxt to access and manage the loading state of your app's pages. Improve user experience by displaying loading indicators and handling transitions seamlessly. - [Vue Tip: Manually Stop Watcher](https://mokkapps.de/raw/vue-tips/manually-stop-watcher.md): You need to manually stop your Vue watcher if they are created asynchronously. Sync watchers are automatically stopped when the component is unmounted. - [Vue Tip: Measure Performance](https://mokkapps.de/raw/vue-tips/measure-performance.md): Learn some tools to measure the performance of your Vue application. - [Vue Tip: Memoize a Sub-Tree of the Template Using v-memo](https://mokkapps.de/raw/vue-tips/memoize-a-sub-tree-of-the-template-using-v-memo.md): The v-memo directive is like a computed prop for the template. - [Vue Tip: Mutate Your State Inside of the Provider Using Provide and Inject](https://mokkapps.de/raw/vue-tips/mutate-your-state-inside-of-the-provider-using-provide-and-inject.md): When using reactive provide/inject values, it is recommended to keep any mutations to reactive state inside of the provider whenever possible. - [Nuxt Tip: Adding a Latest Route](https://mokkapps.de/raw/vue-tips/nuxt-adding-a-latest-route.md): Utilizing Nuxt Middleware, you can implement an easy way for visitors to always read the latest blog posts (or any other content) without needing to know its name or specific URL. - [Nuxt Tip: Analyse Production Bundle](https://mokkapps.de/raw/vue-tips/nuxt-analyse-production-bundle.md): Nuxi analyze is an experimental feature that builds your Nuxt app and analyses the production bundle. - [Nuxt Tip: Cancel Fetch API Request](https://mokkapps.de/raw/vue-tips/nuxt-cancel-fetch-api-request.md): In Nuxt 3, you can use the `signal` parameter with the globally available `$fetch` helper to cancel an API request. - [Nuxt Tip: Fetch Data on the Server Before App Start](https://mokkapps.de/raw/vue-tips/nuxt-fetch-data-on-the-server-before-app-start.md): Learn how to pre-fetch data on the server before app start in Nuxt 3+ to improve load times and user experience. - [Nuxt Tip: Handle Client-Side Errors](https://mokkapps.de/raw/vue-tips/nuxt-handle-client-side-errors.md): Nuxt provides the NuxtErrorBoundary component to handle client-side errors. - [Nuxt Tip: Move Homepage to Sub-Folder in Nuxt 3](https://mokkapps.de/raw/vue-tips/nuxt-move-homepage-to-sub-folder.md): Use the path property in the page's definePageMeta to move the homepage to a sub-folder in Nuxt 3. - [Nuxt Tip: Parallel Fetch Requests](https://mokkapps.de/raw/vue-tips/nuxt-parallel-fetch-requests.md): Learn to wield useAsyncData along with Promise.all() to load data faster with parallel requests in your Nuxt application. - [Nuxt Tip: Refresh Data by Watching Sources Using useAsyncData](https://mokkapps.de/raw/vue-tips/nuxt-refresh-data-in-nuxt-3-by-watching-sources-using-use-async-data.md): Nuxt 3's useAsyncData() composable can be used within your pages, components, and plugins to get access to data that resolves asynchronously. It can also be used to refresh the data loaded from the API based on the user's action. (pagination, filtering results, searching, etc.) - [Nuxt Tip: Render Component Only on Client-Side](https://mokkapps.de/raw/vue-tips/nuxt-render-component-only-on-client-side.md): By default, Nuxt uses universal (client-side + server-side) rendering to render your application. The ClientOnly component can be used torender its slot only in client-side. - [Nuxt Tip: Rendering Modes](https://mokkapps.de/raw/vue-tips/nuxt-rendering-modes.md): Nuxt 3 provides plenty of options for rendering. There are SSG, SSR, Universal, SPA, ISG, or mix it up per route with hybrid rendering. - [Nuxt Tip: Run Code Once During SSR or CSR](https://mokkapps.de/raw/vue-tips/nuxt-run-code-once-during-ssr-or-csr.md): Since Nuxt 3.9 you can use the useOnce composable to run a given function or block of code once during server-side rendering or client-side navigation. - [Nuxt Tip: Use DevTools to Know Your App Better](https://mokkapps.de/raw/vue-tips/nuxt-use-dev-tools-to-know-your-app-better.md): Nuxt DevTools is a set of visual tools that help you to know your app better. - [Nuxt Tip: Use Nuxt Layers to Share Components, Utils, and Configuration Between Your Apps](https://mokkapps.de/raw/vue-tips/nuxt-use-nuxt-layers-to-share-components-utils-and-configuration-between-your-apps.md): One of the core features of Nuxt 3 is the layers and extending support. You can extend a default Nuxt application to reuse components, utils, and configuration. - [Vue Tip: Optimize Performance Using shallowRef](https://mokkapps.de/raw/vue-tips/optimize-performance-using-shallow-ref.md): shallowRef() is typically used for performance optimizations of large data structures, or integration with external state management systems. - [Vue Tip: Pass Custom Arguments to Event Handler Method](https://mokkapps.de/raw/vue-tips/pass-custom-arguments-to-event-handler-method.md): Sometimes we need to pass custom arguments to the event handler method and access the original DOM event. - [Vue Tip: Use v-bind to Pass Multiple Props to Components](https://mokkapps.de/raw/vue-tips/passing-data-to-a-component-with-props-using-v-bind.md): Instead of passing each property individually to a component, you can bind an object to it. - [Vue Tip: Passing Slots to Child Components](https://mokkapps.de/raw/vue-tips/passing-slots-to-child-components.md): In certain scenarios, you need to pass on all slots from a parent component to the child component. - [Pinia Tip: Use Setup Stores for More Flexibility](https://mokkapps.de/raw/vue-tips/pinia-use-setup-stores-for-more-flexibility.md): Besides Option Stores you can also use Setup Stores to define stores in Pinia. They bring more flexibility as you can create watchers within a store and freely use any composable. - [Vue Tip: Prefer Slots Over Props](https://mokkapps.de/raw/vue-tips/prefer-slots-over-props.md): Prefer slots over props as they give the parent the freedom to customize components. - [Vue Tip: Props and Context in Setup Method](https://mokkapps.de/raw/vue-tips/props-and-context-in-setup-method.md): Access props and context in setup method using Composition API in Vue 3 - [Vue Tip: Provide Fallback Content for Slots](https://mokkapps.de/raw/vue-tips/provide-fallback-content-for-slots.md): There are cases when it's useful to specify fallback (i.e. default) content for a slot, to be rendered only when no content is provided. - [Vue Tip: Query Inner Elements in Third-Party Components](https://mokkapps.de/raw/vue-tips/query-inner-elements-in-third-party-components.md): In some cases, we have to deal with third-party Vue components where we cannot put a ref on inner HTML elements to access them in our Vue code. - [Vue Tip: Re-Rendering Vue Routes When Path Parameters Change](https://mokkapps.de/raw/vue-tips/re-rendering-vue-routes-when-path-parameters-change.md): In SPA that uses the Vue Router, it’s common to create a path parameter that changes the behavior of a route. - [Vue Tip: Reactive Values in CSS](https://mokkapps.de/raw/vue-tips/reactive-values-in-css.md): In Vue 3, it is possible to use reactive values in CSS. - [Vue Tip: Scroll to Top When Navigating to a New Route](https://mokkapps.de/raw/vue-tips/scroll-to-top-when-navigating-to-a-new-route.md): When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of history entries just like real page reload does. - [Vue Tip: Share Composable State Across Components](https://mokkapps.de/raw/vue-tips/share-composable-state-across-components.md): It is possible to sync composable state across components by lifting its definition outside the exported function. - [Vue Tip: Share Styling Using Wrapper Components](https://mokkapps.de/raw/vue-tips/share-styling-using-wrapper-components.md): Wrapper components can help you share styling across multiple Vue components. This can make your code cleaner and more maintainable. - [Vue Tip: Simple Expressions in Templates](https://mokkapps.de/raw/vue-tips/simple-expressions-in-templates.md): Vue component templates should only include simple expressions, with more complex expressions refactored into computed properties or methods. - [Pinia Tip: Simple History With Undo and Redo Functionality](https://mokkapps.de/raw/vue-tips/simple-pinia-history-with-undo-and-redo-functionality.md): Build a simple history with undo and redo functionality using the useRefHistory composable from VueUse. - [Vue Tip: Simple Routing Without Using External Libraries](https://mokkapps.de/raw/vue-tips/simple-routing-without-using-external-libraries.md): If you want to keep things simple and avoid adding extra dependencies, you can implement basic routing functionality in Vue.js without using external libraries like Vue Router. - [Vue Tip: Simple State Management With Composition API](https://mokkapps.de/raw/vue-tips/simple-state-management-with-composition-api.md): Learn how you can use Composition API for a simple state management solution which you can use instead of Pinia. - [Vue Tip: Special CSS Selectors](https://mokkapps.de/raw/vue-tips/special-css-selectors.md): Vue provides some special CSS pseudo-selectors you can use in your Vue SFC. - [Vue Tip: Speed Up Initial Load Using Async Components](https://mokkapps.de/raw/vue-tips/speed-up-initial-load-using-async-components.md): Using async components is a great way to speed up the initial load time of your app. - [Vue Tip: Split Your SFC into Multiple Files](https://mokkapps.de/raw/vue-tips/split-your-sfc-into-multiple-files.md): Use the 'src' attribute to import an external file for a language block in your Vue Single-File Components (SFC). - [Vue Tip: Test Vue Components Using Vue Testing Library](https://mokkapps.de/raw/vue-tips/test-vue-components-using-vue-testing-library.md): Vue Testing Library is my preferred Vue.js testing library that encourages good testing practices. - [Vue Tip: Trigger Transition Programmatically](https://mokkapps.de/raw/vue-tips/trigger-transition-programmatically.md): You can programmatically trigger a transition via the "key" attribute. - [Vue Tip: Trigger Watcher Immediately](https://mokkapps.de/raw/vue-tips/trigger-watcher-immediately.md): The watch hook provides an option that the callback is called immediately. - [Vue Tip: Typing Component Events](https://mokkapps.de/raw/vue-tips/typing-component-events.md): To declare emits with full type inference support, we can use the defineEmits API, which is automatically available inside