DEV Community: Justin Brooks

Why GitOps Doesn't Work at Scale (and What to Do Instead)

Justin Brooks — Mon, 23 Feb 2026 05:37:26 +0000

People talk about GitOps like it is the final form of delivery. In real life, it depends a lot on scale.

I have spent years helping teams go from one multi-tenant instance to hundreds of single-tenant instances. GitOps was useful early. However, for me at large scale, it became a constant fight.

One formula captures it well: P(failure) = 1 - p^n.

Where p is the chance each individual change works, and n is how many moving parts you have to coordinate. As n grows, failure risk climbs fast even if each single change is "pretty safe."

For example: you are deploying one release to 100 single-tenant customer environments, and each environment sync has a 99% success rate.

p = 0.99 (one environment sync succeeds 99% of the time)
n = 100 (100 environment syncs in the rollout wave)
1 - 0.99^100 = 0.634

So that rollout has about a 63% chance that at least one customer environment fails to deploy cleanly on the first pass.

P(failure)
1.00 ┬                                                            ●
     │                                                   ●
0.80 │                                            ●
     │                                     ●
0.60 │                               ●
     │                         ●
0.40 │                   ●
     │              ●
0.20 │         ●
     │    ●
0.00 └───────────────────────────────────────────────────────────────
       0     20     40     60     80     100    120    140    160   n

Formula-wise, you only have two levers:

reduce n (fewer independent steps per rollout)
increase p (make each step more reliable)

GitOps alone does not raise p for you. To improve p, you need other tooling and controls like preflight checks, dependency validation, rollout orchestration, retries, and policy guardrails.

Where GitOps works

GitOps is great when:

you have a small number of environments
ownership is clear
changes are low risk
teams are disciplined with review and automation

In that setup, Git gives you clean history, solid audit trails, and predictable rollouts.

small scale

dev -> PR -> merge -> deploy -> done
         (few moving parts, easy to reason about)

Where it starts to hurt

Once you have a big fleet, a few things happen fast.

Pull requests become your release system

Every deployment turns into repo choreography. More branches, more approvals, more waiting. You start optimizing for merge flow instead of delivery outcomes.

large scale

CI -> PR -> approval -> merge -> sync
        \-> policy check -> rebase -> approval -> merge -> sync
                      \-> hotfix PR -> cherry-pick -> re-sync

Rollbacks are not simple anymore

Rolling back one service is easy. Rolling back a whole environment with dependencies is not. Git can show you what changed, but it cannot restore all runtime conditions.

Config sprawl gets expensive

At scale, you end up with endless overrides: customer-specific, region-specific, compliance-specific, and emergency patches. The issue is not YAML itself. The issue is how much state humans must keep in their heads.

Out-of-band changes become normal

This is the part people avoid saying out loud.

At scale, teams will make changes outside GitOps. During incidents, during customer escalations, during vendor outages. Not because they are careless, but because they are solving an immediate problem.

If your model assumes that never happens, it is too idealistic for enterprise operations.

The split you see in GitOps opinions

GitOps lovers and GitOps haters are usually dealing with different scales.

At small scale, GitOps feels clean.

At enterprise scale, repo-centric workflows become too low-level for the job.

That is the real mismatch.

What actually works better

Do not throw away GitOps. Just stop treating Git as the entire control plane.

Use Git for intent and auditability. Add platform-level orchestration for:

preflight checks (before rollout starts, not after breakage)
strong defaults (safe rollout strategy, retries, timeouts, guardrails)
dependency validation (service A should not move before dependency B is healthy)

desired model

Git (intent) ---> Orchestrator ---> Fleet of environments
                    |      |                |   |   |
                    |      +-> policy       e1  e2  e3 ... eN
                    +-> rollout waves
                    +-> drift detection
                    +-> recovery paths

rollout waves
dependency ordering
policy enforcement
drift detection
safe recovery after out-of-band changes

This is the key point: you need a tool that can actively orchestrate and enforce these runtime controls. GitOps alone cannot provide that. Git can store desired state. It does not run rollout logic, cross-environment safety checks, or live dependency coordination by itself.

That is the practical model: GitOps as an input, not the whole operating system.

Final take

GitOps is good. Pure GitOps at enterprise scale usually is not.

The bigger you get, the more you need orchestration that lives above pull requests.

Top 5 Open Source Tools Platform, SRE, and DevOps need in 2024

Justin Brooks — Fri, 18 Oct 2024 18:00:00 +0000

Discover 5 awesome but underrated open-source projects that deserve more attention! They offer solutions for DevOps, SRE, and Platform Engineers.

Show your support by checking them out and giving them a star on GitHub! ✨

Tools are:

1. Ctrlplane

Ctrlplane is an open-source tool that simplifies deploying software across different cloud providers, regions, and services like Kubernetes, cloud functions, and VMs. It provides a single platform to manage the entire deployment process, from initial testing to final release. With Ctrlplane, you can automate complex environment policies ensuring that your deployments are secure and reliable.

Furthermore, Ctrlplane integrates seamlessly with popular CI/CD tools like GitLab, Jenkins and GitLab CI, allowing you to trigger deployments automatically as part of your development pipeline. By streamlining and automating your deployments with Ctrlplane, you can reduce errors, improve collaboration, and get your software to market faster.

Star on Github ✨

2. Git Secret

git-secret is a command-line tool that allows you to securely store sensitive information, such as passwords and API keys, directly within your git repository. It works by encrypting these files using the public keys of authorized users. This means that only those individuals with the corresponding private key can decrypt and access the hidden data.

git-secret simplifies the process of managing access to these secrets. Adding or revoking someone's access is as easy as adding or removing their public key from the repository. When someone's access is revoked, you simply remove their key and re-encrypt the secret files. This ensures that even if they have a local copy of the repository, they will no longer be able to decrypt the sensitive information.

Star on Github ✨

3. Kubecolor

kubecolor is a simple but effective tool that makes your Kubernetes command-line experience more visually appealing. It acts as a wrapper around kubectl, adding color to the output without altering the functionality of the commands themselves. This makes it easier to read and understand the information displayed in your terminal, especially when dealing with complex Kubernetes resources. To use it, you can alias kubecolor to kubectl in your .bash_profile, effectively replacing the standard kubectl output with a colorized version for any command you run.

Star on Github ✨

4. Digger

Digger simplifies Terraform management by integrating it directly into your existing CI/CD pipeline. Instead of relying on separate and potentially costly Terraform management platforms, Digger leverages your current CI system's resources for running Terraform commands. This means you can manage your infrastructure without leaving your familiar CI environment, streamlining your workflow and keeping your cloud credentials secure within your own infrastructure.

With Digger, you can execute Terraform plans and apply changes directly from pull requests, utilize your CI's runners, and enforce policies with Open Policy Agent (OPA). It supports various Terraform workflows, including Terragrunt and workspaces, and offers features like drift detection and PR-level locking to prevent conflicts. By eliminating the need for a separate system, Digger provides a more efficient, cost-effective, and secure approach to managing your Terraform infrastructure.

Star on Github ✨

5. SigNoz

SigNoz is a comprehensive open-source platform that provides a unified solution for monitoring and observability, combining logs, metrics, and traces in a single tool. Built on the open standard OpenTelemetry, SigNoz eliminates vendor lock-in and offers correlated data for efficient debugging. By leveraging ClickHouse as its datastore, SigNoz ensures high-speed performance and optimized storage for your observability data.

SigNoz offers flexibility in querying your data with options like a DIY query builder, PromQL, and ClickHouse queries. Whether you prefer the open-source version, their cloud service, or a hybrid approach, SigNoz adapts to your specific needs and provides a powerful platform for understanding and optimizing your applications.

Star on Github ✨

Reflecting on Automation I Wish I’d Started Sooner

Justin Brooks — Fri, 11 Oct 2024 16:56:19 +0000

As I reflect on my journey, I often find myself wondering, "Why didn’t I automate this sooner?" I’m sure many of you can relate to this. Whether you’re automating a manual task you’ve been doing for years, fully automating something you’ve only partially tackled before, or implementing a solution that transforms your workflow, these "aha" moments can be game-changers

For me, the turning point came when I faced a monumental challenge: managing a fleet of over 200 Kubernetes clusters spread across all three major cloud providers. As our infrastructure grew, so did the complexity, and I was hit with some tough questions:

How do we roll out changes gradually without risking the stability of the entire system?
How do I ensure deployments remain consistent so that engineers are working in familiar environments no matter where they’re debugging?
How do we manage services across multiple platforms seamlessly, ensuring they stay in sync despite the underlying complexity?
How do we provision on-demand environments based on user input, and do it quickly?

These weren’t just minor headaches—they were serious obstacles that slowed us down and introduced risk. I realized we couldn’t continue with manual processes, and partial automation wasn’t cutting it anymore.

That’s when I decided to build Ctrlplane, an open-source orchestration tool designed to solve these exact problems. Ctrlplane helps us manage, automate, and deploy changes at scale, providing the flexibility we need to adapt to the growing demands of our infrastructure. It’s become the backbone of our deployment strategy, enabling us to:

Roll out updates gradually across our entire fleet of clusters, giving us the control to catch issues early without impacting the whole system.
Ensure consistency in our deployments, so every environment is as familiar as the next, which streamlines troubleshooting and debugging.
Orchestrate services across multiple platforms, unifying our operations despite the complexity of running across AWS, Azure, and Google Cloud.
Provision on-demand environments based on user input with incredible speed, allowing us to be responsive to internal and external requests.

These changes have fundamentally transformed how we operate, and I wish I had implemented them sooner.

I want to hear from you. What were your automation breakthroughs? Have you had moments where automating a task saved time, improved efficiency, or even changed how you work? Let’s share our stories and inspire each other to find the next opportunity for automation.

Learning CSS Keyframes by creating a spinner

Justin Brooks — Mon, 21 Jun 2021 14:38:29 +0000

Also most every UI framework has them. So let's create our own using pure CSS and in the progress learn about the fundamental concepts of keyframe animations.

Firebase Authentication with React and Guarded Routes

Justin Brooks — Mon, 24 May 2021 19:01:36 +0000

Authentication is one of those things that just always seems to take a lot more effort than we want it to, yet it's always a feature every website needs.

Firebase makes this process super easy. So today lets create a React application where we use firebase authentication and router guards.

It will have a total of 3 pages. One for signing up, another for logging, and a home page that is only accessible if the user is authenticated.

You can find the full write up at codingwithjustin.com and source code on github.

Firebase

We'll need to set up a firebase project to get started.

Head over to Firebase and create a new application. The process should be straightforward and only take a few seconds. We'll also need to enable the auth options before we start building anything. First, make sure you enable email/password in the Authentication tab, by clicking on Sign-methods.

I'll also be using version 9 of firebase which is currently in beta. It makes the firebase tree shakeable as well as provides some other improvements.

Project Setup

We'll need to create a new project using the create react app CLI.

npx create-react-app firebase-auth-react

Once completed we'll also install react-router-dom and firebase@beta for version 9.

yarn add react-router-dom firebase@beta

Next I'll create a firebase helper file called firebase.js.

import { getAuth, onAuthStateChanged } from '@firebase/auth'
import { initializeApp } from 'firebase/app'
import { useState, useEffect, useContext, createContext } from 'react'

export const firebaseApp = initializeApp({ /* config */ })

export const AuthContext = createContext()

export const AuthContextProvider = props => {
  const [user, setUser] = useState()
  const [error, setError] = useState()

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(getAuth(), setUser, setError)
    return () => unsubscribe()
  }, [])
  return <AuthContext.Provider value={{ user, error }} {...props} />
}

export const useAuthState = () => {
  const auth = useContext(AuthContext)
  return { ...auth, isAuthenticated: auth.user != null }
}

Here we'll initialize our configuration using the values we got from creating a project. We'll also create an auth context for holding the state of the current user signed in.

Context in react is a tool that allows you to share state throughout the whole react component without having to pass it down by props. Instead, we can initialize a Context Provider, pass in our state as value, and then we can access it anywhere by calling useContext with our context object. In our case will want to pass in the user's state which we get from the onAuthStateChanged listener. We'll also want to make sure we unsubscribe from this event when the component is unmounted.

Routing

In our App.js we'll need to add our routing option and link these to each of our pages. However, doing this won't protect our routes from unauthenticated users. To protect our routes we'll create a custom component which Ill call AuthenticatedRoute.

const AuthenticatedRoute = ({ component: C, ...props }) => {
  const { isAuthenticated } = useAuthState()
  console.log(`AuthenticatedRoute: ${isAuthenticated}`)
  return (
    <Route
      {...props}
      render={routeProps =>
        isAuthenticated ? <C {...routeProps} /> : <Redirect to="/login" />
      }
    />
  )
}

We'll call the useAuthState hook we created earlier to check if the user is authenticated. If they are authenticated we'll render the page, otherwise, we'll redirect them to the login page.

Let's also create a simple UnauthenticatedRoute that will use for the login page. This component is similar to the logic above expect we will only want to render the component if the user is not authenticated.

const UnauthenticatedRoute = ({ component: C, ...props }) => {
  const { isAuthenticated } = useAuthState()
  console.log(`UnauthenticatedRoute: ${isAuthenticated}`)
  return (
    <Route
      {...props}
      render={routeProps =>
        !isAuthenticated ? <C {...routeProps} /> : <Redirect to="/" />
      }
    />
  )
}

It's also worth mentioning, you might want to add a loading sign-on in your app while the auth check is being run. This way you don't flash a page every time you refresh.

Pages

Now, let's go through each page and those up.

Login

For the login page, we'll create a form that asks the user for an email address and password. When the user clicks the submit button, we'll grab those two values from the form element and pass them into the signInWithEmailAndPassword function. Once it's successful the user will be considered logged in and will automatically be redirected to the home page.

import { useCallback } from 'react'
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth'

export const Login = () => {
  const handleSubmit = useCallback(async e => {
    e.preventDefault()

    const { email, password } = e.target.elements
    const auth = getAuth()
    try {
      await signInWithEmailAndPassword(auth, email.value, password.value)
    } catch (e) {
      alert(e.message)
    }
  }, [])

  return (
    <>
      <h1>Login</h1>
      <form onSubmit={handleSubmit}>
        <input name="email" placeholder="email" type="email" />
        <input name="password" placeholder="password" type="password" />
        <button type="submit">Login</button>
      </form>
    </>
  )
}

I recommend you add better error handling here but I'm going to wrap this in a try-catch statement and alert the user with any error messages.

If we wanted to redirect to a specific URL we could call the useLocation hook from the react router and push a path onto it.

Signup

The signup page is also going to be very similar, we'll create another form that asks for their email and password. On submit we'll grab those values and call the createUserWithEmailAndPassword function. If the user signs in is successfully they will automatically get redirect to the home page.

import { useCallback } from 'react'
import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth'

export const SignUp = () => {
  const handleSubmit = useCallback(async e => {
    e.preventDefault()

    const { email, password } = e.target.elements
    const auth = getAuth()
    try {
      await createUserWithEmailAndPassword(auth, email.value, password.value)
    } catch (e) {
      alert(e.message)
    }
  }, [])

  return (
    <>
      <h1>Sign Up</h1>
      <form onSubmit={handleSubmit}>
        <input name="email" placeholder="email" type="email" />
        <input name="password" placeholder="password" type="password" />
        <button type="submit">Sign Up</button>
      </form>
    </>
  )
}

Home Page

For the Home page, We'll put a nice welcome message and show the user's email. We'll also create a button that will call the auth signout function.

import { getAuth, signOut } from 'firebase/auth'
import { useAuthState } from './firebase'

export const Home = () => {
  const { user } = useAuthState()

  return (
    <>
      <h1>Welcome {user?.email}</h1>
      <button onClick={() => signOut(getAuth())}>Sign out</button>
    </>
  )
}

Conclusion

Adding authentication and access control to your application doesn't have to be a hassle. Both the setup step and, more importantly, the maintenance over time, are handled with modern platforms like Firebase.

I have a community over on discord if you'd like to learn more. You should also check out my website codingwithjustin.com where I post more content similar to this one.

Vue explained for React Developers

Justin Brooks — Tue, 06 Apr 2021 02:54:32 +0000

We'll leverage your understanding of React to learn Vuejs in 6 minutes!

React is undeniably one of the most popular frontend libraries for building modern applications. But yet other frameworks like Vue have gained attraction over the past few years. With the new composition API, Vue has become even more similar to React but still maintains some tricks ups its sleeve.

15 Vue 3 Tips & Tricks

Justin Brooks — Mon, 26 Oct 2020 14:17:32 +0000

Vue has become a popular framework for web development and with the recent changes made in Vue 3, I've decided to create this post where we'll look at 15 tips and tricks for increasing productivity, maintainability, and scalability when creating Vue apps.

Vue Style Guide

While Vue is great at letting you choose what’s best for you, there is a style guide to help you avoid common errors and anti-patterns. You can automate some of this by using the vue-eslint-plugin which comes preconfigured when creating a Vue app using the CLI tool. You should go into the .eslintrc.js settings and change it from vue3/essitional to vue3/strongly-recommended you can considerably improve code readability and dev experience.

Use NuxtJS

You should also consider using Nuxtjs once it's available for Vue 3. If you plan to build a production-ready Vue application, it solves many of the problems such as SSR and dynamic routing. It also provides an ecosystem of plugins you can use to build your application faster. Most importantly it comes with a nice loading screen so you have something to look at when your application is compiling.

Template Interpolation

When using visual studio code you should already have Vetur installed. You can make this plugin even more useful by enabling the experimental templateInterpolationService which adds even more auto-completion and type lookups in a Vue component template. This can save you time from having to open up child components to view their props and event types.

Vue 3 Snippets

I also recommend installing Vue 3 Snippets Highlight Formatter. This will give you shortcuts for increasing your productivity when coding in Vue 3 or Vue 2. When installed you can use shortcuts to quickly import functions from Vue and type out boilerplate code required for creating components with just a few keystrokes.

Prettier

You should also grab the prettier extension, which will automatically format your code. This is a huge timesaver and you'll notice I use it in all of my applications. You can install the package library with npm install prettier or have it come configured with your Vue app by enabling it in the CLI tool.

Now you'll be able to create a .prettierrc file that describes how the code should be formatted. Personally, I like to disable semicolons, use single quotations, and remove any trailing commas. If you have installed the Vue 3 Snippet plugin, you will need to go into the settings and disable its formating options to get this to work correctly.

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "arrowParens": "avoid"
}

Error Monitoring

Error monitoring is important in production and we can use the errorHandler function to send errors to services like Sentry and Bugsnap for tracking. This function gets called whenever an error is thrown inside your Vue application and has 3 arguments the error trace, the vm component, and Vue specific information such as the lifecycle hook or event that causes the error. You could also add a function to any of your components called errorCaptured, which will be called when any descendent component throws any error.

app.config.errorHandler = (err, vm, info) => {
  // handle error
  // `info` is a Vue-specific error info, e.g. which lifecycle hook
  // the error was found in
}

Enable Performance in Vue Config

That's incredibly useful, but we should also enable the performance options in development mode to get more information when debugging. We can view the performance of application mount, render, and more by opening the dev tools, going to the performance tab, and then recording an interval we would like to inspect. In our example, I will just refresh the screen. Now under the timings section, we can see information showing the load times for each Vue component.

app.config.performance = true

JSX

Don't be afraid to use JSX as you can create small reusable utility components instead of having to create a new file for each one. For example, we can create two simple increment and decrement counter buttons which will apply the operation whenever the button is clicked.

const IncButton = {
  setup() {
    const count = ref(0)
    const inc = () => count.value++
    return () => <button onClick={inc}>Inc</button>
  }
}

const DecButton = {
  setup() {
    const count = ref(0)
    const dec = () => count.value--
    return () => <button onClick={dec}>Dev</button>
  }
}

Abstract Away with Compositions Functions

Similarly, the new composition API makes it's really easy to abstract away common utility functions that may be useful across projects and make your code more readable. I suggest you also take a look at other libraries like VueUse which come with a whole bunch of utility functions.

Async Components

When we import our previously created components we can use asyncComponent to improve loading times. Using the import statement we are able to create a separate javascript file that will be requested when the component is required. This saves your users from loading components they may never need.

defineAsyncComponent(() => import('./LargeComponent.vue'))

Pacal Case

Using Pascal Case to make it easier to differentiate between HTML and Vue components. Depending on the extensions you have installed it can also give them a different highlighted color making it even more clear.

ES2020 Support

A super needed addition inside of Vue's single-file components is support for all the new features in ES2020. Out of all of them, optional chaining is the one I use most frequently. It allows for shorter and simpler expressions when accessing chained properties when there may be a possibility of a missing value. It can also be helpful while exploring the content of an object when there's no guarantee to which properties are required.

Use VeeValidate

When you want to create forms you should use a library like VeeValidate that can simplify the entire process. When working with forms in front-end development not only do you have to deal with ensuring correct values are submitted but you also have to make it presentable to the users.

Libraries like VeeValidate make this process super easy.

Vue Docs is King

Overall no matter what the project you are building in Vue, the documentation is your best friend. The Vue team has really put a lot of afford into making them clean and concise which is an additional feature I find that separates Vue from other frameworks.

Follow me on Youtube!

And lastly, don't forget to subscribe to my channel and turn on the bell notifications to learn more about building applications with Vue!

If you have suggestions on content you would like to see drop a comment below.

Hopefully, you can use all of these tips to help you create production-ready Vue apps. Thanks for watching and hope to see you in the next one.

Building a Cat Facts app with Vue Router in Vue 3!

Justin Brooks — Wed, 14 Oct 2020 14:46:33 +0000

The Vue 3 Composition API has open new possibilities for accessing the full power of the Vue Router. In addition to defining the URL structure for your app, it can improve performance by lazy loading pages, and provides navigation middleware to follow coding design principles like DRY.

Today we will be looking at using Vue Router with the composition API, to create a cat facts webpage with full typescript support. By the end of this video, you will hopefully have a full understanding of how to successfully use the newly added useRoute and useRouter composition functions. We'll also look at some changes between Vue 2 and Vue 3 and some more advanced features like:

lazyloaded routes,
dynamic segments,
navigation guards, and
adding a 404 error page.

Check out the youtube video that this article was created for:

If you are new around here don't forget to follow me and subscribe to my Youtube Channel. You can grab the full source code from the github.

Project Setup

I've already created a basic Vue 3 application and removed the boilerplate code. Don't forget to enable Vue router and typescript when setting up your project with the CLI tool, or you can install them manually using your favorite package manager.

Inspecting the project we can see the CLI created a router folder and a views folder. The router folder contains all the route paths and components in an array which is iterated over until the route is matched. We will come back to this file once we have created some components and views.

// router/index.ts
const routes: Array<RouteRecordRaw> = [
  // ...
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

Below this array, you’ll notice we created the Router itself and we also pass the router array and a called the createWebHistory. This function switches Vue from hash to history mode inside your browser, using the HTML5 history API. For Vue 2 users you probably notice the way the router was configured is a little different.

Homepage

We'll start by creating the home page since this will be the most straight forward. All we need to do is display some welcome information and then add it to the router at the base URL.

<template>
  <div class="card">
    <div class="card-body text-center">
      <h4>
        Welcome to the cat facts page
      </h4>
      <div>🐾</div>
      <span>
        Use the nav menu above to find new facts!
      </span>
    </div>
  </div>
</template>

When adding it to the router it requires a path, which is the URL where the route can be found, and a component, that will be loaded when the route is called. We can also add an optional name that can be used when we link to this route.

// router/index.ts
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

There are additional properties we will be looking at in this tutorial but you can find the full list of available options in the Vue router docs.

Dynamic Routes

Next, we will create the Fact page. The URL will accept an id parameter that we will use as an index to display a specific fact. We can access this property by calling the useRoute function which will return a reactive object containing information about the current route.

export default defineComponent({
  components: { FactCard },
  setup() {
    const router = useRoute()
    const factId = computed(() => router.params.id) as ComputedRef<string>
    return { factId }
  }
})

We can create a computed property from the params object which accesses the id value. All we have to do now is pass it to our FactCard which will display the fact's image and text.

I've already created an array that contains text and an image.

// assets/facts.ts
export const facts = [
  // ...
  {
    image:
      'https://cdn.pixabay.com/photo/2016/02/10/16/37/cat-1192026_960_720.jpg',
    text: "The world's largest cat measured 48.5 inches long."
  }
  // ...
]

The FactCard will import the facts array and use the passed in id to determine which one to display. We can also add some validation to make sure the index is within the range. Once we get our fact we can display the image and the fact in the template.

We can finally add the Fact view to our router and you'll notice we are using a colon to indicate the id is a dynamic value. If we had a URL like /fact/3 this would result in the id property being set to 3, just like Vue 2. Instead of using useRoute we could of opt-in to have the dynamic segment passed into the component by props.

// router/index.ts
const routes: Array<RouteRecordRaw> = [
  // ...
  {
    path: '/fact/:id',
    name: 'Fact',
    component: () => import('../views/Fact.vue'),
    beforeEnter: (to, _, next) => {
      const { id } = to.params

      if (Array.isArray(id)) {
        next({ path: '/error' })
        return
      }

      // Is a valid index number
      const index = parseInt(id)
      if (index < 0 || index >= facts.length) {
        next({ path: '/error' })
        return
      }

      next()
    }
  }
  // ...
]

We will also add a router guard so that if a user enters a number that is not within the range of the array it will not direct them to the error page.

Programmatic Routing

For the Fact List page, we will simply use a for loop and iterate over all the facts and display their information. When the HTML element is clicked we can call a function that programmatically redirects the user to the facts page.

To do this we can use the useRouter hook which will an object contain functions to manipulate the current Vue Router instance. We can call the push function and pass it an object telling it where we would like to go.

<script lang="ts">
import { defineComponent } from 'vue'
import { facts } from '@/assets/facts'
import { useRouter } from 'vue-router'
export default defineComponent({
  setup() {
    const router = useRouter()
    const goToFact = (id: number) => {
      router.push({ path: `/fact/${id}` })
    }
    return { facts, goToFact }
  }
})
</script>

<template>
  <div class="list-group">
    <a
      class="list-group-item list-group-item-action clickable"
      v-for="(fact, i) in facts"
      :key="i"
      @click="goToFact(i)"
    >
      <div class="row">
        <div class="col-2"><img :src="fact.image" height="40" /></div>
        <div class="col-10 align-self-center">{{ fact.text }}</div>
      </div>
    </a>
  </div>
</template>

We could have simply used a router link to direct the user to the location but I wanted to take a look at how we would do this programmatically. We will take a look at using the router-link component when we create the navigation links.

We can add this view to the router and it requires no special conditions.

`<router-link>`

For the navbar, we will need to create two components.

The HeaderLink, which uses the <router-link> component to redirect the user to the URL when clicked. The slot is simply used to render any nested HTML inside the component. It also applies some special class when the current URL is equal to or starts with the path value passed in.

<script>
import { computed, defineComponent } from 'vue'
import { useRoute } from 'vue-router'
export default defineComponent({
  props: {
    to: { type: String, required: true },
    exact: { type: Boolean, default: false }
  },
  setup(props) {
    const route = useRoute()
    const active = computed(() =>
      props.exact ? route.path === props.to : route.path.startsWith(props.to)
    )
    return { active }
  }
})
</script>

<template>
  <div style="width: 150px">
    <router-link
      :to="to"
      class="nav-link"
      :class="active ? 'font-weight-bold' : null"
    >
      <slot />
    </router-link>
  </div>
</template>

The Header will contain all our HeaderLinks. We could place the header inside each component but this would be extremely repetitive. Instead, we can add the component outside of the router-view so it's always rendered on every page.

<template>
  <div class="text-center my-3">
    <h4>Cat 🐱 Facts</h4>
    <div class="d-flex justify-content-center">
      <HeaderLink to="/" exact>Home</HeaderLink>
      <HeaderLink to="/facts">List</HeaderLink>
    </div>
  </div>
</template>

Error Page

Lastly, we’ll need to tell our router what to do when it doesn’t match any routes, and the way we do this is a little different in Vue 3. If we haven't found a component by the end, this means the pages are not found and we can add a custom 404-page component here. We can do this by using catchAll and regular expression in the dynamic segment which will match against everything.

// router/index.ts
const routes: Array<RouteRecordRaw> = [
  // ...
  {
    path: '/:catchAll(.*)',
    name: 'PageNotFound',
    component: () => import('../views/PageNotFound.vue')
  }
  // ...
]

We are done! We have successfully created an application using Vue Router in Vue 3. I hope you gained an understanding of how to creating applications in Vue. If you like this content don't forget to follow me and subscribe to my channel for more content.

Lazy loading components in Vue 3

Justin Brooks — Mon, 05 Oct 2020 15:01:54 +0000

Fast loading speed is essential when creating any web application. A few extra seconds could have a huge impact on the number of users visiting your site. This means that having a fast site is important, not just for ranking well in Google Search Engine, but for having users interact with your webpage.

Vue 3 has introduced several new features to help you achieve this easily through the improvements to the async component API and the new Suspense component. In this article, we will be taking a look at using lazying loading components in Vue 3 to speed up your pages load times.

Check out the youtube video that this article was created for:

In this example app, we have a SecretImage component that displays an interactive graphic of the Vue logo only when the user is authenticated. To prevent intruders from seeing our most valuable asset, we added a button that toggles the visibility of this component.



<template>
  <!-- ... -->
  <!-- Large component that uses many libraries -->
  <SecretImage v-if="isLoggedIn" />
  <!-- ... -->
</template>

<script>
import SecretImage from './components/SecretImage.vue'

export default {
  components: { SecretImage }
  // ...
}
</script>

While building the SecretImage we used many complex libraries causing the amount of javascript code to increase. Building our app we can see it creates a large vendors file which we are loaded on our initial request to our site.

Async Components

We can use the new defineAsynComponent function which comes with Vue 3. All we need to do is pass a function that loads our components. Since Vue comes preconfigured with webpack we can use the dynamic import feature.



<template>
  <!-- ... -->
  <SecretImage v-if="isLoggedIn" />
  <!-- ... -->
</template>

<script>
import { defineAsyncComponent } from 'vue'
const SecretImage = defineAsyncComponent(() =>
  import('./components/SecretImage.vue')
)

export default {
  components: { SecretImage }
  // ...
}
</script>

Now when we build our app we can see a new file has been created and the vendor file has significantly reduced.

Logging back in we can also see a new request being created to loading our SecertImage component.

Since we are loading this component later there may be a short delay while the lazy-loaded part of your UI is being requested and rendered. We can additionally pass in a loading component property which will be displayed while the component is being loaded.



import { defineAsyncComponent } from 'vue'
import Loading from './components/Loading.vue'

const SecretImage = defineAsyncComponent({
  loader: () => import('./components/SecretImage.vue'),
  loadingComponent: Loading
})

However, using this approach can be restrictive as it is hard to pass props or slots to the loading component.

Suspense

To add more flexibility we can use the new Suspense component which allows us to have async loading content as a component in the template. All we have to do is call the Suspense component and pass in a component for the default and fallback slots.



<template>
  <!-- ... -->
  <Suspense v-if="isLoggedIn">
    <template #default>
       <SecretImage />
    </template>
    <template #fallback>
       <Loading />
    </template> 
  </Suspense>
  <SecretImage v-if="isLoggedIn" />
  <!-- ... -->
</template>

<script>
import { defineAsyncComponent } from 'vue'
import Loading from './components/Loading.vue'

const SecretImage = defineAsyncComponent(() =>
  import('./components/SecretImage.vue')
)

export default {
  components: { SecretImage, Loading  }
  // ...
}
</script>

The default slot is displayed when the async content has loaded and the fallback slot is displayed while the state is loading.

Thanks for reading! If you like my post don't forget to follow me and subscribe to my youtube channel!