In this article, I will show you how to create a sticky table of contents sidebar with an active state based on the current scroll position using Nuxt 3, Nuxt Content and Intersection Observer.

Demo

The following StackBlitz contains the source code that is used in the following chapters:

Setup

For this demo, we need to initialize a Nuxt 3 project and install the Nuxt Content and Nuxt Tailwind (optional) modules.

We need to add these modules to nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/content', '@nuxtjs/tailwindcss'],
})

Of course, we need some content to show the table of contents. For this demo, I will reference the index.md file from my StackBlitz demo.

To render this content, let's create a catch-all route in the pages directory:

<template>
  <main class="p-4 flex flex-col gap-4">
    <ContentDoc>
      <template #default="{ doc }">
        <div class="grid grid-cols-12 gap-8">
          <div class="nuxt-content col-span-8">
            <ContentRenderer ref="nuxtContent" :value="doc" />
          </div>
        </div>
      </template>
    </ContentDoc>
  </main>
</template>

The <ContentDoc> component fetches and renders a single document, and the <ContentRenderer> component renders the body of a Markdown document.

Check the official docs for more information about these Nuxt Content components.

Now let's add a TableOfContents.vue component to this template:

<script setup lang="ts">
const activeTocId = ref(null)
</script>

<template>
  <main class="p-4 flex flex-col gap-4">
    <ContentDoc>
      <template #default="{ doc }">
        <div class="grid grid-cols-12 gap-8">
          <div class="nuxt-content col-span-8">
            <ContentRenderer ref="nuxtContent" :value="doc" />
          </div>
          <div class="col-span-4 border rounded-md p-4">
            <div class="sticky top-0 flex flex-col items-center">
              <TableOfContents :activeTocId="activeTocId" />
            </div>
          </div>
        </div>
      </template>
    </ContentDoc>
  </main>
</template>

I'll explain the activeTocId prop in the following "Intersection Observer" chapter.

Let's take a look at the component's code:

<script setup lang="ts">
import { Ref } from 'vue'

const props = withDefaults(defineProps<{ activeTocId: string }>(), {})

const router = useRouter()

const { data: blogPost } = await useAsyncData(`blogToc`, () => queryContent(`/`).findOne())
const tocLinks = computed(() => blogPost.value?.body.toc.links ?? [])

const onClick = (id: string) => {
  const el = document.getElementById(id)
  if (el) {
    router.push({ hash: `#${id}` })
    el.scrollIntoView({ behavior: 'smooth', block: 'center' })
  }
}
</script>

<template>
  <div class="max-h-82 overflow-auto">
    <h4>Table of Contents</h4>
    <nav class="flex mt-4">
      <ul class="ml-0 pl-4">
        <li
          v-for="{ id, text, children } in tocLinks"
          :id="`toc-${id}`"
          :key="id"
          class="cursor-pointer text-sm list-none ml-0 mb-2 last:mb-0"
          @click="onClick(id)"
        >
          {{ text }}
          <ul v-if="children" class="ml-3 my-2">
            <li
              v-for="{ id: childId, text: childText } in children"
              :id="`toc-${childId}`"
              :key="childId"
              class="cursor-pointer text-xs list-none ml-0 mb-2 last:mb-0"
              @click.stop="onClick(childId)"
            >
              {{ childText }}
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</template>

Let's analyze this code:

To get a list of all available headlines, we use the queryContent composable and access them via body.toc.links:

const { data: blogPost } = await useAsyncData(`blogToc`, () => queryContent(`/`).findOne())
const tocLinks = computed(() => blogPost.value?.body.toc.links ?? [])

If someone clicks on a link in the ToC, we query the HTML element from the DOM, push the hash route and smoothly scroll the element into the viewport:

const onClick = (id: string) => {
  const el = document.getElementById(id)
  if (el) {
    router.push({ hash: `#${id}` })
    el.scrollIntoView({ behavior: 'smooth', block: 'center' })
  }
}

At this point, we can show a list of all the headlines of our content in the sidebar, but our ToC does not indicate which headline is currently visible.

Intersection Observer

We use the Intersection Observer to handle detecting when an element scrolls into our viewport. It's supported by almost every browser.

Nuxt Content automatically adds an id to each heading of our content files. Using document.querySelectorAll, we query all h2 and h3 elements associated with an id and use the Intersection Observer API to get informed when they scroll into view.

Let's go ahead and implement that logic:

<script setup lang="ts">
import { watchDebounced } from '@vueuse/core'

const activeTocId = ref(null)
const nuxtContent = ref(null)

const observer: Ref<IntersectionObserver | null | undefined> = ref(null)
const observerOptions = reactive({
  root: nuxtContent.value,
  threshold: 0.5,
})

onMounted(() => {
  observer.value = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      const id = entry.target.getAttribute('id')
      if (entry.isIntersecting) {
        activeTocId.value = id
      }
    })
  }, observerOptions)

  document.querySelectorAll('.nuxt-content h2[id], .nuxt-content h3[id]').forEach((section) => {
    observer.value?.observe(section)
  })
})

onUnmounted(() => {
  observer.value?.disconnect()
})
</script>

Let's break down the single steps that are happening in this code.

First, we define some reactive variables:

• activeTocId is used to track the currently active DOM element to be able to add some CSS styles to it.

• nuxtContent is a Template Ref to access the DOM element of the ContentRenderer component.

• observer is used to track the h2 and h3 HTML elements that scroll into the viewport.

• observerOptions contains a set of options that define when the observer callback is invoked. It contains the nuxtContent ref as root for the observer and a threshold of 0.5, which means that if 50% of the way through the viewport is visible, the callback will fire. You can also set it to 0; it will fire the callback if one element pixel is visible.

In the onMounted lifecycle hook, we are initializing the observer. We iterate over each article heading and set the activeTocId value if the entry intersects with the viewport. We also use document.querySelectorAll to target our .nuxt-content article and get the DOM elements that are either h2 or h3 elements with IDs and observe those using our previously initialized IntersectionObserver.

Finally, we are disconnecting our observer in the onUnmounted lifecycle hook to inform the observer to no longer track these headings when we navigate away.

Style Active Link

Let's improve the code by applying styles to the activeTocId element in our table of contents component. It should be highlighted and show an indicator:

<script setup lang="ts">
import { watchDebounced } from '@vueuse/core'
import { Ref } from 'vue'

const props = withDefaults(defineProps<{ activeTocId: string }>(), {})

const router = useRouter()

const sliderHeight = useState('sliderHeight', () => 0)
const sliderTop = useState('sliderTop', () => 0)
const tocLinksH2: Ref<Array<HTMLElement>> = ref([])
const tocLinksH3: Ref<Array<HTMLElement>> = ref([])

const { data: blogPost } = await useAsyncData(`blogToc`, () => queryContent(`/`).findOne())
const tocLinks = computed(() => blogPost.value?.body.toc.links ?? [])

const onClick = (id: string) => {
  const el = document.getElementById(id)
  if (el) {
    router.push({ hash: `#${id}` })
    el.scrollIntoView({ behavior: 'smooth', block: 'center' })
  }
}

watchDebounced(
  () => props.activeTocId,
  (newActiveTocId) => {
    const h2Link = tocLinksH2.value.find((el: HTMLElement) => el.id === `toc-${newActiveTocId}`)
    const h3Link = tocLinksH3.value.find((el: HTMLElement) => el.id === `toc-${newActiveTocId}`)

    if (h2Link) {
      sliderHeight.value = h2Link.offsetHeight
      sliderTop.value = h2Link.offsetTop - 100
    } else if (h3Link) {
      sliderHeight.value = h3Link.offsetHeight
      sliderTop.value = h3Link.offsetTop - 100
    }
  },
  { debounce: 200, immediate: true }
)
</script>

<template>
  <div class="max-h-82 overflow-auto">
    <h4>Table of Contents</h4>
    <nav class="flex mt-4">
      <div class="relative bg-secondary w-0.5 overflow-hidden rounded">
        <div
          class="
            absolute
            left-0
            w-full
            transition-all
            duration-200
            rounded
            bg-red-500
          "
          :style="{ height: `${sliderHeight}px`, top: `${sliderTop}px` }"
        ></div>
      </div>
      <ul class="ml-0 pl-4">
        <li
          v-for="{ id, text, children } in tocLinks"
          :id="`toc-${id}`"
          :key="id"
          ref="tocLinksH2"
          class="cursor-pointer text-sm list-none ml-0 mb-2 last:mb-0"
          :class="{ 'font-bold': id === activeTocId }"
          @click="onClick(id)"
        >
          {{ text }}
          <ul v-if="children" class="ml-3 my-2">
            <li
              v-for="{ id: childId, text: childText } in children"
              :id="`toc-${childId}`"
              :key="childId"
              ref="tocLinksH3"
              class="cursor-pointer text-xs list-none ml-0 mb-2 last:mb-0"
              :class="{ 'font-bold': childId === activeTocId }"
              @click.stop="onClick(childId)"
            >
              {{ childText }}
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</template>

We use the VueUse's watchDebounced composable to debounced watch changes of the active ToC element ID:

watchDebounced(
  () => props.activeTocId,
  (newActiveTocId) => {
    const h2Link = tocLinksH2.value.find((el: HTMLElement) => el.id === `toc-${newActiveTocId}`)
    const h3Link = tocLinksH3.value.find((el: HTMLElement) => el.id === `toc-${newActiveTocId}`)

    if (h2Link) {
      sliderHeight.value = h2Link.offsetHeight
      sliderTop.value = h2Link.offsetTop - 100
    } else if (h3Link) {
      sliderHeight.value = h3Link.offsetHeight
      sliderTop.value = h3Link.offsetTop - 100
    }
  },
  { debounce: 200, immediate: true }
)

Based on the current active ToC element ID, we find the HTML element from the list of available links and set the slider height & top values accordingly.

Check the StackBlitz demo for the full source code and to play around with this implementation. A similar ToC is also available on my blog.

Conclusion

I'm pleased with my table of contents implementation using Nuxt 3, Nuxt Content, and Intersection Observer.

Of course, you can use the Intersection Observer in a traditional Vue application without Nuxt. The Intersection Observer API is mighty and can also be used to implement features like lazy-loading images.

Leave a comment if you have a better solution to implement such a ToC.

If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.

But soon, I realized that many other sites solved that problem more elegantly. If you visit their website, stay for some time, and scroll through the content, a small notification appears at the bottom of the screen. It asks if you are interested in a specific product, and if you agree, it redirects to a page with information about this product.

In this article, I'll explain how I built a polite popup to ask people if they would like to subscribe to my newsletter using Nuxt 3.

What is a polite popup?

The goal of a so-called polite popup is to only ask for visitors emails if it detects that visitors are engaged with your content. This means they’ll be more likely to sign up by the time we ask them because it’ll be after they’ve decided they liked our content.

In the following sections, we'll build a popup that

• waits for a visitor to browse the website
• makes sure visitors are interested in the website
• appears off to the side in a non-intrusive way
• is easy to dismiss or ignore
• asks for permission first
• waits a bit before it appears again

Implementation

Now that we know the criteria of a polite popup let's start implementing it using Nuxt 3.

I use Nuxt.js in this example, but the concepts and solutions are not tied to any framework.

The demo code is interactively available at StackBlitz:

Implement the composable

The most exciting challenge of the polite popup is only showing it if visitors are interested in the website and content we want to promote.

Technically, we'll solve it this way:

• The visitor must be visiting a page with Vue-related content as my newsletter targets Vue developers.
• The visitor must be actively scrolling the current page for 6 seconds or more.
• The visitor must scroll through at least 35% of the current page during their visit.

If these numbers aren’t generating the amount of engagement you want to see from visitors, you can enable a more aggressive mode that will lower the threshold by about 20-30%.

Let's start by writing a Vue composable for our polite popup:

import { useWindowScroll, useWindowSize, useTimeoutFn } from '@vueuse/core'

const config = {
  timeoutInMs: 3000,
  contentScrollThresholdInPercentage: 300,
}

export const usePolitePopup = () => {
  const visible = useState('visible', () => false)
  const readTimeElapsed = useState('read-time-elapsed', () => false)

  const { start } = useTimeoutFn(
    () => {
      readTimeElapsed.value = true
    },
    config.timeoutInMs,
    { immediate: false }
  )
  const { y: scrollYInPx } = useWindowScroll()
  const { height: windowHeight } = useWindowSize()

  // Returns percentage scrolled (ie: 80 or NaN if trackLength == 0)
  const amountScrolledInPercentage = computed(() => {
    const documentScrollHeight = document.documentElement.scrollHeight
    const trackLength = documentScrollHeight - windowHeight.value
    const percentageScrolled = Math.floor((scrollYInPx.value / trackLength) * 100)
    return percentageScrolled
  })

  const scrolledContent = computed(() => amountScrolledInPercentage.value >= config.contentScrollThresholdInPercentage)

  const trigger = () => {
    readTimeElapsed.value = false
    start()
  }

  watch([readTimeElapsed, scrolledContent], ([newReadTimeElapsed, newScrolledContent]) => {
    if (newReadTimeElapsed && newScrolledContent) {
      visible.value = true
    }
  })

  return {
    visible,
    trigger,
  }
}

We defined two state variables:

• visible: a boolean indicating if the popup should be visible or not.
• readTimeElapsed: a boolean indicating if the user has spent the defined time on the page.

The trigger method is exposed and triggers the a timer which is used to check if the visitor has spent a predefined amount of time on the page. A Vue watcher is used to set visible to true if the timer has expired and the scroll threshold is exceeded. For the timer, we use VueUse's useTimeoutFn composable which runs a setTimeout function and sets the readTimeElapsed state variable to true after the timer has expired.

Let's take a detailed look at the amountScrolledInPercentage computed property:

import { useWindowSize } from '@vueuse/core'

const { height: windowHeight } = useWindowSize()

// Returns percentage scrolled (ie: 80 or NaN if trackLength == 0)
const amountScrolledInPercentage = computed(() => {
  const documentScrollHeight = document.documentElement.scrollHeight
  const trackLength = documentScrollHeight - windowHeight.value
  const percentageScrolled = Math.floor((scrollYInPx.value / trackLength) * 100)
  return percentageScrolled
})

To get the total scrollable area of a document, we need to retrieve the following two measurements of the page:

1. The height of the browser window: We use VueUse's useWindowSize composable to get reactive variable of the browser window height.
2. The height of the entire document: We use document.documentElement.scrollHeight to get the height of the document, including content not visible on the screen due to overflow.

By subtracting 2 from 1, we get the total scrollable area of the document. VueUse's useWindowScroll composable is used to access the number of pixels the document is currently scrolled along the vertical axis.

Move your eyes down to the trackLength variable, which gets the total available scroll length of the document. The variable will contain 0 if the page is not scrollable. The percentageScrolled variable then divides the scrollYInPx variable (amount the user has scrolled) with trackLength to derive how much the user has scrolled percentage wise.

Finally, we need to trigger the popup on certain pages. In our case, we only want to trigger it on the Vue route path:

<template>
  <main>
    <ContentDoc />
  </main>
</template>

<script setup lang="ts">
const route = useRoute()

const { trigger } = usePolitePopup()

if (route.path === '/vue') {
  trigger()
}
</script>

Write the popup component

Now it's time to write the Vue component that renders the popup:

<template>
  <div v-if="visible" class="fixed z-50 right-0 bottom-0 md:right-5 md:bottom-5 p-4 rounded-md bg-white shadow-lg">
    <span>May I show you something cool?</span>
    <div class="flex gap-4 mt-4">
      <button @click="onClickOk">OK</button>
      <button @click="onClickClose">Nah, thanks</button>
    </div>
  </div>
</template>

<script setup lang="ts">
const { setClosed, visible } = usePolitePopup()

const onClickOk = async () => {
  setClosed()
  navigateTo('/newsletter')
}

const onClickClose = () => {
  setClosed()
}
</script>

In this example, I'm using Nuxt Tailwind to style the component.

PolitePopup.vue is rendered at a fixed position of the viewport if the visible reactive variable value is true. It offers two buttons, one to accept the offer and one to decline it.

As you can see, we are using setClosed from our useShowPopup composable, which we haven't defined yet. Let's define it:

export const usePolitePopup = () => {
  const visible = useState('visible', () => false)
  ...

  const setClosed = () => {
    visible.value = false
  }

  return {
    ...
    setClosed
  }
}

The last step is to add our new PolitePopup.vue component to the template of app.vue:

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
    <PolitePopup />
  </div>
</template>

At this point, we finished the basic implementation of the polite popup. If we navigate to /vue, spend 3 seconds on the page, and scroll down more than 300 pixel the polite popup appears:

Add logic to wait a bit before the popup appears again

One problem with the current implementation: each time we reload the page and scroll down, the popup is triggered. But our popup should wait a bit before it appears again. So let's implement that logic.

First, we need a way to store the status of the polite popup in LocalStorage. For this, we use the following data model:

interface PolitePopupStorageDTO {
  status: 'unsubscribed' | 'subscribed'
  seenCount: number
  lastSeenAt: number
}

• status is per default unsubscribed and is set to subscribed if a visitor subscribes to the newsletter.
• seenCount tracks how often the user has seen the popup.
• lastSeenAt tracks the timestamp when the visitor has seen the popup.

Let's add that interface to our usePolitePopup composable:

interface PolitePopupStorageDTO {
  status: 'unsubscribed' | 'subscribed'
  seenCount: number
  lastSeenAt: number
}

export const usePolitePopup = () => {
  ...
  const storedData: Ref<PolitePopupStorageDTO> = useLocalStorage('polite-popup', {
    status: 'unsubscribed',
    seenCount: 0,
    lastSeenAt: 0,
  })
  ...
  watch(
    [readTimeElapsed, scrolledContent],
    ([newReadTimeElapsed, newScrolledContent]) => {
      if (newReadTimeElapsed && newScrolledContent) {
        visible.value = true;
        storedData.value.seenCount += 1;
        storedData.value.lastSeenAt = new Date().getTime();
      }
    }
  );
  ...

  return {
    ...
  }
}

We use VueUse's useLocalStorage composable to get a reactive variable of a LocalStorage entry. Each time our watcher is fired and set the popup visible, we increment seenCount and set the current timestamp at lastSeenAt in our LocalStorage object.

Let's store the information that the visitor has subscribed to the newsletter. Let's add that logic to newsletter.vue:

<template>
  <main class="flex flex-col gap-8">
    <NuxtLink to="/">Back home</NuxtLink>
    <button @click="setSubscribed">Subscribe</button>
  </main>
</template>

<script setup lang="ts">
const { setSubscribed } = usePolitePopup()
</script>

and in

export const usePolitePopup = () => {
  ...

  const setSubscribed = () => {
    storedData.value.status = 'subscribed'
  }

  return {
    ...
    setSubscribed
  }
}

Extend visibility logic

The next step is only to show the popup if the current visitor

• hasn't subscribed yet
• has seen the popup more than three times
• has already seen the popup today

Let's implement that logic:

const isToday = (date: Date): boolean => {
  const today = new Date();
  return (
    date.getDate() === today.getDate() &&
    date.getMonth() === today.getMonth() &&
    date.getFullYear() === today.getFullYear()
  );
};

const config = {
  timeoutInMs: 3000,
  maxSeenCount: 5,
  scrollYInPxThreshold: 300,
};

export const usePolitePopup = () => {
  ...
  watch(
    [readTimeElapsed, scrolledContent],
    ([newReadTimeElapsed, newScrolledContent]) => {
      if (storedData.value.status === 'subscribed') {
        return;
      }

      if (storedData.value.seenCount >= config.maxSeenCount) {
        return;
      }

      if (
        storedData.value.lastSeenAt &&
        isToday(new Date(storedData.value.lastSeenAt))
      ) {
        return;
      }

      if (newReadTimeElapsed && newScrolledContent) {
        visible.value = true;
        storedData.value.seenCount += 1;
        storedData.value.lastSeenAt = new Date().getTime();
      }
    }
  };
  ...

  return {
    ...
  }
}

We are done!

You will probably also have seen this polite popup on this page if you read it on my portfolio website.

Conclusion

In my opinion, polite popups are the best way to convert visitors to my newsletter. This way, I can ensure that they are interested in my content and do not get annoyed by modals.

If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.

Setup

First, let's create a new Nuxt 3 project. As the next step, we need to add the Nuxt Content v2 module to our application.

Finally, let's add some content that will be included in the RSS feed:

├── content
|  └── blog
|  └── blog
|  |   ├── article-1.md
|  |   ├── article-2.md
|  |   ├── article-3.md
|  |   ├── article-4.md
|  |   ├── article-5.md

Each .md file has this simple structure:

---
title: 'Article 1'
description: 'Article 1 description'
date: '2022-01-01'
---

Article 5 Content

The source code for this demo is available at GitHub and in this StackBlitz playground:

Add Server Route

We will be utilizing the server routes available within Nuxt, and to do so, we'll need to create the server/ directory within our app root directly.

Once this is done, we create a routes/ directory inside this and add a rss.xml.ts file. It will translate to /rss.xml:

export default defineEventHandler(async (event) => {
  const feedString = ''
  event.res.setHeader('content-type', 'text/xml')
  event.res.end(feedString)
})

The next step is to query our blog posts:

import { serverQueryContent } from '#content/server'

export default defineEventHandler(async (event) => {
  const docs = await serverQueryContent(event).sort({ date: -1 }).where({ _partial: false }).find()
  const blogPosts = docs.filter((doc) => doc?._path?.includes('/blog'))

  const feedString = ''
  event.res.setHeader('content-type', 'text/xml')
  event.res.end(feedString)
})

Now let's add the rss library to generate the RSS XML string based on our content:

import { serverQueryContent } from '#content/server'
import RSS from 'rss'

const feed = new RSS({
  title: 'Michael Hoffmann',
  site_url: 'https://mokkapps.de',
  feed_url: `https://mokkapps.de/rss.xml`,
})

const docs = await serverQueryContent(event).sort({ date: -1 }).where({ _partial: false }).find()
const blogPosts = docs.filter((doc) => doc?._path?.includes('/blog'))

for (const doc of blogPosts) {
  feed.item({
    title: doc.title ?? '-',
    url: `https://mokkapps.de${doc._path}`,
    date: doc.date,
    description: doc.description,
  })
}

const feedString = feed.xml({ indent: true })
event.res.setHeader('content-type', 'text/xml')
event.res.end(feedString)

When using nuxt generate, you may want to pre-render the feed since the server route won't be able to run on a static hosting.

We can do this by using the nitro.prerender option in nuxt.config:

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: ['@nuxt/content'],
  nitro: {
    prerender: {
      routes: ['/rss.xml'],
    },
  },
  content: {
    // https://content.nuxtjs.org/api/configuration
  },
})

If we now navigate to /rss.xml, we get our generated RSS feed:

<rss xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
  <channel>
    <title>
      <![CDATA[ Michael Hoffmann ]]>
    </title>
    <description>
      <![CDATA[ Michael Hoffmann ]]>
    </description>
    <link>https://mokkapps.de</link>
    <generator>RSS for Node</generator>
    <lastBuildDate>Sun, 14 Aug 2022 18:14:16 GMT</lastBuildDate>
    <atom:link href="https://mokkapps.de/rss.xml" rel="self" type="application/rss+xml"/>
    <item>
      <title>
        <![CDATA[ Article 5 ]]>
      </title>
      <description>
        <![CDATA[ Article 5 description ]]>
      </description>
      <link>https://mokkapps.de/blog/article-5</link>
      <guid isPermaLink="true">https://mokkapps.de/blog/article-5</guid>
      <pubDate>Thu, 05 May 2022 00:00:00 GMT</pubDate>
    </item>
    <item>
      <title>
        <![CDATA[ Article 4 ]]>
      </title>
      <description>
        <![CDATA[ Article 4 description ]]>
      </description>
      <link>https://mokkapps.de/blog/article-4</link>
      <guid isPermaLink="true">https://mokkapps.de/blog/article-4</guid>
      <pubDate>Mon, 04 Apr 2022 00:00:00 GMT</pubDate>
    </item>
    <item>
      <title>
        <![CDATA[ Article 3 ]]>
      </title>
      <description>
        <![CDATA[ Article 3 description ]]>
      </description>
      <link>https://mokkapps.de/blog/article-3</link>
      <guid isPermaLink="true">https://mokkapps.de/blog/article-3</guid>
      <pubDate>Thu, 03 Mar 2022 00:00:00 GMT</pubDate>
    </item>
    <item>
      <title>
        <![CDATA[ Article 2 ]]>
      </title>
      <description>
        <![CDATA[ Article 2 description ]]>
      </description>
      <link>https://mokkapps.de/blog/article-2</link>
      <guid isPermaLink="true">https://mokkapps.de/blog/article-2</guid>
      <pubDate>Wed, 02 Feb 2022 00:00:00 GMT</pubDate>
    </item>
    <item>
      <title>
        <![CDATA[ Article 1 ]]>
      </title>
      <description>
        <![CDATA[ Article 1 description ]]>
      </description>
      <link>https://mokkapps.de/blog/article-1</link>
      <guid isPermaLink="true">https://mokkapps.de/blog/article-1</guid>
      <pubDate>Sat, 01 Jan 2022 00:00:00 GMT</pubDate>
    </item>
  </channel>
</rss>

If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.

title: How to Create a Custom Code Block With Nuxt Content v2 published: true date: tags: nuxt, vue, nuxtjs, vuejs, webdev canonical_url: https://www.mokkapps.de/blog/how-to-create-a-custom-code-block-with-nuxt-content-v2/

cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iy8xll86f72phzgata1s.jpg

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:

• Custom styling for code blocks inside Markdown files
• Show language name (if available)
• Show file name (if available)
• Show a “Copy Code” button

Nuxt Content v2

Nuxt Content v2 is a Nuxt 3 module that reads local files from the /content directory in your project. It supports .md, .yml, .csv and .json files. Additionally, it’s possible to use Vue components in Markdown with the MDC Syntax.

Setup Nuxt App

First, let’s start a new Nuxt Content project with:

npx nuxi init nuxt-custom-code-blocks -t content

Then we need to install the dependencies in the nuxt-custom-code-blocks folder:

yarn install

Now we can start the Nuxt content app in development mode:

yarn dev

A browser window should automatically open for http://localhost:3000. Alternatively, you can start playing with Nuxt Content in your browser using StackBlitz or CodeSandbox.

The following StackBlitz sandbox demonstrates the application we create in this article:

{% embed https://stackblitz.com/edit/nuxt-content-v2-custom-code-blocks?embed=1&ctl=1 %}

Custom Prose Component

Prose represents the HTML tags output from the Markdown syntax in Nuxt Content. Nuxt Content provides a Vue component for each HTML tag like links, title levels, etc.

It’s possible to override these Vue components, which is precisely what we’ll do to create a custom code block component.

To customize a Prose component, we have to perform these steps:

• Check out the original component sources.
• Use the same props.
• Name it the same in our components/content/ directory.

In our example, we want to override ProseCode, which is Nuxt Content’s default Vue component to render code blocks in Markdown files.

This component accepts the following props:

• code: the provided code as a string
• language: the provided language name
• filename: the provided filename
• highlights: a list of highlighted line numbers

Let’s take a look at how we can set these values in a Markdown file:

js [src/index.js] {1, 2-3}
  const a = 4;
  const b = a + 3;
  const c = a * b;

In the above example:

• js is the value passed to the language prop
• src/index.js is the value passed to the filename prop
• [1, 2, 3] is the value passed to the highlights prop

To override the component, we create ProseCode.vue in the components/content directory and use the exact same props that are defined in the default component:

<template>
  <slot />
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    code?: string;
    language?: string | null;
    filename?: string | null;
    highlights?: Array<number>;
  }>(),
  { code: '', language: null, filename: null, highlights: [] }
);
</script>

Now we can customize this component however we want.

Style Container

First, we want to style the container that includes the code. Therefore, we wrap the <slot /> in a div and style it:

<template>
  <div class="container">
    <slot />
  </div>
</template>

<style scoped>
.container {
  background: #1e1e1e;
  position: relative;
  margin-top: 1rem;
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 0.5rem;
}
</style>

Let’s take a look at our custom code block:

 Styled Code Block Container

Show Language

Next, we want to show the name of the language on the top right, if it is available.

<template>
  <div class="container">
    <span v-if="languageText" :style="{ background: languageBackground, color: languageColor }" class="language-text" > {{ languageText }} </span> <slot />
  </div>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    code?: string;
    language?: string | null;
    filename?: string | null;
    highlights?: Array<number>;
  }>(),
  { code: '', language: null, filename: null, highlights: [] }
);

const languageMap: Record<
  string,
  { text: string; color: string; background: string }
> = {
  vue: {
    text: 'vue',
    background: '#42b883',
    color: 'white',
  },
  js: {
    text: 'js',
    background: '#f7df1e',
    color: 'black',
  },
};

const languageText = computed(() =>
  props.language ? languageMap[props.language]?.text : null
);
const languageBackground = computed(() =>
  props.language ? languageMap[props.language]?.background : null
);
const languageColor = computed(() =>
  props.language ? languageMap[props.language]?.color : null
);
</script>

<style scoped>
.container {
  background: #1e1e1e;
  padding-top: 1em;
}

.language-text {
  position: absolute;
  top: 0;
  right: 1em;
  padding: 0.25em 0.5em;
  font-size: 14px;
  text-transform: uppercase;
  border-bottom-right-radius: 0.25em;
  border-bottom-left-radius: 0.25em;
}
</style>

We define a map called languageMap that contains the displayed text, the CSS background, and text color for each programming language. We style the span tag that renders the language inside our template based on this map and the provided language prop:

 Code block with language name

Show File Name

Next, we want to show the file’s name on the top left, if it is available:

<template>
  <div class="container">
    <span v-if="filename" class="filename-text">
      {{ filename }}
    </span>
    <slot />
  </div>
</template>

<style scoped>
.filename-text {
  position: absolute;
  top: 0;
  left: 1em;
  padding: 0.25em 0.5em;
  color: white;
  font-size: 14px;
}
</style>

The result looks like this:

 Code block with file name

Add Copy Code Button

Finally, we want to show a button that copies the code to the clipboard. Therefore, we use the useClipboard composable from VueUse:

<template>
  <div class="container">
    <slot />
    <div class="bottom-container">
      <div class="copy-container">
        <span class="copied-text" v-if="copied">Copied code!</span>
        <button @click="copy(code)">Copy Code</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useClipboard } from '@vueuse/core';

const { copy, copied, text } = useClipboard();
</script>

<style scoped>
.bottom-container {
  display: flex;
  justify-content: flex-end;
}

.copy-container {
  display: flex;
}

.copied-text {
  margin-right: 1em;
}
</style>

Let’s take a look at the final result with language & file name, copy code button, and line highlighting:

 Final custom code block

Conclusion

Custom code blocks are essential for my blog as my blog posts contain a lot of code snippets. Features like copy code or line highlighting provide excellent value to my readers, and it is straightforward to add such features by creating a custom code block component in Nuxt Content v2.

The source code of this demo is available at GitHub or as StackBlitz sandbox.

You can expect more Nuxt 3 posts in the following months as I plan to blog about interesting topics that I discover while rewriting my portfolio website.

If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.

• Custom styling for code blocks inside Markdown files
• Show language name (if available)
• Show file name (if available)
• Show a “Copy Code” button

Nuxt Content v2

Nuxt Content v2 is a Nuxt 3 module that reads local files from the /content directory in your project. It supports .md, .yml, .csv and .json files. Additionally, it’s possible to use Vue components in Markdown with the MDC Syntax.

Setup Nuxt App

First, let’s start a new Nuxt Content project with:

npx nuxi init nuxt-custom-code-blocks -t content

Then we need to install the dependencies in the nuxt-custom-code-blocks folder:

yarn install

Now we can start the Nuxt content app in development mode:

yarn dev

A browser window should automatically open for http://localhost:3000. Alternatively, you can start playing with Nuxt Content in your browser using StackBlitz or CodeSandbox.

The following StackBlitz sandbox demonstrates the application we create in this article:

Custom Prose Component

Prose represents the HTML tags output from the Markdown syntax in Nuxt Content. Nuxt Content provides a Vue component for each HTML tag like links, title levels, etc.

It’s possible to override these Vue components, which is precisely what we’ll do to create a custom code block component.

To customize a Prose component, we have to perform these steps:

• Check out the original component sources.
• Use the same props.
• Name it the same in our components/content/ directory.

In our example, we want to override ProseCode, which is Nuxt Content’s default Vue component to render code blocks in Markdown files.

This component accepts the following props:

• code: the provided code as a string
• language: the provided language name
• filename: the provided filename
• highlights: a list of highlighted line numbers

Let’s take a look at how we can set these values in a Markdown file:

js [src/index.js] {1, 2-3}
  const a = 4;
  const b = a + 3;
  const c = a * b;

In the above example:

• js is the value passed to the language prop
• src/index.js is the value passed to the filename prop
• [1, 2, 3] is the value passed to the highlights prop

To override the component, we create ProseCode.vue in the components/content directory and use the exact same props that are defined in the default component:

<template>
  <slot />
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    code?: string;
    language?: string | null;
    filename?: string | null;
    highlights?: Array<number>;
  }>(),
  { code: '', language: null, filename: null, highlights: [] }
);
</script>

Now we can customize this component however we want.

Style Container

First, we want to style the container that includes the code. Therefore, we wrap the <slot /> in a div and style it:

<template>
  <div class="container">
    <slot />
  </div>
</template>

<style scoped>
.container {
  background: #1e1e1e;
  position: relative;
  margin-top: 1rem;
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 0.5rem;
}
</style>

Let’s take a look at our custom code block:

Show Language

Next, we want to show the name of the language on the top right, if it is available.

<template>
  <div class="container">
    <span v-if="languageText" :style="{ background: languageBackground, color: languageColor }" class="language-text" > {{ languageText }} </span> <slot />
  </div>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    code?: string;
    language?: string | null;
    filename?: string | null;
    highlights?: Array<number>;
  }>(),
  { code: '', language: null, filename: null, highlights: [] }
);

const languageMap: Record<
  string,
  { text: string; color: string; background: string }
> = {
  vue: {
    text: 'vue',
    background: '#42b883',
    color: 'white',
  },
  js: {
    text: 'js',
    background: '#f7df1e',
    color: 'black',
  },
};

const languageText = computed(() =>
  props.language ? languageMap[props.language]?.text : null
);
const languageBackground = computed(() =>
  props.language ? languageMap[props.language]?.background : null
);
const languageColor = computed(() =>
  props.language ? languageMap[props.language]?.color : null
);
</script>

<style scoped>
.container {
  background: #1e1e1e;
  padding-top: 1em;
}

.language-text {
  position: absolute;
  top: 0;
  right: 1em;
  padding: 0.25em 0.5em;
  font-size: 14px;
  text-transform: uppercase;
  border-bottom-right-radius: 0.25em;
  border-bottom-left-radius: 0.25em;
}
</style>

We define a map called languageMap that contains the displayed text, the CSS background, and text color for each programming language. We style the span tag that renders the language inside our template based on this map and the provided language prop:

Show File Name

Next, we want to show the file’s name on the top left, if it is available:

<template>
  <div class="container">
    <span v-if="filename" class="filename-text">
      {{ filename }}
    </span>
    <slot />
  </div>
</template>

<style scoped>
.filename-text {
  position: absolute;
  top: 0;
  left: 1em;
  padding: 0.25em 0.5em;
  color: white;
  font-size: 14px;
}
</style>

The result looks like this:

Add Copy Code Button

Finally, we want to show a button that copies the code to the clipboard. Therefore, we use the useClipboard composable from VueUse:

<template>
  <div class="container">
    <slot />
    <div class="bottom-container">
      <div class="copy-container">
        <span class="copied-text" v-if="copied">Copied code!</span>
        <button @click="copy(code)">Copy Code</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useClipboard } from '@vueuse/core';

const { copy, copied, text } = useClipboard();
</script>

<style scoped>
.bottom-container {
  display: flex;
  justify-content: flex-end;
}

.copy-container {
  display: flex;
}

.copied-text {
  margin-right: 1em;
}
</style>

Let’s take a look at the final result with language & file name, copy code button, and line highlighting:

Conclusion

Custom code blocks are essential for my blog as my blog posts contain a lot of code snippets. Features like copy code or line highlighting provide excellent value to my readers, and it is straightforward to add such features by creating a custom code block component in Nuxt Content v2.

The source code of this demo is available at GitHub or as StackBlitz sandbox.

You can expect more Nuxt 3 posts in the following months as I plan to blog about interesting topics that I discover while rewriting my portfolio website.

If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.

Nuxt Content v2

Nuxt Content v2 is a Nuxt 3 module that reads local files from the /content directory in your project. It supports .md, .yml, .csv and .json files. Additionally, it’s possible to use Vue components in Markdown with the MDC Syntax.

Setup Nuxt App

First, let’s start a new Nuxt Content project with:

npx nuxi init nuxt-demo-blog -t content

Then we need to install the dependencies in the nuxt-demo-blog folder:

yarn install

Now we can start the Nuxt content app in development mode:

yarn dev

A browser window should automatically open for http://localhost:3000. Alternatively, you can start playing with Nuxt Content in your browser using StackBlitz or CodeSandbox.

The following StackBlitz sandbox demonstrates the simple blog application we create in this article:

Blog Content Structure

Our demo blog will have this structure inside the /content directory:

├── blog
│ ├── _index.md
│ ├── a-great-article
│ └── cover.jpg
│ │ └── index.md
│ └── another-great-article
│ └── cover.jpg
│ └── index.md

blog/_index.md is a Partial content that will show a list of all available blog posts.

Each blog post has its directory, including an index.md and a cover.jpg file.

The index.md files include Front-matter at the top of the file to provide meta-data to pages, like title, date, and the cover image URL:

---
title: A Great Article
date: 2018-05-11
cover: /content/blog/a-great-article/cover.jpg
---

This is a great article body!

Simple Navigation

First, we need simple navigation in our application to be able to navigate to our blog page.

Let’s start by adding a default layout in layouts:

<template>
  <div>
    <nav>
      <NuxtLink to="/" class="link">Home</NuxtLink>
      <NuxtLink to="/blog" class="link">Blog</NuxtLink>
    </nav>
    <main>
      <slot />
    </main>
  </div>
</template>

<style>
.link {
  margin-right: 1rem;
}
</style>

In our app.vue we need to wrap the NuxtPage component with the NuxtLayout component:

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

Finally, we create a index.vue in pages directory:

<template>
  <h1>Home</h1>
</template>

Blog List

Let’s look at how we can implement a list of all available blog posts.

First, we need to create a BlogPosts.vue Vue component in components/content/ that queries and renders all available blog posts:

<template>
  <h1>Blog</h1>
  <ul>
    <li v-for="{ _path: slug, title } in blogPosts" :key="slug">
      <NuxtLink :to="slug">{{ title }}</NuxtLink>
    </li>
  </ul>
</template>

<script setup lang="ts">
const blogPosts = await queryContent('/blog')
  .sort({ date: -1 }) // show latest articles first
  .where({ _partial: false }) // exclude the Partial files
  .find();
</script>

We use the queryContent function from Nuxt to query a list of our blog posts.

Now we can reference this Vue component inside our content/blog/_index.md file:

---
title: Blog
---

::blog-posts

We can use any component in the components/content/ directory or any component made available globally in your application in Markdown files.

If we now click on the “Blog” navigation link in our application, we can see a list of all available blog posts:

I reported a Nuxt content bug that you need to reload some routes; otherwise, their content is not visible.

Blog Post Page

Finally, we need to create a dynamic route for the blog posts. Thus, we create a [...slug].vue file in pages/blog:

<template>
  <ContentDoc
    :path="$route.params.slug ? `/blog/${$route.params.slug[0]}` : '/blog'"
  >
    <template #not-found>
      <h2>Blog slug ({{ $route.params.slug }}) not found</h2>
    </template>
  </ContentDoc>
</template>

We use the current slug in the route parameters ($route.params.slug) to determine whether we want to render the blog post list or an individual blog post.

We can now see the content of the corresponding blog post:

Conclusion

It’s effortless to create a Markdown file-based blog using Nuxt Content v2. This article demonstrates the basic steps to set up such a blog.

You can expect more Nuxt 3 posts in the following months as I plan to blog about interesting topics that I discover while rewriting my portfolio website.

If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.

If multiple team members (also tester) have to do the same steps repeatedly, this costs a lot of time and, therefore, money. In previous projects, we often developed custom tools to proceed to certain pages/steps in the application automatically.

But now, the Chrome browser provides this functionality as a preview feature.

What is Chrome Recorder?

Chrome Recorder is a preview feature in the Chrome browser designed to record, replay and measure user flows of an application.

You can start a recording, execute the steps you’d like to record in the app (such as typing or clicking), and export the recording as JSON file, Puppeteer script or @puppeteer/replay script.

It’s then possible to replay the recorded user flow and measure the performance of the run.

Open Recorder

To find the Recorder, you first open up the Chrome DevTools.

Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, ChromeOS).

You can open the Recorder from the options menu:

Open Chrome Recorder from options menu

Alternatively, you can open it from Command Menu:

Open Chrome Recorder from Command Menu

Record

I’ll be using Vue 3 Form Wizard to demonstrate the recording & replaying of a simple user flow.

The demo page provides a simple wizard with multiple steps containing common input types like text & select inputs.

Let’s start the recording:

Start Recording

The selector attribute textbox is optional. See Customize the recording’s selector.

Once you hit the record button, you can enter all data in the wizard. If you are done, hit the “End recording” button at the bottom of the recorder panel.

Recorded User Flow

The following GIF visualizes this process:

It’s also possible to manually edit the recorded steps. For example, you can manually change selectors:

Change Selector

Additionally, you can manually add or remove steps:

Add/Remove Steps

Replay

After recording a user flow, you can replay it by clicking on the “Replay” button.

When replaying a user flow recording, the Recorder waits until the element is visible or clickable in the viewport or tries to automatically scroll the element into the viewport before replaying the corresponding step.

It’s also possible to simulate a slow network connection in the “Replay” settings:

Simulate Slow Network

Measure performance

You can also measure the performance of your recording by clicking the “Measure performance” button. This way, you can regularly measure the performance of critical user flows.

Performance Panel

Conclusion

The Chrome Recorder is valuable tool that will boost my productivity during development. It’s still a preview feature, but I think it will become a must-have tool for web developers.

I recommend reading the official Chrome blog post.

If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.

Create Nuxt 3 project

To create a new Nuxt 3 project, we need to run this command in our terminal:

npx nuxi init nuxt3-app

Add Tailwind CSS 3

Next, we add the nuxt/tailwind module, which provides a prerelease version that supports Nuxt 3 and Tailwind CSS v3:

npm install --save-dev @nuxtjs/tailwindcss@5.0.0-4

Then we need to add this module to the buildModules section in nuxt.config.js:

import { defineNuxtConfig } from 'nuxt3';

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  buildModules: ['@nuxtjs/tailwindcss'],});

Now, we can create the Tailwind configuration file tailwind.config.js by running the following command:

npx tailwindcss init

Let’s add a basic CSS file at ./assets/css/tailwind.css (see official docs for further configuration options):

@tailwind base;
@tailwind components;
@tailwind utilities;

.theme-light {
  --background: #f8f8f8;
  --text: #313131;
}

.theme-dark {
  --background: #313131;
  --text: #f8f8f8;
}

We define two CSS classes for the dark and light theme. CSS variables (indicated by --) are used to change CSS values based on the selected theme dynamically.

Therefore, we need to define these colors in our tailwind.conf.js:

module.exports = {
  content: [
    `components/**/*.{vue,js,ts}`,
    `layouts/**/*.vue`,
    `pages/**/*.vue`,
    `app.vue`,
    `plugins/**/*.{js,ts}`,
    `nuxt.config.{js,ts}`,
  ],
  theme: {
    extend: {
      colors: { themeBackground: 'var(--background)', themeText: 'var(--text)', }, },
  },
  plugins: [],
};

Implement Theme Switch

Let’s start to implement a theme switch by adding this simple template to our app.vue component:

<template>
  <div
    :class="{
      'theme-light': !darkMode,
      'theme-dark': darkMode,
    }"
    class="h-screen bg-themeBackground p-5"
  >
    <h1 class="text-themeText">Nuxt 3 Tailwind Dark Mode Demo</h1>
    <Toggle v-model="darkMode" off-label="Light" on-label="Dark" />
  </div>
</template>

On the div container element, we dynamically set theme-light or theme-dark CSS class based on the reactive darkMode variable value, which we will implement later in the script part of the component.

The h1 and container div elements use our Tailwind CSS classes bg-themeBackground and text-themeText to use theme-specific colors for the background and text color.

Additionally, we use the Vue 3 Toggle library to switch between our themes.

Let’s take a look at the script part of app.vue:

<script setup lang="ts">
import Toggle from '@vueform/toggle';
import { useState } from '#app';
import { onMounted, watch } from '@vue/runtime-core';

type Theme = 'light' | 'dark';

const LOCAL_STORAGE_THEME_KEY = 'theme';

const darkMode = useState('theme', () => false);

const setTheme = (newTheme: Theme) => {
  localStorage.setItem(LOCAL_STORAGE_THEME_KEY, newTheme);
  darkMode.value = newTheme === 'dark';
};

onMounted(() => {
  const isDarkModePreferred = window.matchMedia(
    '(prefers-color-scheme: dark)'
  ).matches;

  const themeFromLocalStorage = localStorage.getItem(
    LOCAL_STORAGE_THEME_KEY
  ) as Theme;

  if (themeFromLocalStorage) {
    setTheme(themeFromLocalStorage);
  } else {
    setTheme(isDarkModePreferred ? 'dark' : 'light');
  }
});

watch(darkMode, selected => {
  setTheme(selected ? 'dark' : 'light');
});
</script>

We store the selected theme value in Local Storage and use useState to define a reactive variable called darkMode:

const darkMode = useState('theme', () => false);

If the component is mounted, we first detect if the user has requested light or dark color theme by using the CSS media feature “prefers-color-scheme”:

const isDarkModePreferred = window.matchMedia(
  '(prefers-color-scheme: dark)'
).matches;

Then we set the theme value based on the local storage value:

const setTheme = (newTheme: Theme) => {
  localStorage.setItem(LOCAL_STORAGE_THEME_KEY, newTheme);
  darkMode.value = newTheme === 'dark';
};

onMounted(() => {
  const isDarkModePreferred = window.matchMedia(
    '(prefers-color-scheme: dark)'
  ).matches;

  const themeFromLocalStorage = localStorage.getItem( LOCAL_STORAGE_THEME_KEY ) as Theme; if (themeFromLocalStorage) { setTheme(themeFromLocalStorage); } else { setTheme(isDarkModePreferred ? 'dark' : 'light'); }});

This the complete app.vue component code:

<template>
  <div
    :class="{
      'theme-light': !darkMode,
      'theme-dark': darkMode,
    }"
    class="h-screen bg-themeBackground p-5"
  >
    <h1 class="text-themeText">Nuxt 3 Tailwind Dark Mode Demo</h1>
    <Toggle v-model="darkMode" off-label="Light" on-label="Dark" />
  </div>
</template>

<script setup lang="ts">
import Toggle from '@vueform/toggle';
import { useState } from '#app';
import { onMounted, watch } from '@vue/runtime-core';

type Theme = 'light' | 'dark';

const LOCAL_STORAGE_THEME_KEY = 'theme';

const darkMode = useState('theme', () => false);

const setTheme = (newTheme: Theme) => {
  localStorage.setItem(LOCAL_STORAGE_THEME_KEY, newTheme);
  darkMode.value = newTheme === 'dark';
};

onMounted(() => {
  const isDarkModePreferred = window.matchMedia(
    '(prefers-color-scheme: dark)'
  ).matches;

  const themeFromLocalStorage = localStorage.getItem(
    LOCAL_STORAGE_THEME_KEY
  ) as Theme;

  if (themeFromLocalStorage) {
    setTheme(themeFromLocalStorage);
  } else {
    setTheme(isDarkModePreferred ? 'dark' : 'light');
  }
});

watch(darkMode, selected => {
  setTheme(selected ? 'dark' : 'light');
});
</script>

<style src="@vueform/toggle/themes/default.css"></style>

Now we can use run the following command to start our Nuxt app in development mode:

npm run dev

Finally, we can test our dark mode theme switch at http://localhost:3000:

StackBlitz Demo

My simple demo is available as interactive StackBlitz demo:

Alternatively, you could also use the color-mode module that supports Nuxt Bridge and Nuxt 3.

Conclusion

This article showed you how to create a simple dark mode switch in Nuxt 3 with Tailwind CSS v3. You can expect more Nuxt 3 posts in the following months as I plan to blog about interesting topics that I discover while I rewrite my portfolio website.

If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.

Alternatively (or additionally), you can also subscribe to my weekly Vue.js newsletter.

Why? Because I love Vue and want to have a public showcase that I can reference to potential customers.

Why Quasar?

Quasar is an MIT licensed open-source Vue.js based framework that targets SPA, SSR, PWA, mobile app, desktop app, and browser extension all using one codebase. It handles the build setup and provides a complete collection of Material Design compliant UI components.

Quasar’s motto is:

Write code once and simultaneously deploy it as a website, a Mobile App and/or an Electron App.

Using Quasar drastically saves development time due to these reasons:

• It’s based on Vue.js.
• It provides many UI components that follow Material Design guidelines.
• It has a regular release cycle inclusive of new features.
• It provides support for each build mode (SPA, SSR, PWA, Mobile app, Desktop app & Browser Extension).
• It has its own CLI that provides a pleasant developer experience. For example, we can build our application as SPA, mobile, or desktop app within the same project folder.

Read more about why Quasar might be a good choice for your next project.

Install Quasar CLI

The source code for the following demo is available at GitHub

# Node.js >=12.22.1 is required.

$ yarn global add @quasar/cli
# or
$ npm install -g @quasar/cli

Let’s start by creating a new project using the Quasar CLI:

▶ quasar create vue3-electron-demo

  ___
 / _ \ _ _ ______  ___ ___
| | | | | | |/ _` / __|/ _` | '__ |
| |_| | |_| | (_| \__ \ (_| | |
 \ __\_\\__ ,_|\ __,_|___ /\__,_|_|

? Project name (internal usage for dev) vue3-electron-demo
? Project product name (must start with letter if building mobile apps) Quasar App
? Project description A Quasar Framework app
? Author Michael Hoffmann <michael.hoffmann@mokkapps.de>
? Pick your CSS preprocessor: SCSS
? Check the features needed for your project: ESLint (recommended), TypeScript
? Pick a component style: Composition
? Pick an ESLint preset: Prettier
? Continue to install project dependencies after the project has been created? (recommended) NPM

We chose SCSS as our CSS preprocessor, ESLint & Typescript as additional features, Vue 3’s Composition API and Prettier for code formatting.

Do not choose Vuex as we will add another state library in the next chapter. If you accidentally added Vuex, remove it manually from your package.json.

Read the official docs for additional information about the Quasar CLI.

Add Pinia as Vue store library

We’ll use Pinia as Vue store library, which is now the recommended state library for Vue.

First, we need to install Pinia:

yarn add pinia
# or with npm
npm install pinia

To be able to register Pinia at our Vue application instance we need to create a Quasar Boot File:

A common use case for Quasar applications is to run code before the root Vue app instance is instantiated, like injecting and initializing your own dependencies (examples: Vue components, libraries…) or simply configuring some startup code of your app.

Our boot file is called pinia.ts and is located at src/boot:

import { boot } from 'quasar/wrappers';
import { createPinia } from 'pinia';

export default boot(({ app }) => {
  app.use(createPinia());
});

We also need to add this new file to quasar.conf.js:

module.exports = configure(function (ctx) {
  return {
    ...
    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    // https://quasar.dev/quasar-cli/boot-files
    boot: ['pinia'], ...
  }
}

Now, we can create a new folder called pinia in src.

We cannot name this folder store as this name is reserved for the official Vuex integration.

A basic store could look like this:

import { defineStore } from 'pinia';

// useStore could be anything like useUser, useCart
// the first argument is a unique id of the store across your application
const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0,
      lastName: 'Michael',
      firstName: 'Michael',
    };
  },
  getters: {
    fullName: state => `${state.firstName} ${state.lastName}`,
  },
  actions: {
    increment() {
      this.counter++;
    },
  },
});

export default useStore;

We can use this store in any Vue component:

<template>Counter: {{ store.counter }}</template>

<script setup lang="ts">
import { useStore } from '@/stores/counter';

const store = useStore();
</script>

Now we can run the Vue application using the Quasar CLI:

quasar dev

The Vue application is served at http://localhost:8080:

Quasar Dev Mode

Setup Electron

Read this introduction if you are new to Electron.

To develop/build a Quasar Electron app, we need to add the Electron mode to our Quasar project:

$ quasar mode add electron

Every Electron app has two threads: the main thread (deals with the window and initialization code – from the newly created folder /src-electron) and the renderer thread (which deals with the actual content of your app from /src).

The new folder has the following structure:

.
└── src-electron/
├── icons/ # Icons of your app for all platforms
| ├── icon.icns # Icon file for Darwin (MacOS) platform
| ├── icon.ico # Icon file for win32 (Windows) platform
| └── icon.png # Tray icon file for all platforms
├── electron-preload.js # (or .ts) Electron preload script (injects Node.js stuff into renderer thread)
└── electron-main.js # (or .ts) Main thread code

Now we are ready to start our Electron application:

$ quasar dev -m electron

This command will open up an Electron window which will render your app along with Developer Tools opened side by side:

Quasar Electron Dev

Read the official docs for additional and detailed information about developing Electron apps with Quasar.

Control Electron from Vue code

If we want to use Electron features like opening a file dialog, we need to write some code to be able to access Electron’s API.

For example, if we want to show a dialog to open files, Electron provides the dialog API to display native system dialogs for opening and saving files, alerting, etc.

First, we need to install @electron/remote:

npm install -D @electron/remote

Then we need to modify src-electron/electron-main.js and initialize @electron/remote:

import { app, BrowserWindow, nativeTheme } from 'electron'
import { initialize, enable } from '@electron/remote/main'import path from 'path'
import os from 'os'

initialize();
let mainWindow;

function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    icon: path.resolve(__dirname, 'icons/icon.png'), // tray icon
    width: 1000,
    height: 600,
    useContentSize: true,
    webPreferences: {
      contextIsolation: true,
      // More info: /quasar-cli/developing-electron-apps/electron-preload-script
      preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD)
    }
  })

  // ....

  enable(mainWindow.webContents);}

If we want to use Electron API from our Vue code we need to add some code to src-electron/electron-preload.js:

import { contextBridge } from 'electron';
import { dialog } from '@electron/remote';
// 'electronApi' will be available on the global window context
contextBridge.exposeInMainWorld('electronApi', {
  openFileDialog: async (title, folder, filters) => {
    // calling showOpenDialog from Electron API: https://www.electronjs.org/docs/latest/api/dialog/
    const response = await dialog.showOpenDialog({ title, filters, properties: ['openFile', 'multiSelections'], }); return response.filePaths;
  }
});

Next we create src/api/electron-api.ts to access this code from within our Vue application:

export interface ElectronFileFilter {
  name: string;
  extensions: string[];
}

export interface ElectronApi {
  openFileDialog: (
    title: string,
    folder: string,
    filters: ElectronFileFilter
  ) => Promise<string[]>;
}

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
export const electronApi: ElectronApi = (window as { electronApi: ElectronApi })
  .electronApi;

Now we can use this API anywhere in our Vue component:

<template>
  <q-btn @click="openElectronFileDialog">Open Electron File Dialog</q-btn>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { electronApi } from 'src/api/electron-api';

export default defineComponent({
  name: 'PageIndex',
  components: { },
  setup() {
    const openElectronFileDialog = async () => {
      return electronApi.openFileDialog('Test', 'folder', { name: 'images', extensions: ['jpg'] });
    };

    return { openElectronFileDialog };
  },
});
</script>

Clicking on the button should now open the native OS file dialog:

Electron File Dialog

Conclusion

Quasar allows us to quickly develop Electron desktop applications in Vue with high-quality UI components that follow Material Design guidelines.

The most significant advantage against a custom Electron + Vue boilerplate project from GitHub is that Quasar has a regular release cycle and provides upgrade guides for older versions.

Take a look at my “Scrum Daily Standup Picker” GitHub repository to see a more complex “Quasar-Electron-Vue3-Typescript-Pinia” project. The demo source code for the following demo is available at GitHub.

If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.

In this article, I want to demonstrate the ten favorite features of my blogfolio.

Table of Contents

• 1. Stats page
• 2. Article Reactions
• 3. Automated Open Graph Images
• 4. Mark Article as Read
• 5. Intelligent Article Suggestions
• 6. Article Search Options
• 7. Prism Code Highlighting
• 8. MDX
• 9. Generate Scripts
• 10. Open Source Analytics
• Conclusion

1. Stats page

Inspired by SLD and Braydon Coyer, I’ve added a Stats page on my site.

It shows statistics about the site itself, for example, how many active visitors are currently on the site and how many have visited it in total.

Additionally, it shows some information about my social media channels like the follower count of GitHub, Twitter, Dev.to, and more.

I use AWS Amplify Serverless Functions to access a variety of APIs to provide the necessary data for this site.

2. Article Reactions

Built with Supabase and AWS Amplify Serverless Functions, readers of my articles can now react to the article with the clap emoji.

Additionally, I use the same database table to store the number of page views.

3. Automated Open Graph Images

I use Braydon’s approach to automatically generate Open Graph images for certain pages using the Cloudinary API.

The code grabs the site’s title and generates an Open Graph image using Cloudinary API.

The following image shows such an automatically generated image that I use on my website:

4. Mark Article as Read

Visitors of my website can see at a glimpse which articles they’ve already read. It’s a nice little feature for recurring readers of my blog.

5. Intelligent Article Suggestions

If a reader of a blog article reaches the end of the article, he will see four similar articles. They are selected by checking how many categories match between the articles.

6. Article Search Options

I provide multiple ways to search for blog articles:

1. All articles are available on the blog page, and you can scroll or use the browser search to find an article.
2. Use the minimal list, which shows all blog posts grouped in years by title.
3. Use Google.

7. Prism Code Highlighting

I invested some time to create beautiful code snippets on my blog posts, as they are an essential part of my articles.

I use Prism with the Gatsby Prism Remark plugin to show code blocks in my markdown files:

export const getCategoryDisplayText = category => {
  if (category === 'aws') { return category.toUpperCase(); }
  if (category.includes('-js')) {
    const name = category.split('-')[0];
    return `${capitalize(name)}.js`;
  }

  return capitalize(category);
};

I can highlight certain lines of code, and I show the programming language as a nice badge on the top right.

8. MDX

MDX is very powerful, and I use it for my tips page, where I inject the following React component into my Markdown files to create a beautiful comparison of two code blocks:

9. Generate Scripts

Inspired by Kent C. Dodds, I use multiple JS scripts to generate boilerplate files for new blog posts and tips.

For example, the blogpost.js script will generate a similar output in the console:

? Title this is a test to see if my script is awesome
? Categories development, career, tools
? Release Date (format: yyyy-mm-dd) 2022-01-08
? Dry run without creating files? (default: false) Yes

Date:
2022-01-08

Slug:
this-is-a-test-to-see-if-my-script-is-awesome

Markdown data:
---
title: "This Is a Test to See if My Script Is Awesome"
categories:
  - "development"
  - "career"
  - "tools"
cover: "images/cover.jpg"
---

## Conclusion

If you liked this article, follow me on [Twitter](https://twitter.com/mokkapps) to get notified about new blog posts and more content from me.

Alternatively (or additionally), you can also [subscribe to my newsletter](https://mokkapps.de/newsletter).

The script asks for some mandatory information, converts the entered title to title caps, and finally generates the markdown file with the slug name at the correct directory.

Additionally, I have a script to generate a Table of Content (ToC) for a finished article and an image optimization script.

10. Open Source Analytics

I use Umami with a database hosted on Digital Ocean. I send custom events if a visitor, for example, clicks a social link, subscribes to the newsletter or, edits an article on GitHub. These events provide some valuable insights into how many visitors are using the features on my portfolio website.

Conclusion

My portfolio website is my favorite digital playground. I love to experiment with different new features and try to provide the best possible experience for visitors.

The source code of my website is available on GitHub, so feel free to take a closer look if you are interested in implementation details. Leave a comment if you want more information about a specific topic.

If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.

Recently, I used Twilert and Birdspotter for that purpose, which are specialized tools for Twitter keyword monitoring. But their free plans/trials don’t fulfill my simple requirements, so I decided to implement them independently.

Prerequisites

I chose again AWS Amplify to deploy the serverless function to AWS.

If you don’t already have an AWS account, you’ll need to create one to follow the steps outlined in this article. Please follow this tutorial to create an account.

Next, you need to install and configure the Amplify Command Line Interface (CLI).

The serverless function will need access to secrets stored in the AWS Secret Manager. My article “How to Use Environment Variables to Store Secrets in AWS Amplify Backend” will guide you through this process.

Add Serverless Function to AWS

The first step is to add a new Lambda (serverless) function with the Node.js runtime to the Amplify application.

The function gets invoked on a recurring schedule. In my case, it will be invoked every day at 08:00 PM.

Let’s add the serverless function using the Amplify CLI:

▶ amplify add function
? Select which capability you want to add: Lambda function (serverless function)
? Provide an AWS Lambda function name: twittersearchfunction
? Choose the runtime that you want to use: NodeJS
? Choose the function template that you want to use: Hello World
? Do you want to configure advanced settings? Yes
? Do you want to access other resources in this project from your Lambda function? No
? Do you want to invoke this function on a recurring schedule? Yes
? At which interval should the function be invoked: Daily
? Select the start time (use arrow keys): 08:00 PM
? Do you want to enable Lambda layers for this function? No
? Do you want to configure environment variables for this function? No
? Do you want to configure secret values this function can access? No
? Do you want to edit the local lambda function now? No

Get a list of tweets for a specific Twitter keyword

Now it’s time to write the JavaScript code that returns a list of tweets for a given keyword.

Let’s start by writing the twitter-client.js module. This module uses FeedHive’s Twitter Client to access the Twitter API. The first step is to initialize the Twitter API client and trigger the request:

const mokkappsTwitterId = 481186762;
const searchQuery = 'mokkapps';
const searchResultCount = 100;

const fetchRecentTweets = async secretValues => {
  // Configure Twitter API Client
  const twitterClient = new twitterApiClient.TwitterClient({
    apiKey: secretValues.TWITTER_API_KEY,
    apiSecret: secretValues.TWITTER_API_KEY_SECRET,
    accessToken: secretValues.TWITTER_ACCESS_TOKEN,
    accessTokenSecret: secretValues.TWITTER_ACCESS_TOKEN_SECRET,
  });

  // Trigger search endpoint: https://github.com/FeedHive/twitter-api-client/blob/main/REFERENCES.md#twitterclienttweetssearchparameters
  const searchResponse = await twitterClient.tweets.search({
    q: searchQuery,
    count: searchResultCount,
    result_type: 'recent',
  });

  // Access statuses from response
  const statuses = searchResponse.statuses;
};

Next, we want to filter the response into three groups:

• Tweets: Tweets from the last 24 hours that were not published by my Twitter account and are no replies or retweets
• Replies: Tweets from the last 24 hours that were not published by my Twitter account and are replies
• Retweets: Tweets from the last 24 hours that were not published by my Twitter account and are retweets

Let’s start by the filtering the statuses response for “normal” tweets that are no replies or retweets:

const isTweetedInLast24Hours = status => {
  const tweetDate = new Date(status.created_at);
  const now = new Date();
  const timeDifference = now.getTime() - tweetDate.getTime();
  const daysDifference = timeDifference / (1000 * 60 * 60 * 24);
  return daysDifference <= 1;
};

const fetchRecentTweets = async secretValues => {
  // ...
  const statuses = searchResponse.statuses;

  const tweets = statuses.filter(status => { const isNotOwnAccount = status.user.id !== mokkappsTwitterId; const isNoReply = status.in_reply_to_status_id === null; const isNoRetweet = status.retweeted_status === null; return ( isNotOwnAccount && isNoReply && isNoRetweet && isTweetedInLast24Hours(status) ); });};

Now we can filter for retweets and replies in a similar way:

const retweets = statuses.filter(status => {
  const isNotOwnAccount = status.user.id !== mokkappsTwitterId;
  const isRetweet = status.retweeted_status;
  return isNotOwnAccount && isRetweet && isTweetedInLast24Hours(status);
});

const replies = statuses.filter(status => {
  const isNotOwnAccount = status.user.id !== mokkappsTwitterId;
  const isReply = status.in_reply_to_status_id !== null;
  return isNotOwnAccount && isReply && isTweetedInLast24Hours(status);
});

The last step is to map the results to a very simple HTML structure that will be rendered inside the email body:

const { formatDistance } = require('date-fns');

const mapStatus = status => {
  const {
    id_str: id,
    created_at,
    in_reply_to_screen_name,
    in_reply_to_status_id_str,
    text,
    retweet_count,
    favorite_count,
    user: {
      screen_name: user_screen_name,
      followers_count,
      created_at: userCreatedAt,
      friends_count,
    },
  } = status;
  const createdAtLocaleString = new Date(created_at).toLocaleString();
  const url = `https://twitter.com/${user_screen_name}/status/${id}`;
  const userUrl = `https://twitter.com/${user_screen_name}`;
  const originalUrl = in_reply_to_screen_name
    ? `https://twitter.com/${in_reply_to_screen_name}/status/${in_reply_to_status_id_str}`
    : null;
  const userCreatedDateDistance = formatDistance(
    new Date(),
    new Date(userCreatedAt)
  );

  return `
    <div style="margin-bottom: 20px; padding: 10px; border: 1px solid gray; border-radius: 5px;">
      <h2>From <a href=${userUrl}>${user_screen_name}</a> at ${createdAtLocaleString}</h2>
      <small><strong>Followers:</strong> ${followers_count}, <strong>Following:</strong> ${friends_count}, <strong>Account Created:</strong> ${userCreatedDateDistance} ago</small>
      <h3>${text}</h3>
      <a href=${url} style="margin-top: 10px">Tweet</a>
      <small style="margin-top: 5px">(<strong>Likes:</strong> ${favorite_count}, <strong>Retweets: ${retweet_count})</strong></small>
      ${
        originalUrl
          ? `<div style="margin-top: 10px"></br><a href=${originalUrl}>Original Tweet</a></div>`
          : ''
      }
    </div>
    `;
};

const fetchRecentTweets = async secretValues => {
  // ...
  const retweets = statuses
    .filter(status => {
      const isNotOwnAccount = status.user.id !== mokkappsTwitterId;
      const isRetweet = status.retweeted_status;
      return isNotOwnAccount && isRetweet && isTweetedInLast24Hours(status);
    })
    .map(status => mapStatus(status));};

This is the code for the whole twitter-client.js module:

const twitterApiClient = require('twitter-api-client');
const { formatDistance } = require('date-fns');

const mokkappsTwitterId = 481186762;
const searchQuery = 'mokkapps';
const searchResultCount = 100;

const mapStatus = status => {
  const {
    id_str: id,
    created_at,
    in_reply_to_screen_name,
    in_reply_to_status_id_str,
    text,
    retweet_count,
    favorite_count,
    user: {
      screen_name: user_screen_name,
      followers_count,
      created_at: userCreatedAt,
      friends_count,
    },
  } = status;
  const createdAtLocaleString = new Date(created_at).toLocaleString();
  const url = `https://twitter.com/${user_screen_name}/status/${id}`;
  const userUrl = `https://twitter.com/${user_screen_name}`;
  const originalUrl = in_reply_to_screen_name
    ? `https://twitter.com/${in_reply_to_screen_name}/status/${in_reply_to_status_id_str}`
    : null;
  const userCreatedDateDistance = formatDistance(
    new Date(),
    new Date(userCreatedAt)
  );

  return `
    <div style="margin-bottom: 20px; padding: 10px; border: 1px solid gray; border-radius: 5px;">
      <h2>From <a href=${userUrl}>${user_screen_name}</a> at ${createdAtLocaleString}</h2>
      <small><strong>Followers:</strong> ${followers_count}, <strong>Following:</strong> ${friends_count}, <strong>Account Created:</strong> ${userCreatedDateDistance} ago</small>
      <h3>${text}</h3>
      <a href=${url} style="margin-top: 10px">Tweet</a>
      <small style="margin-top: 5px">(<strong>Likes:</strong> ${favorite_count}, <strong>Retweets: ${retweet_count})</strong></small>
      ${
        originalUrl
          ? `<div style="margin-top: 10px"></br><a href=${originalUrl}>Original Tweet</a></div>`
          : ''
      }
    </div>
    `;
};

const isTweetedInLast24Hours = status => {
  const tweetDate = new Date(status.created_at);
  const now = new Date();
  const timeDifference = now.getTime() - tweetDate.getTime();
  const daysDifference = timeDifference / (1000 * 60 * 60 * 24);
  return daysDifference <= 1;
};

const fetchRecentTweets = async secretValues => {
  const twitterClient = new twitterApiClient.TwitterClient({
    apiKey: secretValues.TWITTER_API_KEY,
    apiSecret: secretValues.TWITTER_API_KEY_SECRET,
    accessToken: secretValues.TWITTER_ACCESS_TOKEN,
    accessTokenSecret: secretValues.TWITTER_ACCESS_TOKEN_SECRET,
  });

  const searchResponse = await twitterClient.tweets.search({
    q: searchQuery,
    count: searchResultCount,
    result_type: 'recent',
  });

  const statuses = searchResponse.statuses;

  const tweets = statuses
    .filter(status => {
      const isNotOwnAccount = status.user.id !== mokkappsTwitterId;
      const isNoReply = status.in_reply_to_status_id === null;
      const isNoRetweet = status.retweeted_status === null;
      return (
        isNotOwnAccount &&
        isNoReply &&
        isNoRetweet &&
        isTweetedInLast24Hours(status)
      );
    })
    .map(status => mapStatus(status));

  const retweets = statuses
    .filter(status => {
      const isNotOwnAccount = status.user.id !== mokkappsTwitterId;
      const isRetweet = status.retweeted_status;
      return isNotOwnAccount && isRetweet && isTweetedInLast24Hours(status);
    })
    .map(status => mapStatus(status));

  const replies = statuses
    .filter(status => {
      const isNotOwnAccount = status.user.id !== mokkappsTwitterId;
      const isReply = status.in_reply_to_status_id !== null;
      return isNotOwnAccount && isReply && isTweetedInLast24Hours(status);
    })
    .map(status => mapStatus(status));

  return {
    tweets,
    retweets,
    replies,
  };
};

module.exports = fetchRecentTweets;

Serverless function code

We can now use the twitter-client.js in our serverless function:

const AWS = require('aws-sdk');
const nodemailer = require('nodemailer');
const fetchRecentTweets = require('./twitter-client');

const secretsManager = new AWS.SecretsManager();
const responseHeaders = {
  'Content-Type': 'application/json'
};

exports.handler = async event => {
  console.log(`👷 Function is ready to search for tweets`);

  const secretData = await secretsManager
    .getSecretValue({ SecretId: 'YOUR_SECRET_ID' })
    .promise();
  const secretValues = JSON.parse(secretData.SecretString);

  const transporter = nodemailer.createTransport({
    service: secretValues.MAIL_HOST,
    auth: {
      user: secretValues.MAIL_USER,
      pass: secretValues.MAIL_PW,
    },
  });

  const defaultMailOptions = {
    from: secretValues.MAIL_USER,
    to: secretValues.MAIL_SUCCESS,
    subject: `[Mokkapps API] Twitter Search Results`,
  };

  try {
    // Fetch recent tweets
    const { tweets, replies, retweets } = await fetchRecentTweets(secretValues);

    // Skip sending email if we have no results
    if (tweets.length === 0 && replies.length === 0 && retweets.length === 0) {
      return {
        statusCode: 200,
        headers: responseHeaders,
        body: [],
      };
    }

    // Send email
    await transporter.sendMail({
      ...defaultMailOptions,
      html: `
        <h1>Tweets that mentioned "mokkapps" in the last 24 hours</h1>
        ${tweets.length === 0 ? '<p>No results</p>' : tweets.join('')}
        <h1>Replies that mentioned "mokkapps" in the last 24 hours</h1>
        ${replies.length === 0 ? '<p>No results</p>' : replies.join('')}
        <h1>Retweets that mentioned "mokkapps" in the last 24 hours</h1>
        ${retweets.length === 0 ? '<p>No results</p>' : retweets.join('')}
      `,
    });

    return {
      statusCode: 200,
      headers: responseHeaders,
      body: JSON.stringify({ tweets, replies, retweets }),
    };
  } catch (e) {
    console.error('☠ Twitter Search Function Error:', e);
    return {
      statusCode: 500,
      headers: responseHeaders,
      body: e.message ? e.message : JSON.stringify(e),
    };
  }
};

At this point, we can publish our function by running:

amplify push

If we successfully pushed the function to AWS, we can manually invoke the function in AWS Lamba by clicking the “Test” button:

AWS Lambda Function Test

The serverless function should then send an email with a list of tweets if someone mentioned the monitored keyword in the last 24 hours:

Email sent from serverless Node.js function

Conclusion

I had a lot of fun building this simple serverless function to monitor keywords on Twitter.

Serverless functions are a perfect choice for such a monitoring tool, as we only have to pay for the execution time of the serverless function.

What do you think about my solution? Leave a comment and tell me how you monitor your Twitter keywords.

If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.

This article will demonstrate how you can set up Storybook with zero-config and built-in TypeScript support, auto-generate controls & documentation, and perform automated snapshot tests for your Vue components.

Why Storybook?

We have components that can have many props, states, slots, etc., which influences its visual representation and more.

This circumstance causes some typical problems for any front-end developer:

• How can I create documentation for my component that doesn’t get outdated?
• How can I get an overview of all different states and kinds of my component?
• How can I guarantee that my changes don’t influence other states and kinds?
• How can I show the current implementation to non-developer team members?

Storybook will help us here.

Storybook Setup

First, we need to create a Vue 3 application. We’ll use Vite, a new build tool from Evan You, the creator of Vue.js:

npm init vite@latest

Setting up Storybook in an existing Vue 3 project can be done with zero configuration:

npx sb init

This command installs Storybook with its dependencies, configures the Storybook instance, and generates some demo components and stories which are located at src/stories:

Storybook Vue 3 Generated Files

We can now run the following command, which starts a local development server for Storybook and automatically opens it in a new browser tab:

npm run storybook

Storybook Vue 3 Demo

These generated Vue components and stories are good examples of how to write Vue 3 stories. I want to show you some advanced documentation examples using a custom component.

Custom Component Demo

I created a Counter.vue demo component to demonstrate the Storybook integration for this article. The source code is available at GitHub.

The component provides basic counter functionality, has two different visual variants and two slots for custom content.

Let’s take a look at the component’s code:

<template>
  <p>{{ label }}</p>
  <!-- @slot Slot to show content below label --> <slot name="sub-label" />
  <div class="container" :class="variant">
    <button @click="increment()">+</button>
    <p class="value">{{ count }}</p>
    <button @click="decrement()">-</button>
  </div>
  <!-- @slot Default slot to show any content below the counter --> <slot />
</template>

<script lang="ts">
import { ref, watch, PropType } from 'vue';
import { Variant } from './types';

/** * This is my amazing counter component * * It can increment and decrement! */export default {
  props: {
    /** * The initial value for the counter */ initialValue: {
      type: Number,
      default: 0,
    },
    /** * Text shown above the counter */ label: {
      type: String,
      default: 'Counter',
    },
    /** * If true, the counter can show negative numbers */ allowNegativeValues: {
      type: Boolean,
      default: false,
    },
    /** * Defines the visual appearance of the counter */ variant: {
      type: String as PropType<Variant>,
      default: Variant.Default,
    },
  },
  emits: ['counter-update'],
  setup(props, context) {
    const count = ref(props.initialValue);

    const increment = () => {
      count.value += 1;
    };

    const decrement = () => {
      const newValue = count.value - 1;
      if (newValue < 0 && !props.allowNegativeValues) {
        count.value = 0;
      } else {
        count.value -= 1;
      }
    };

    watch(count, value => {
      context.emit('counter-update', value);
    });

    return {
      count,
      increment,
      decrement,
    };
  },
};
</script>
<style scoped></style>

In the above code, you can see that I’ve annotated the Vue component with JSDoc comments. Storybook converts them into living documentation alongside our stories.

Unfortunately, I found no way to add JSDoc comments to the counter-update event. I think it is currently not supported in vue-docgen-api, which Storybook uses under the hood to extract code comments into descriptions. Leave a comment if you know a way how to document events in Vue 3.

Storybook uses so-called stories:

A story captures the rendered state of a UI component. Developers write multiple stories per component that describe all the “interesting” states a component can support.

A component’s stories are defined in a story file that lives alongside the component file. The story file is for development-only, it won’t be included in your production bundle.

Now, let’s take a look at the code of our Counter.stories.ts:

import Counter from './Counter.vue';
import { Variant } from './types';

//👇 This default export determines where your story goes in the story list
export default {
  title: 'Counter',
  component: Counter,
  //👇 Creates specific argTypes with options
  argTypes: {
    variant: {
      options: Variant,
    },
  },
};

//👇 We create a “template” of how args map to rendering
const Template = args => ({
  components: { Counter },
  setup() {
    //👇 The args will now be passed down to the template
    return { args };
  },
  template: '<Counter v-bind="args">{{ args.slotContent }}</Counter>',
});

//👇 Each story then reuses that template
export const Default = Template.bind({});
Default.args = {
  label: 'Default',
};

export const Colored = Template.bind({});
Colored.args = {
  label: 'Colored',
  variant: Variant.Colored,
};

export const NegativeValues = Template.bind({});
NegativeValues.args = {
  allowNegativeValues: true,
  initialValue: -1,
};

export const Slot = Template.bind({});
Slot.args = {
  slotContent: 'SLOT CONTENT',
};

This code is written in Component Story Format and generates four stories:

• Default: The counter component in its default state
• Colored: The counter component in the colored variation
• NegativeValue: The counter component that allows negative values
• Slot: The counter component with a slot content

Let’s take a look at our living documentation in Storybook:

As already mentioned, Storybook converts the JSDoc comments from our code snippet above into documentation, shown in the following picture:

Storybook Generated Docs

Testing

Now that we have our living documentation in Storybook run tests against them.

Jest Setup

I chose Jest as the test runner. It has a fast & straightforward setup process and includes a test runner, an assertion library, and a DOM implementation to mount our Vue components.

To install Jest in our existing Vue 3 + Vite project, we need to run the following command:

npm install jest @types/jest ts-jest vue-jest@next @vue/test-utils@next --save-dev

Then we need to create a jest.config.js config file in the root directory:

module.exports = {
  moduleFileExtensions: ['js', 'ts', 'json', 'vue'],
  transform: {
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.vue$': 'vue-jest',
  },
  collectCoverage: true,
  collectCoverageFrom: ['/src/**/*.vue'],
};

The next step is to add a script that executes the tests in our package.json:

"scripts": {
  "test": "jest src"
}

Unit testing with Storybook

Unit tests help verify functional aspects of components. They prove that the output of a component remains the same given a fixed input.

Let’s take a look at a simple unit test for our Storybook story:

import { mount } from '@vue/test-utils';

import Counter from './Counter.vue';

//👇 Imports a specific story for the test
import { Colored, Default } from './Counter.stories';

it('renders default button', () => {
  const wrapper = mount(Counter, {
    propsData: Default.args,
  });
  expect(wrapper.find('.container').classes()).toContain('default');
});

it('renders colored button', () => {
  const wrapper = mount(Counter, {
    propsData: Colored.args,
  });
  expect(wrapper.find('.container').classes()).toContain('colored');
});

We wrote two exemplary unit tests Jest executes against our Storybook story Counter.stories.ts:

• renders default button: asserts that the component container contains the CSS class default
• renders colored button: asserts that the component container contains the CSS class colored

The test result looks like this:

 PASS src/components/Counter.test.ts
  ✓ renders default button (25 ms)
  ✓ renders colored button (4 ms)

----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files | 0 | 0 | 0 | 0 |
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 3.674 s, estimated 4 s

Snapshot Testing

Snapshot tests compare the rendered markup of every story against known baselines. It’s an easy way to identify markup changes that trigger rendering errors and warnings.

A snapshot test renders the markup of our story, takes a snapshot, and compares it to a reference snapshot file stored alongside the test.

The test case will fail if the two snapshots do not match. There are two typical causes why a snapshot test fails:

• The change is expected
• The reference snapshot needs to be updated

We can use Jest Snapshot Testing as Jest library for snapshot tests.

Let’s install it by running the following command:

npm install --save-dev jest-serializer-vue

Next, we need to add it as snapshotSerializers to our jest.config.js config file:

module.exports = {
  moduleFileExtensions: ['js', 'ts', 'json', 'vue'],
  transform: {
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.vue$': 'vue-jest',
  },
  collectCoverage: true,
  collectCoverageFrom: ['/src/**/*.vue'],
  snapshotSerializers: ['jest-serializer-vue'],};

Finally, we can write a snapshot test for Storybook story:

it('renders snapshot', () => {
  const wrapper = mount(Counter, {
    propsData: Colored.args,
  });
  expect(wrapper.element).toMatchSnapshot();
});

If we now run our tests, we get the following result:

> vite-vue-typescript-starter@0.0.0 test
> jest src

 PASS src/components/Counter.test.ts
  ✓ renders default button (27 ms)
  ✓ renders colored button (4 ms)
  ✓ renders snapshot (6 ms)

----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files | 0 | 0 | 0 | 0 |
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 total
Snapshots: 1 passed, 1 total
Time: 1.399 s, estimated 2 s

The test run generates snapshot reference files that are located at src/components/ __snapshots__.

Conclusion

Storybook is a fantastic tool to create living documentation for components. If you keep the story files next to your component’s source code, the chances are high that the story gets updated if you modify the component.

Storybook has first-class support for Vue 3, and it works very well. If you want more information about Vue and Storybook, you should look at the official Storybook documentation.

If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.

First, I will show you how you can build components using Vue 2, and then I will show you the same component implemented using Composition API. I’ll explain some of the Composition API basics and why I prefer Composition API for building components.

For this article, I created a Stackblitz Vue 3 demo application which includes all the components that I’ll showcase in this article:

The source code is also available on GitHub.

Options API

First, let’s look at how we build components in Vue 2 without the Composition API.

In Vue 2 we build components using the Options API by filling (option) properties like methods, data, computed, etc. An example component could look like this:

<template>
  <div>...</div>
</template>

<script>
  data () {
    return {
      // Properties for data, filtering, sorting and paging
    }
  },
  methods: {
    // Methods for data, filtering, sorting and paging
  },
  computed: {
    // Values for data, filtering, sorting and paging
  }
</script>

As you can see, Options API has a significant drawback: The logical concerns (filtering, sorting, etc.) are not grouped but split between the different options of the Options API. Such fragmentation is what makes it challenging to understand and maintain complex Vue components.

Let’s start by looking at CounterOptionsApi.vue, the Options API counter component:

<template>
  <div>
    <h2>Counter Options API</h2>
    <p>Count: {{ count }}</p>
    <p>2^Count: {{ countPow }}</p>
    <button @click="increment()">Increase Count</button>
    <button @click="incrementBy(5)">Increase Count by 5</button>
    <button @click="decrement()">Decrease Count</button>
  </div>
</template>

<script>
export default {
  props: {
    initialValue: {
      type: Number,
      default: 0,
    },
  },
  emits: ['counter-update'],
  data: function () {
    return {
      count: this.initialValue,
    };
  },
  watch: {
    count: function (newCount) {
      this.$emit('counter-update', newCount);
    },
  },
  computed: {
    countPow: function () {
      return this.count * this.count;
    },
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
    incrementBy(count) {
      this.count += count;
    },
  },
  mounted: function () {
    console.log('Options API counter mounted');
  },
};
</script>

This simple counter component includes multiple essential Vue functionalities:

• We use a count data property that uses the initialValue property as its initial value.
• countPow as computed property which calculates the power of the count value.
• A watcher that emits the counter-update event if the count value has changed.
• Multiple methods to modify the count value.
• A console.log message that is written if the mounted lifecycle hook was triggered.

If you are not familiar with the Vue 2 features mentioned above, you should first read the official Vue 2 documentation before you continue reading this article.

Composition API

Since Vue 3 we can additionally use Composition API to build Vue components.

ℹ️ Composition API is fully optional, and we can still use Options API in Vue 3.

In my demo application I use the same template for all Vue components, so let’s focus on the <script> part of the CounterCompositionApi.vue component:

<script lang="ts">
import { ref, onMounted, computed, watch } from 'vue';

export default {
  props: {
    initialValue: {
      type: Number,
      default: 0,
    },
  },
  emits: ['counter-update'],
  setup(props, context) {
    const count = ref(props.initialValue);

    const increment = () => {
      count.value += 1;
    };
    const decrement = () => {
      count.value -= 1;
    };
    const incrementBy = (value: number) => {
      count.value += value;
    };

    const countPow = computed(() => count.value * count.value);

    watch(count, (value) => {
      context.emit('counter-update', value);
    });

    onMounted(() => console.log('Composition API counter mounted'));

    return {
      count,
      increment,
      decrement,
      incrementBy,
      countPow,
    };
  },
};
</script>

Let’s analyze this code:

The entry point for all Composition API components is the new setup method. It is executed before the component is created and once the props are resolved. The function returns an object, and all of its properties are exposed to the rest of the component.

⚠️ We should avoid using this inside setup as it won’t refer to the component instance. setup is called before data properties, computed properties, or methods are resolved, so that they won’t be available within setup.

But we need to be careful: The variables we return from the setup method are, by default, not reactive.

We can use the reactive method to create a reactive state from a JavaScript object. Alternatively, we can use ref to make a standalone primitive value (for example, a string, number, or boolean) reactive:

import { reactive, ref } from 'vue';

const state = reactive({
  count: 0
})
console.log(state.count); // 0

const count = ref(0);
console.log(count.value); // 0

The ref object contains only one property named value, which can access the property value.

Vue 3 also provides different new methods like computed, watch, or onMounted that we can use in our setup method to implement the same logic we used in the Options API component.

Extract Composition Function

But we can further improve our Vue component code by extracting the counter logic to a standalone composition function (useCounter):

import { ref, computed, onMounted } from 'vue';

export default function useCounter(initialValue: number) {
  const count = ref(initialValue);

  const increment = () => {
    count.value += 1;
  };
  const decrement = () => {
    count.value -= 1;
  };
  const incrementBy = (value: number) => {
    count.value += value;
  };

  const countPow = computed(() => count.value * count.value);

  onMounted(() => console.log('useCounter mounted'));

  return {
    count,
    countPow,
    increment,
    decrement,
    incrementBy,
  };
}

This drastically reduces the code in our CounterCompositionApiv2.vue component and additionally allows us to use the counter functionality in any other component:

<script lang="ts">
import { watch } from 'vue';
import useCounter from '../composables/useCounter';

export default {
  props: {
    initialValue: {
      type: Number,
      default: 0,
    },
  },
  emits: ['counter-update'],
  setup(props, context) {
    const { count, increment, countPow, decrement, incrementBy } = useCounter(
      props.initialValue
    );

    watch(count, (value) => {
      context.emit('counter-update', value);
    });

    return { count, countPow, increment, decrement, incrementBy };
  },
};
</script>

In Vue 2, Mixins were mainly used to share code between components. But they have a few issues:

• It’s impossible to pass parameters to the mixin to change its logic which drastically reduces its flexibility.
• Property name conflicts can occur as properties from each mixin are merged into the same component.
• It isn’t necessarily apparent which properties came from which mixin if a component uses multiple mixins.

Composition API addresses all of these issues.

SFC Script Setup

Vue 3.2 allows us to get rid of the setup method by providing the <script setup>. It’s the recommended syntax if you use Composition API and SFC (Single File Component).

This syntactic sugar provides several advantages over the normal <script> syntax:

• We can declare props and emitted events using TypeScript
• Less boilerplate
• More concise code
• Better runtime performance: The template is compiled into a render function in the same scope, without an intermediate proxy
• Better IDE type-inference performance: The language server has less work to extract types from code.

CounterCompositionApiv3.vue demonstrates our counter example using the <script setup> syntax:

<script setup lang="ts">
import { defineProps, defineEmits, watch } from 'vue';
import useCounter from '../composables/useCounter';

interface Props {
  initialValue?: number;
}

const props = withDefaults(defineProps<Props>(), {
  initialValue: 0,
});

const emit = defineEmits(['counter-update']);

const { count, countPow, increment, decrement, incrementBy } = useCounter(
  props.initialValue
);

watch(count, (value) => {
  emit('counter-update', value);
});
</script>

Using the Composition API with Vue 2

If you can’t migrate to Vue 3 today, then you can still use the Composition API already. You can do this by installing the official Composition API Vue 2 Plugin.

Conclusion

You’ve seen the same counter component created in Vue 2 using Options API and created in Vue 3 using Composition API.

Let’s summarize all the things I love about Composition API:

• More readable and maintainable code with the feature-wise separation of concerns brought with the composition API.
• No more this keyword, so we can use arrow functions and use functional programming.
• We can only access the things we return from the setup method, making things more readable.
• Vue 3 is written in TypeScript and fully supports Composition API.
• Composition functions can easily be unit tested.

The following image shows a large component where colors group its logical concerns and compares Options API versus Composition API:

Vue Options API vs. Composition API

You can see that Composition API groups logical concerns, resulting in better maintainable code, especially for larger and complex components.

I can understand that many developers still prefer Options API as it is easier to teach people who are new to the framework and have JavaScript knowledge. But I would recommend that you use Composition API for complex applications that require a lot of domains and functionality. Additionally, Options API does not work very well with TypeScript, which is, in my opinion, also a must-have for complex applications.

If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.

Table of Contents

• 1. What is Vue.js?
• 2. What are some of the main features of Vue.js?
• 3. Why would you choose Vue instead of React or Angular?
• 4. What is an SFC?
• 5. What are computed properties?
• 6. What are watchers?
• 7. What is the difference between registering a component locally and globally?
• 8. What are some of the most important directives in Vue?
• 9. What is the Vue application instance?
• 10. What is the difference between one-way data flow and two-way data binding?
• 11. What is the difference between a slot and a scoped slot?
• 12. How does Vue know when it should rerender?
• 13. How can code be reused between components?
• 14. How to optimize Vue.js performance?
• 15. Which lifecycles and corresponding hooks are available in Vue?
• Conclusion

1. What is Vue.js?

Vue is a progressive framework for building user interfaces that was designed to be incrementally adoptable. Its core library is focused exclusively on the view layer so that it can easily be integrated with other projects or libraries.

But in contrast to React, Vue provides companion libraries for routing and state management which are all officially supported and kept up-to-date with the core library.

2. What are some of the main features of Vue.js?

• Virtual DOM: Vue uses a Virtual DOM, similar to other frameworks such as React, Ember, etc.
• Components: Components are the basic building block for reusable elements in Vue applications.
• Templates: Vue uses HTML-based templates.
• Routing: Vue provide it’s own router.
• Built-in directives: For example, v-if or v-for
• Lightweight: Vue is a lightweight library compared to other frameworks.

3. Why would you choose Vue instead of React or Angular?

Vue.js combines the best parts of Angular and React. Vue.js is a more flexible, less opinionated solution than Angular but it’s still a framework and not a UI library like React

I recently decided to focus my freelancer career on Vue.js, you can read more about this decision in the corresponding blog post.

4. What is an SFC?

Vue Single File Components (aka *.vue files, abbreviated as SFC) is a special file format that allows us to encapsulate the template (<template>), logic (<script>), and styling (<style>) of a Vue component in a single file.

Vue SFC is a framework-specific file format and must be pre-compiled by @vue/compiler-sfc into standard JavaScript and CSS. A compiled SFC is a standard JavaScript (ES) module.

5. What are computed properties?

Computed properties should be used to remove as much logic as possible from the templates as otherwise the template gets bloated and is harder to maintain. If you have complex logic including reactive data in your template you should use a computed property instead.

Instead of methods, computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed.

6. What are watchers?

Watchers should be used when asynchronous or expensive operations need to be executed in response to changing data.

7. What is the difference between registering a component locally and globally?

If a component is registered globally it can be used in the template of any component instance within this application:

const app = Vue.createApp({});

app.component('component-a', {
  /* ... */
});

app.mount('#app');

Global registration can unnecessarily increase your JavaScript bundle if you are using build systems like Webpack. If you stop using a component in your code, it will still be included in the final build.

To avoid this, we can register components locally by defining them in the component where it is needed:

import ComponentA from './ComponentA.vue';

export default {
  components: {
    ComponentA,
  },
  // ...
};

Note that locally registered components are not available in subcomponents.

8. What are some of the most important directives in Vue?

• v-if adds or removes DOM elements based on the given expression.
• v-else displays content only when the expression adjacent v-if resolves to false.
• v-show is similar to v-if, but it renders all elements to the DOM and then uses the CSS display property to show/hide elements.
• v-for allows us to loop through items in an array or object.
• v-model is used for two-way data bindings.
• v-on attaches an event listener to the element.

Here you can find all available directives.

9. What is the Vue application instance?

The application instance is used to register globals that can then be used by components within that application. An application instance is created with the createApp:

const app = Vue.createApp({
  /* options */
});

In Vue 2 this was called Vue instance and created this way:

const vm = new Vue({
  // options
});

10. What is the difference between one-way data flow and two-way data binding?

Vue uses a one-way data flow. Parents can pass data to child components using a prop and bind the data using the v-bind directive. When the parent component updates the prop value, it’s automatically updated in the child component. You should avoid mutating the property inside the child component and it will not affect the property in the parent component (unless it’s an array or object). Using Events the child component can communicate back to the parent.

Vue provides the v-model directive for two-way data binding of form inputs. v-model is just syntax sugar for v-bind combined with v-on:input.

11. What is the difference between a slot and a scoped slot?

A slot is a placeholder in a child component that is filled with content passed from the parent. Content of a regular slot is compiled in the parent’s scope and then passed to the child component.

Scoped slots are needed if the slot content needs to have access to data only available in the child component. We can bind attributes a <slot>, these elements are called slot props. Now, in the parent scope, we can use v-slot with a value to define a name for the slot props we’ve been provided:

12. How does Vue know when it should rerender?

The following explanation is based on Vue 3’s Reactivity. This article describes how Vue 2 implemented reactivity.

Vue uses an unobtrusive reactivity system which is one its most distinct features.

But what is reactivity? Reactivity is a programming paradigm that allows us to adjust to changes in a declarative manner.

The official documentation uses an Excel spreadsheet to demonstrate reactivity:

Vue Reactivity Spreadsheet Video

As you can see, we get the SUM if we put the number 2 in the first cell and number 3 in the second cell. The reactive part happens if we update the first number and the SUM automatically gets updated too.

Unfortunately, JavaScript variables are not reactive by default:

let value1 = 1;
let value2 = 2;
let sum = value1 + value2;

console.log(sum); // 5
value1 = 3;
console.log(sum); // Still 5

Therefore, Vue 3 added an abstraction on JavaScript Proxy to be able to achieve the reactiveness.

In Vue 3, we can easily declare a reactive state using the reactive method

import { reactive } from 'vue';

// reactive state
const state = reactive({
  count: 0,
});

or create standalone reactive values as refs:

import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 0

count.value++;
console.log(count.value); // 1

13. How can code be reused between components?

In Vue 2 and 3 we can use Mixins to reuse code between components.

Since Vue 3 the framework provides the Composition API that resolves the Mixins drawbacks.

14. How to optimize Vue.js performance?

Use code splitting (also known as lazy loading) to reduce the size of assets that need to be downloaded by the browser for the initial render. Essentially, it helps to load just the parts of the initial screen that are currently needed. All other parts of the application are downloaded when they are needed and requested:

// the MyUser component is dynamically loaded if the `/user route is visited:
const routes = [
  { path: '/user', component: () => import('./components/MyUser.vue') },
];

15. Which lifecycles and corresponding hooks are available in Vue?

Each Vue component instance goes through a series of initialization steps when it’s created. For example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called lifecycle hooks, which allows us to execute custom code at specific stages.

• Creation hooks (beforeCreate and created) allow us to perform actions before the component has even been added to the DOM. These hooks are also executed during server-side rendering. The created hook is the perfect lifecycle hook to trigger HTTP requests and populate any initial data that the component needs.
• Mounting hooks (beforeMount, mounted) are often the most-used hooks and allow us to access the component immediately before and after the first render. The mounted hook is an ideal time to integrate 3rd party libraries or to access the DOM.
• Updating hooks (beforeUpdate, updated) are called whenever a reactive property used by the component changes, or something else causes it to re-render. In the updated hook the DOM and the model are in-sync while in the beforeUpdate hook only the model is updated but not the DOM.
• Destruction hooks (beforeDestroy, destroyed) allow us to perform actions when the component is destroyed, such as cleanup or sending analytics. In the beforeDestroy hook we still have access to the Vue instance and can, for example, emit events. destroyed is the ideal place for a final cleanup, e.g. removing event listeners.

Below is a diagram for the instance lifecycle:

There exists an additional interesting lifecycle hook called errorCaptured which is called when an error from any descendent component is captured.

This hook receives three arguments: the error, the component instance that triggered the error, and a string containing information on where the error was captured. The hook can return false to stop the error from propagating further.

Conclusion

With these interview questions, you should be well-prepared for any upcoming job interviews. Let me know in the comments if you would ask any other important questions about Vue.

If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.

As the title already reveals, I chose Vue and in this article, I will describe to you why I picked it instead of React or Angular.

⚠️ This article will not provide a full comparison between the three technologies.

Table of Contents

• Why Do I Need a Niche?
• My Freelancing History
• What I Love About Vue
• What I Don’t Like In Vue
• What I Miss In Vue
• Vue’s Popularity
• Conclusion

Why Do I Need a Niche?

Finding your niche as a freelancer can have an extremely positive impact on your career. It took me some time to find mine, but finally, I found it and I can take my business to the next level. It has some advantages to be a jack of all but in the end, it’s even better to be the master of one trade. Having a niche can boost your income, helps to find new projects easier, and is useful to advertise yourself as an expert.

I can also give you an example of how the niche saves me time every day:

My previous search queries for job agents on freelancer platforms looked like this: React OR Angular OR TypeScript OR JavaScript OR React Native OR Vue. This way, I got job agent emails with dozens of job offers that I had to manually scan for interesting projects.

With a niche in place, I modified these search queries to Vue and now the job agent emails contain only a few freelancer projects but they are tailored to my skills.

My Freelancing History

When I started freelancing back in 2019 my tech focus was on web development using the Angular framework. But for my first freelancing project I choose a Vue.js project and I stayed there for about two years. I chose this project because I already had professional experience with Angular and some experience with React as I used it for my portfolio website and two React Native apps that I developed and published. I wanted to see how it compares to Angular and React. After this project, beginning from January to September 2021 I worked in a React project as I wanted to gain some professional experience with the library.

I could easily further specialize in Angular, but I have no good belly feeling with this choice. Therefore, I had to choose between React and Vue.

What I Love About Vue

TL;DR: In my opinion, Vue.js combines the best parts of Angular and React. Vue.js is a more flexible, less opinionated solution than Angular but it’s still a framework and not a UI library like React.

Less Usage of JavaScript’s “this” keyword

Angular components are full of the JavaScript keyword this. I don’t like this and thankfully we can write React and Vue components without the this keyword by using React Hooks and Vue 3’s Composition API.

Outstanding Documentation

The official Vue documentation is amazing and one of the best resources to learn Vue.

Best Parts of React and Angular

In its early development phase, Vue took inspiration from the good things of AngularJS (the first version of Angular). Vue also got inspired by React and they share some similarities:

• They have their focus in the core library. Concerns like global state management and routing are handled by separate companion libraries.
• Both provide reactive and composable view components.
• One and the other use a virtual DOM.

Less Optimization Efforts

In Vue, I need to care less about optimization efforts in comparison to React. React triggers a re-rendering of the entire component tree when a component’s state changes. Read my article “Debug Why React (Re-)Renders a Component” for further details.

There are multiple ways to avoid unnecessary re-rendering of child components in React:

• use PureComponent
• implement shouldComponentUpdate if you are using class components
• use immutable data structures

Angular developers also need to take care of the change detection, you can read my article “The Last Guide For Angular Change Detection You’ll Ever Need” if you want to deep-dive into that mechanism.

Vue automatically tracks a component’s dependencies during its render. Therefore, it knows precisely which components need to be re-rendered when the state changes. As a Vue developer, I can more focus on building the app than on performance optimizations.

Templates

Vue uses HTML templates, but there’s an option to write the render function in JSX. On the other hand, in React there’s solely JSX. A Vue component is split into three parts: HTML (<template>), CSS (<style>) and JavaScript (<script>) which most web developers should already be familiar with.

In React, we use JSX to render our component’s template. This has some advantages:

• You don’t have to learn an extra DSL (Domain-Specific Language) but can use pure JavaScript to build your view.
• JSX has good tooling support (e.g. linting, type checking, and editor auto-completion).

I liked this approach in the beginning but I have changed my opinion. For beginners, it might be really helpful to write the templates in JSX because they need to learn JavaScript basics like Array.prototype.map() to render lists. But writing code using an extra DSL (Domain-Specific Language) helps us to write less code.

Rich Harris wrote a great blog post “Write less code” that reminds us that all code is buggy:

All code is buggy. It stands to reason, therefore, that the more code you have to write the buggier your apps will be.

More code

• takes more time
• number of bugs grows quadratically with the size of the codebase
• is harder to review in the code review process

So using the DSL provided by Angular and Vue we write less code which is good.

Scaling Up

React provides a robust routing (React Router) and state management solution (Redux) that are maintained by the community and create a more fragmented ecosystem. Vue provides companion libraries for routing and state management which are all officially supported and kept up-to-date with the core library. This is similar to the Angular framework which provides a collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more.

Scaling Down

Getting started with Vue is much simpler than with React or Angular as you can use it completely without any build system and just use a single script tag in your HTML.

<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>

I already used this simple approach in a large Django monolithic application to be able to add new UI features without using the Django templating engine based on Python.

I know it’s also possible to use React with Babel Standalone but this is not a suitable approach for production usage.

TypeScript

Vue 3 is written in TypeScript so we don’t need any additional tooling to use TypeScript with Vue - it has first-class citizen support. Angular is even stricter and uses TypeScript per default.

What I Don’t Like In Vue

Community

Vue already has a good community but React is way more popular and therefore the community is bigger.

Less opinionated

Angular is very opinionated and I like that for large applications. Vue is less opinionated and has no restrictions on how you structure your code or which build system you use. I like to have some restrictions in my framework as this reduces discussion time between developers.

What I Miss In Vue

Better Mobile App Support

Vue.js does not natively support mobile app development. There are a number of solutions for creating native iOS and Android apps with Vue.js but React and React Native provide a better experience for React developers.

Angular’s HTTP module

I love that Angular provides a separate HTTP module to be able to communicate with servers using the HTTP protocol. It provides features like:

• The ability to request typed response objects.
• Streamlined error handling.
• Testability features.
• Request and response interception.

Vue provides no specific library to make HTTP requests so you can either use the Fetch API or libraries like axios.

Angular’s Forms Module

Vue does not provide a form validation pattern like Angular’s Reactive Forms but we can use 3rd party libraries like Vuelidate.

Vue’s Popularity

In StackOverflow’s 2020 Developer Survey we can see that Vue.js is not as popular as Angular and React:

We can see the same in HackerRank’s 2020 Developer Skills Report. But in this report Vue.js has shown steady growth, rising one spot per year since 2018:

Additionally, 23.6% of the developers want to learn Vue.js next:

The State of JavaScript Survey 2020 shows that developers are more and more interested in React and Vue.js but get less interested in Angular:

Conclusion

I’m pretty happy with my choice and the future will show if it was the right decision or not.

Which framework or technology did you pick for your niche? Tell me in the comments!

If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.

Tech Stack

As I already use AWS Amplify for some private APIs, I wanted to reuse this framework for this new project.

For this new project I need the following components:

• React for the frontend web application which will fetch the data from my serverless API
• AWS API Gateway which provides traffic management, CORS support, authorization and access control, throttling, monitoring, and API version management for the new API
• AWS Lambda with Node.js that fetches the follower count from Twitter API
• AWS DynamoDB which is a NoSQL database and which will store the follower count

Fetching follower count from backend

The first step is to add a new Node.js REST API to our Amplify application that provides a /twitter endpoint which is triggered on a recurring schedule. In my case, it will be on every 1st day of the month. The official documentation will help you to set up such a new REST API.

To be able to fetch the follower count from Twitter API I decided to use FeedHive’s Twitter Client. This library needs four secrets to be able to access Twitter API. We will store them in the AWS Secret Manager, my article “How to Use Environment Variables to Store Secrets in AWS Amplify Backend” will guide you through this process.

After the API is created and pushed to the cloud, we can write the basic functionality to fetch the Twitter followers inside our AWS Lambda function:

const twitterApiClient = require('twitter-api-client');
const AWS = require('aws-sdk');

const twitterUsername = 'yourTwitterUsername';
const secretsManager = new AWS.SecretsManager();
const responseHeaders = {
  'Content-Type': 'application/json',
  'Access-Control-Allow-Headers':
    'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
  'Access-Control-Allow-Methods': 'OPTIONS,POST',
  'Access-Control-Allow-Credentials': true,
  'Access-Control-Allow-Origin': '*',
  'X-Requested-With': '*',
};

exports.handler = async event => {
  const secretData = await secretsManager
    .getSecretValue({ SecretId: 'prod/twitterApi/twitter' })
    .promise();
  const secretValues = JSON.parse(secretData.SecretString);

  const twitterClient = new twitterApiClient.TwitterClient({
    apiKey: secretValues.TWITTER_API_KEY,
    apiSecret: secretValues.TWITTER_API_KEY_SECRET,
    accessToken: secretValues.TWITTER_ACCESS_TOKEN,
    accessTokenSecret: secretValues.TWITTER_ACCESS_TOKEN_SECRET,
  });

  try {
    const response = await twitterClient.accountsAndUsers.usersSearch({
      q: twitterUsername,
    });
    const followersCount = response[0].followers_count;

    return {
      statusCode: 200,
      headers: responseHeaders,
      body: followersCount,
    };
  } catch (e) {
    console.error('Error:', e);
    return {
      statusCode: 500,
      headers: responseHeaders,
      body: e.message ? e.message : JSON.stringify(e),
    };
  }
};

The next step is to add DynamoDB support to be able to store a new follower count and get a list of the stored data.

Therefore, we need to add a new storage to our AWS Amplify application, see “Adding a NoSQL database” for detailed instructions.

We are adding a NoSQL table that has the following columns:

• id: A unique string identifier for each row as a string
• follower_count: the current follower count as number
• data: an ISO timestamp string that represents the time when the follower count was fetched

Now, we need to allow our Lambda function to access this storage:

▶ amplify update function
? Select the Lambda function you want to update twitterfunction
? Which setting do you want to update? Resource access permissions
? Select the categories you want this function to have access to. storage
? Storage has 3 resources in this project. Select the one you would like your Lambda to access twitterdynamo
? Select the operations you want to permit on twitterdynamo create, read, update, delete

Finally, we can use the AWS SDK to store and read from DynamoDB:

const twitterApiClient = require('twitter-api-client');
const AWS = require('aws-sdk');
const { v4: uuidv4 } = require('uuid');

const secretsManager = new AWS.SecretsManager();

const twitterUsername = 'yourTwitterUsername';
const responseHeaders = {
  'Access-Control-Allow-Origin': '*',
  // ...
};

const docClient = new AWS.DynamoDB.DocumentClient();let tableName = 'twittertable';if (process.env.ENV && process.env.ENV !== 'NONE') { tableName = `${tableName}-${process.env.ENV}`;}const tableParams = { TableName: tableName,};async function getStoredFollowers() { console.log(`👷 Start scanning stored follower data...`); return docClient.scan({ ...tableParams }).promise();}async function storeFollowersCount(followerCount) { console.log(`👷 Start storing follower count...`); return docClient .put({ ...tableParams, Item: { id: uuidv4(), follower_count: followerCount, date: new Date().toISOString(), }, }) .promise();}
async function fetchFollowerCount(twitterClient) {
  console.log(`👷 Start fetching follower count...`);
  const data = await twitterClient.accountsAndUsers.usersSearch({
    q: twitterUsername,
  });
  return data[0].followers_count;
}

exports.handler = async event => {
  const secretData = await secretsManager
    .getSecretValue({ SecretId: 'prod/twitterApi/twitter' })
    .promise();
  const secretValues = JSON.parse(secretData.SecretString);

  const twitterClient = new twitterApiClient.TwitterClient({
    apiKey: secretValues.TWITTER_API_KEY,
    apiSecret: secretValues.TWITTER_API_KEY_SECRET,
    accessToken: secretValues.TWITTER_ACCESS_TOKEN,
    accessTokenSecret: secretValues.TWITTER_ACCESS_TOKEN_SECRET,
  });

  try {
    const followersCount = await fetchFollowerCount(twitterClient);

    await storeFollowersCount(followersCount); const storedFollowers = await getStoredFollowers();
    return {
      statusCode: 200,
      headers: responseHeaders,
      body: JSON.stringify(storedFollowers.Items),
    };
  } catch (e) {
    console.error('Error:', e);
    return {
      statusCode: 500,
      headers: responseHeaders,
      body: e.message ? e.message : JSON.stringify(e),
    };
  }
};

A successful API response will have a similar JSON array in its body:

[
    {
        "follower_count": 350,
        "date": "2021-08-09T11:39:50.885Z",
        "id": "9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d"
    },
    {
        "follower_count": 380,
        "date": "2021-09-09T11:39:50.885Z",
        "id": "a5a2a894-166b-4672-aefe-cea01c70a01a"
    }
]

Show data in frontend

To be able to show the data in the React frontend I use the Recharts library which is “a composable charting library built on React components”.

The React component is quite simple and uses the AWS Amplify REST API library to fetch the data from our API endpoint:

import { API } from 'aws-amplify';
import { useState } from 'react';
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from 'recharts';

const TwitterPage = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [apiError, setApiError] = useState();
  const [followerData, setFollowerData] = useState();

  const triggerEndpoint = async () => {
    setIsLoading(true);

    try {
      const data = await API.get('twitterapi', '/twitter');
      setFollowerData(
        data.map((d) => {
          d.followers = d.follower_count;
          d.date = new Date(d.date).toLocaleDateString();
          return d;
        })
      );
    } catch (error) {
      console.error('Failed to trigger Twitter endpoint', error);
      setApiError(JSON.stringify(error));
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      <h1>Twitter API</h1>
      <section>
        <button onClick={triggerEndpoint}>
          Fetch followers
        </button>
        {followerData ? (
          <LineChart
            width={700}
            height={500}
            data={followerData}
            margin={{
              top: 30,
              bottom: 30,
            }}
          >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="date" />
            <YAxis dataKey="followers" />
            <Tooltip />
            <Legend />
            <Line
              type="monotone"
              dataKey="followers"
              stroke="#FC1A20"
              activeDot={{ r: 8 }}
            />
          </LineChart>
        ) : null}
        {apiError ? <p className="py-4">{JSON.parse(apiError)}</p> : null}
      </section>
    </Layout>
  );
};

export default TwitterPage;

which results in such a graph:

Conclusion

Using serverless functions it is quite easy and cheap to build a custom solution to track Twitter follower growth over time.

What do you use to track your follower growth? Leave a comment and tell me about your solution.

If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.

If you are working in a big team the chances may be quite high that many commits have been added in the meantime. So finding the commit where the bug was introduced can become quite nasty.

Luckily, Git offers a tool that helps to detect the first bad commit that introduces the bug. It is called “git bisect”.

How does it work?

We need to provide Git Bisect two information to be able to identify

1. A “good” commit where the bug was not present.
2. A “bad” commit where the bug is present.

This way Git “knows” that the bug has to between the “good” and the “bad” commit. Starting the bisect process will split the range of commits between the “good” and “bad ” commit in half and check out a commit in the middle:

Our task is now to validate the code at this commit. This can be done by compiling, running the application or launching a test case for the given bug. Next, we need to tell Git if the test was “good” or “bad”. Git will simply repeat this process until we’ve singled out the commit that contains the bug.

The used algorithm is called binary search.

Practical Example

Let’s look at how we can run Git Bisect from the command line. First, we need to start the process

$ git bisect start

Next step is to provide Git a “good” and “bad” commit. The “bad” commit is often the current state which refers to “HEAD”:

$ git bisect bad HEAD

To be able to find “good” commit you need to check out any older revision where you are quite sure that the bug did not exist. After you have checked it out and verified that the bug is not present there, we provide Git the corresponding commit hash :

$ git bisect good acd72832

Now we are ready to start the “bisecting” process. Git will check out a commit in the middle of the range between the “good” and “bad” commit we provided:

Bisecting: 6 revisions left to test after this (roughly 2 step)
[commit_ABC] Added controller

At this point we need to verify if the bug is still present or not. If it is still present we need to run

$ git bisect bad

otherwise we run

$ git bisect good

to mark it as “good”.

Depending on the result, Git will again split the original commit range and select either the first or second half. It will again check out a commit in the middle and we need to verify if the bug is present there.

This process is repeated until we’ve successfully singled out the bad commit!

Once we’ve found the culprit, we can end the bisect process by running:

$ git bisect reset

Git will then finish the bisect process and take us back to our previous HEAD revision.

Conclusion

Git Bisect can be a helpful tool to track down a bug. I only use git bisect when I absolutely have no idea where the bug was introduced and I need to search through a lot of potentially unrelated changes.

For more information about Git Bisect take a look at the official docs.

If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.

Table of Contents

• 1. What is React?
• 2. What are the advantages of React?
• 3. What are disadvantages of React?
• 4. What is JSX?
• 5. How to pass data between components?
• 6. What are the differences between functional and class components?
• 7. What is the Virtual DOM?
• 8. Is the Shadow DOM the same as the Virtual DOM?
• 9. What is “React Fiber”?
• 10. How does state differ from props?
• 11. What are the differences between controlled and uncontrolled components?
• 12. What are the different lifecycle methods in React?
• 13. How can you improve your React app’s performance?
• 14. What are keys in React?
• 15. What are Higher Order Components?
• 16. What are error boundaries?
• 17. Why Hooks were introduced?
• 18. What is the purpose of useEffect hook?
• 19. What are synthetic events in React?
• 20. What is the use of refs?
• Conclusion

1. What is React?

React is a “JavaScript library for building user interfaces” which was developed by Facebook in 2011.

It’s the V in the MVC (Model - View -Controller), so it is rather an open-source UI library than a framework.

2. What are the advantages of React?

• Good performance: due to VDOM, see #17.
• Easy to learn: with basic JavaScript knowledge you can start building applications. Frameworks like Angular require more knowledge about other technologies and patterns like RxJS, TypeScript, and Dependency Injection.
• One-way data flow: this flow is also called “parent to child” or “top to bottom” and prevents errors and facilitates debugging.
• Reusable components: Re-using React components in other parts of the code or even in different projects can be done with little or no changes.
• Huge community: The community supplies a ton of libraries that can be used to build React applications.
• It is very popular among developers.

3. What are the disadvantages of React?

• As React provides only the View part of the MVC model you mostly will rely on other technologies in your projects as well. Therefore, every React project might look quite different.
• Some people think that JSX is too difficult to grasp and too complex.
• Often poor documentation for React and its libraries.

4. What is JSX?

JSX (JavaScript XML) allows us to write HTML inside JavaScript. The official docs describe it as “syntax extension to JavaScript”.

React recommends using JSX, but it is also possible to create applications without using JSX at all.

A simple JSX example:

const element = <h1>Hello, world!</h1>;

5. How to pass data between components?

1. Use props to pass data from parent to child.
2. Use callbacks to pass data from child to parent.
3. Use any of the following methods to pass data among siblings:
   • Integrating the methods mentioned above.
   • Using Redux.
   • Utilizing React’s Context API.

6. What are the differences between functional and class components?

Hooks were introduced in React 16.8. In previous versions, functional components were called stateless components and did not provide the same features as class components (e.g., accessing state). Hooks enable functional components to have the same features as class components. There are no plans to remove class components from React.

So let’s take a look at the differences:

Declaration & Props

Functional Component

Functional components are JavaScript functions and therefore can be declared using an arrow function or the function keyword. Props are simply function arguments and can be directly used inside JSX:

const Card = (props) => {
 return(
     <h2>Title: {props.title}</h2>
 )
}

function Card(props){
 return(
    <h2>Title: {props.title}</h2>
 )
}

Class component

Class components are declared using the ES6 class keyword. Props need to be accessed using the this keyword:

class Card extends React.Component{
 constructor(props){
   super(props);
 }

 render(){
   return(
    <h2>Title: {this.props.title}</h2>
   )
 }
}

Handling state

Functional components

In functional components we need to use the useState hook to be able to handle state:

const Counter = (props) => {
    const [counter, setCounter] = useState(0);

    const increment = () => {
        setCounter(++counter);
    }

    return (
        <div>
            <p>Count: {counter}</p>
            <button onClick={increment}>Increment Counter</button>
        </div>
    )
}

Class components

It’s not possible to use React Hooks inside class components, therefore state handling is done differently in a class component:

class Counter extends React.Component {
    constructor(props){
        super(props);
        this.state = {counter : 0};
        this.increment = this.increment.bind(this);
    }

    increment {
        this.setState((prevState) => {
            return {counter: prevState.counter++};
        });
    }

    render() {
    return (
            <div>
            <p>Count: {this.state.counter}</p>
            <button onClick={this.increment}>Increment Counter</button>
        </div>
        )
    }
}

7. What is the Virtual DOM?

The Virtual DOM (VDOM) is a lightweight JavaScript object and it contains a copy of the real DOM.

8. Is the Shadow DOM the same as the Virtual DOM?

No, they are different.

The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components.

The virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.

9. What is “React Fiber”?

Fiber is the new reconciliation engine in React 16.

Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.

Read more.

10. How does state differ from props?

Both props and state are plain JavaScript objects.

Props (short for “properties”) is an object of arbitrary inputs that are passed to a component by its parent component.

State are variables that are initialized and managed by the component and change over the lifetime of a specific instance of this component.

This article from Kent C. Dodds provides a more detailed explanation.

11. What are the differences between controlled and uncontrolled components?

The value of an input element in a controlled React component is controlled by React.

The value of an input element in an uncontrolled React component is controlled by the DOM.

12. What are the different lifecycle methods in React?

React class components provide these lifecycle methods:

• componentDidMount(): Runs after the component output has been rendered to the DOM.
• componentDidUpdate(): Runs immediately after updating occurs.
• componentWillUnmount(): Runs after the component is unmounted from the DOM and is used to clear up the memory space.

There exist some other rarely used and legacy lifecycle methods.

Hooks are used in functional components instead of the above-mentioned lifecycle methods. The Effect Hook useEffect adds, for example, the ability to perform side effects and provides the same functionality as componentDidMount, componentDidUpdate, and componentWillUnmount.

13. How can you improve your React app’s performance?

• Use React.PureComponent which is a base class like React.Component but it provides in some cases a performance boost if its render() function renders the same result given the same props and state.
• Use useMemo Hook to memoize functions that perform expensive calculations on every render. It will only recompute the memoized value if one of the dependencies (that are passed to the Hook) has changed.
• State colocation is a process that moves the state as close to where you need it. Some React applications have a lot of unnecessary state in their parent component which makes the code harder to maintain and leads to a lot of unnecessary re-renders. This article provides a detailed explanation about state colocation.
• Lazy load your components to reduce the load time of your application. React Suspense can be used to lazy load components.

14. What are keys in React?

React needs keys to be able to identify which elements were changed, added, or removed. Each item in an array needs to have a key that provides a stable identity.

It’s not recommended to use indexes for keys if the order of items may change as it can have a negative impact on the performance and may cause state issues. React will use indexes as keys if you do not assign an explicit key to list items.

Check out Robin Pokorny’s article for an in-depth explanation of the negative impacts of using an index as a key. Here is another in-depth explanation about why keys are necessary if you’re interested in learning more.

15. What are Higher Order Components?

A higher-order component (HOC) is a function that takes a component and returns a new component.

They are an advanced technique in React for reusing component logic and they are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature:

const EnhancedComponent = higherOrderComponent(WrappedComponent);

Whereas a component transforms props into UI, a higher-order component transforms a component into another component.

16. What are error boundaries?

React 16 introduced a new concept of an “error boundary”.

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

17. Why Hooks were introduced?

Hooks solve a wide variety of seemingly unconnected problems in React that were encountered by Facebook over five years of writing and maintaining tens of thousands of components:

• Hooks allow you to reuse stateful logic without changing your component hierarchy.
• Hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data).
• Hooks let you use more of React’s features without classes.
• It removed the complexity of dealing with the this keyword inside class components.

Read more

18. What is the purpose of useEffect hook?

The Effect hook lets us perform side effects in functional components. It helps us to avoid redundant code in different lifecycle methods of a class component. It helps to group related code.

19. What are synthetic events in React?

SyntheticEvent is a cross-browser wrapper around the browser’s native event. It has the same API as the browser’s native event, including stopPropagation() and `preventDefault(), except the events work identically across all browsers.

20. What is the use of refs?

A Ref is a special attribute that can be attached to any component. It can be an object created by React.createRef(), a callback function or a string (in legacy API).

To get direct access to a DOM element or component instance you can use ref attribute as a callback function. The function receives the underlying DOM element or class instance (depending on the type of element) as its argument.

In most cases, refs should be used sparingly.

Conclusion

I hope this list of React interview questions will help you to get your next React position. Leave me a comment if you know any other important React interview questions.

If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.

If you are looking for more interview questions you should take a look at this list of top 500 React interview questions & answers.

In this article, I want to demonstrate how you can add sensitive and insensitive configuration data to an AWS Amplify backend using environment variables and AWS Secrets Manager.

Table of Contents

• Types of configuration
• Init Amplify
• Add insensitive configuration data
• Add sensitive data using AWS Secrets Manager
• Conclusion

Types of configuration

There exist many types of configuration data, for example:

• timeouts
• connection strings
• external API configurations like URLs and endpoints
• caching
• hosting configuration for URL, port, or schema
• file system paths
• framework configuration
• libraries configuration
• business logic parameters
• and many more

Apart from the type, configuration data can also be categorized as sensitive or insensitive.

Sensitive vs Insensitive

Sensitive configuration data is anything that can be potentially exploited by a third party and therefore must be protected from unauthorized access. Examples of such sensitive data are API keys, usernames, passwords, emails, etc. This data should not be part of your version control. Insensitive configuration data is for example a timeout string for a backend endpoint that can be safely added to the version control.

Init Amplify

You need an AWS account and the Amplify CLI installed and configured to be able to follow the following steps. Check out the official docs to set up the prerequisites.

Let’s start by creating a new Amplify project:

mkdir amplify-env-config-demo
cd amplify-env-config-demo

▶ amplify init
? Enter a name for the project amplifyenvconfigdemo
? Initialize the project with the above configuration? Yes
? Select the authentication method you want to use: AWS profile
? Please choose the profile you want to use default

Next, we can add an API which we will use to add some environment configuration.

▶ amplify add api
? Please select from one of the below mentioned services: REST
? Provide a friendly name for your resource to be used as a label for this category in the project: amplifyenvconfigdemoapi
? Provide a path (e.g., /book/{isbn}): /handle
? Choose a Lambda source Create a new Lambda function
? Provide an AWS Lambda function name: amplifyenvconfigdemofunction
? Choose the runtime that you want to use: NodeJS
? Choose the function template that you want to use: Hello World
? Do you want to configure advanced settings? No
? Do you want to edit the local lambda function now? No
? Restrict API access No
? Do you want to add another path? No

We create a simple Node.js lambda function based on the “Hello World” Amplify template. It will provide a REST API with an endpoint at the path /handle.

Amplify CLI generated the “Hello World” function code at amplify/backend/function/amplifyenvconfigdemofunction/src/index.js:

exports.handler = async event => {
  // TODO implement
  const response = {
    statusCode: 200,
    // Uncomment below to enable CORS requests
    // headers: {
    // "Access-Control-Allow-Origin": "*",
    // "Access-Control-Allow-Headers": "*"
    // },
    body: JSON.stringify('Hello from Lambda!'),
  };
  return response;
};

Add insensitive configuration data

As we now have a running API, we can add some insensitive configuration data as environment variables to our Amplify backend.

Therefore, we need to modify the amplify/backend/function/amplifyenvconfigdemofunction/amplifyenvconfigdemofunction-cloudformation-template.json file. It includes a Parameters object where we can add a new environment variable. In our case we want to add a string variable that can be accessed with the key MyEnvVariableKey and has the value my-environment-variable:

{
  "AWSTemplateFormatVersion": "2010-09-09",
  "Description": "Lambda Function resource stack creation using Amplify CLI",
  "Parameters" : {
    ...
    "env": {
      "Type": "String"
    },
    "s3Key": {
      "Type": "String"
    },
    "MyEnvVariableKey" : { "Type" : "String", "Default" : "my-environment-variable" } },
  ...
}

We also need to modify the Resources > Environment > Variables object in this file to be able to map our new environment key to a variable that is attached to the global process.env variable and is injected by the Node.js runtime:

{
  "Resources": {
    "Environment": {
      "Variables": {
        "ENV": {
          "Ref": "env"
        },
        "REGION": {
          "Ref": "AWS::Region"
        },
        "MY_ENV_VAR": { "Ref": "MyEnvVariableKey" } }
    }  
  }
}

Finally, we need to run amplify push to build all of our local backend resources and provision them in the cloud.

Now we can access this variable in our lambda function by accessing the global process.env variable:

exports.handler = async event => {
  console.log('MY_ENV_VAR', process.env.MY_ENV_VAR);
  const response = {
    statusCode: 200,
    body: JSON.stringify('Hello from Lambda!'),
  };
  return response;
};

Add sensitive data using AWS Secrets Manager

AWS provides the AWS Secrets Manager that helps to “protect secrets needed to access your applications, services, and IT resources”. We will use this service to be able to access sensitive data from our backend.

First, we need to click on “Store a new secret” to create a new secret:

Next, we click “Other type of secret” and enter key and value of our secret in the corresponding “Secret key/value” inputs:

It is possible to add multiple key/value pairs to a secret. A new pair can be added by clicking the ”+ Add row” button.

In the next screen we need to add a name and some other optional information to our secret:

Let’s finish the wizard by skipping all the following screens by clicking the “Next” button.

Now we can open the secret and inspect its values inside the AWS Secrets Manager:

We need to copy the “Secret ARN” value as we need to add a new configuration object in our Cloudformation configuration file amplifyenvconfigdemofunction-cloudformation-template.json:

"lambdaexecutionpolicy": {
  "DependsOn": ["LambdaExecutionRole"],
  "Type": "AWS::IAM::Policy",
  "Properties": {
  "PolicyName": "lambda-execution-policy",
  "Roles": [{ "Ref": "LambdaExecutionRole" }],
  "PolicyDocument": {
    "Version": "2012-10-17",
    "Statement": [
        { "Effect": "Allow", "Action": ["secretsmanager:GetSecretValue"], "Resource": { "Fn::Sub": ["arn:aws:secretsmanager:${region}:${account}:secret:key_id", { "region": { "Ref": "AWS::Region" }, "account": { "Ref": "AWS::AccountId" } }] } } ]
    }
  }
}

Again, we need to run amplify push to build all of our local backend resources and provision them in the cloud.

Now we need to add some JavaScript code to be able to access the secret inside our Node.js lambda function.

First, we need to add the AWS SDK to amplify/backend/function/amplifyenvconfigdemofunction/src/package.json by running:

npm install aws-sdk

Then we can use the SecretsManager to get our secret values by passing the “Secret name” which we defined in the AWS Secrets Manager:

const AWS = require('aws-sdk');const secretsManager = new AWS.SecretsManager();
exports.handler = async event => {
  console.log('MY_ENV_VAR', process.env.MY_ENV_VAR);

  const secretData = await secretsManager .getSecretValue({ SecretId: 'dev/demoSecret' }) .promise(); const secretValues = JSON.parse(secretData.SecretString); console.log('DEMO_API_KEY', secretValues.DEMO_API_KEY);
  const response = {
    statusCode: 200,
    body: JSON.stringify('Hello from Lambda!'),
  };
  return response;
};

Conclusion

In this article, I demonstrated how you can add sensitive and insensitive environment configuration to your AWS Amplify backend. You can also watch this video from Nader Dabit if you prefer a visual tutorial.

If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.

In this article, I want to guide you through the process how to build and deploy such an Amplify application.

Table of Contents

• Set up Amplify
• Set up fullstack Amplify project
  • Create React frontend
  • Initialize Amplify
  • Create GraphQL API
  • Connect frontend to API
  • Add authentication
  • Deploy and host app
• What’s next
• Conclusion

Set up Amplify

AWS Amplify describes itself as:

Fastest, easiest way to build mobile and web apps that scale

Amplify provides tools and services to build scalable full-stack applications powered by AWS (Amazon Web Services). With Amplify configuring backends and deploying static web apps is easy. It supports web frameworks like Angular, React, Vue, JavaScript, Next.js, and mobile platforms including iOS, Android, React Native, Ionic, and Flutter.

You’ll need to create an AWS account to follow the following steps. No worries, after signing up you have access to the AWS Free Tier which does not include any upfront charges or term commitments.

The next step is to install the Amplify Command Line Interface (CLI). In my case I used cURL on macOS:

curl -sL https://aws-amplify.github.io/amplify-cli/install | bash && $SHELL

Alternatively, you can watch this video to learn how to install and configure the Amplify CLI.

Now we can configure Amplify using the CLI

amplify configure

which will ask us to sign in to AWS Console. Once we’re signed in, Amplify CLI will ask us to create an AWS IAM user:

Specify the AWS Region
? region: # Your preferred region
Specify the username of the new IAM user:
? user name: # User name for Amplify IAM user
Complete the user creation using the AWS console

We’ll be redirected to IAM where we need to finish the wizard and create a user with AdministratorAccess in our account to provision AWS resources. Once the user is created, Amplify CLI will ask us to provide the accessKeyId and secretAccessKey to connect Amplify CLI with our created IAM user:

Enter the access key of the newly created user:
? accessKeyId: # YOUR_ACCESS_KEY_ID
? secretAccessKey: # YOUR_SECRET_ACCESS_KEY
This would update/create the AWS Profile in your local machine
? Profile Name: # (default)

Successfully set up the new user.

Set up full-stack Amplify project

At this point, we are ready to set up our full-stack project using a React application in the frontend and GraphQL as backend API. We’ll build a Todo CRUD (create, read, update, delete) application that uses this architecture:

The complete source code of this demo is available at GitHub.

Create React frontend

Let’s start by creating a new React app using create-react-app. From our projects directory we run the following commands to create our new React app in a directory called amplify-react-graphql-demo and to navigate into that new directory:

npx create-react-app amplify-react-graphql-demo
cd amplify-react-graphql-demo

To start our React app we can run

npm start

which will start the development server at http://localhost:3000.

Initialize Amplify

Now it’s time to initialize Amplify in our project. From the root of the project we run

amplify init

which will prompt some information about the app:

▶ amplify init
? Enter a name for the project amplifyreactdemo
The following configuration will be applied:

Project information
| Name: amplifyreactdemo
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? Yes
Using default provider awscloudformation
? Select the authentication method you want to use: AWS profile
? Please choose the profile you want to use: default

When our new Amplify project is initialized, the CLI:

• created a file called aws-exports.js in the src directory that holds all the configuration for the services we create with Amplify
• created a top-level directory called amplify that contains our backend definition
• modified the .gitignore file and adds some generated files to the ignore list

Additionally, a new cloud project is created in the AWS Amplify Console that can be accessed by running amplify console. Amplify Console provides two main services: hosting and the Admin UI. More information can be found here.

The next step is to install some Amplify libraries:

npm install aws-amplify @aws-amplify/ui-react typescript

• aws-amplify: the main library for working with Amplify in your apps
• @aws-amplify/ui-react: includes React specific UI components
• typescript: we will use TypeScript in some parts of this demo

Next, we need to configure Amplify on the client. Therefore, we need to add the following code below the last import in src/index.js :

import Amplify from 'aws-amplify';
import awsExports from './aws-exports';
Amplify.configure(awsExports);

At this point wee have a running React frontend application, Amplify is configured, and we can now add our GraphQL API.

Create GraphQL API

We will now create a backend that provides a GraphQL API using AWS AppSync (a managed GraphQL service) that uses Amazon DynamoDB (a NoSQL database).

To add a new API we need to run the following command in our project’s root folder:

▶ amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: demoapi
? Choose the default authorization type for the API: API key
? Enter a description for the API key:
? After how many days from now the API key should expire (1-365): 7
? Do you want to configure advanced settings for the GraphQL API: No, I am done.
? Do you have an annotated GraphQL schema? No
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)

After the process finished successfully we can inspect the GraphQL schema at amplify/backend/api/demoapi/schema.graphql:

type Todo @model {
  id: ID!
  name: String!
  description: String
}

The generated Todo type is annotated with a @model directive that is part of the GraphQL transform library of Amplify. The library contains multiple directives which can be used for authentication, to define data models, and more. Adding the @model directive will create a database table for this type (in our example a Todo table), the CRUD (create, read, update, delete) schema, and the corresponding GraphQL resolvers.

Now it’s time to deploy our backend:

▶ amplify push
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name | Operation | Provider plugin |
| -------- | ------------- | --------- | ----------------- |
| Api | demoapi | Create | awscloudformation |
? Are you sure you want to continue? Yes
? Do you want to generate code for your newly created GraphQL API: Yes
? Choose the code generation language target: typescript
? Enter the file name pattern of graphql queries, mutations and subscriptions: src/graphql/**/*.ts
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions: Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
? Enter the file name for the generated code: src/API.ts

After it is finished successfully our GraphQL API is deployed and we can interact with it. To see and interact with the GraphQL API in the AppSync console at any time we can run:

amplify console api

Alternatively, we can run this command

amplify console api

to view the entire app in the Amplify console.

Connect frontend to API

The GraphQL mutations, queries and subscriptions are available at src/graphql. To be able to interact with them we can use the generated src/API.ts file. So we need extend App.js to be able to create, edit and delete Todos via our GraphQL API:

import React, { useEffect, useState } from 'react';
import { API, graphqlOperation } from '@aws-amplify/api';
import { listTodos } from './graphql/queries';
import { createTodo, deleteTodo, updateTodo } from './graphql/mutations';
import TodoList from './components/TodoList';
import CreateTodo from './components/CreateTodo';

const initialState = { name: '', description: '' };

function App() {
  const [formState, setFormState] = useState(initialState);
  const [todos, setTodos] = useState([]);
  const [apiError, setApiError] = useState();
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    fetchTodos();
  }, []);

  function setInput(key, value) {
    setFormState({ ...formState, [key]: value });
  }

  async function fetchTodos() {
    setIsLoading(true);
    try {
      const todoData = await API.graphql(graphqlOperation(listTodos)); const todos = todoData.data.listTodos.items;
      setTodos(todos);
      setApiError(null);
    } catch (error) {
      console.error('Failed fetching todos:', error);
      setApiError(error);
    } finally {
      setIsLoading(false);
    }
  }

  async function addTodo() {
    try {
      if (!formState.name || !formState.description) {
        return;
      }
      const todo = { ...formState };
      setTodos([...todos, todo]);
      setFormState(initialState);
      await API.graphql(graphqlOperation(createTodo, { input: todo })); setApiError(null);
    } catch (error) {
      console.error('Failed creating todo:', error);
      setApiError(error);
    }
  }

  async function removeTodo(id) {
    try {
      await API.graphql(graphqlOperation(deleteTodo, { input: { id } })); setTodos(todos.filter(todo => todo.id !== id));
      setApiError(null);
    } catch (error) {
      console.error('Failed deleting todo:', error);
      setApiError(error);
    }
  }

  async function onItemUpdate(todo) {
    try {
      await API.graphql( graphqlOperation(updateTodo, { input: { name: todo.name, description: todo.description, id: todo.id, }, }) ); setApiError(null);
    } catch (error) {
      console.error('Failed updating todo:', error);
      setApiError(error);
    }
  }

  const errorMessage = apiError && (
    <p style={styles.errorText}>
      {apiError.errors.map(error => (
        <p>{error.message}</p>
      ))}
    </p>
  );

  if (isLoading) {
    return 'Loading...';
  }

  return (
    <div style={styles.container}>
      <h1 style={styles.heading}>Amplify React & GraphQL Todos</h1>
      {errorMessage}
      <div style={styles.grid}>
        <TodoList
          todos={todos}
          onRemoveTodo={removeTodo}
          onItemUpdate={onItemUpdate}
        />
        <CreateTodo
          description={formState.description}
          name={formState.name}
          onCreate={addTodo}
          onDescriptionChange={setInput}
          onNameChange={setInput}
        />
      </div>
    </div>
  );
}

export default App;

The full source code of this demo is available at GitHub.

The application should show a list of available Todos which can be edited or deleted. Additionally, we have the possibility to create new Todos:

Add authentication

Amplify uses Amazon Cognito as the main authentication provider. We’ll use it to add authentication to our application by adding a login that requires a password and username.

To add authentication we need to run

▶ amplify add auth
Using service: Cognito, provided by: awscloudformation
 The current configured provider is Amazon Cognito.

 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections.
 How do you want users to be able to sign in? Username
 Do you want to configure advanced settings? No, I am done.

and deploy our service by running

amplify push

Now we can add the login UI to our frontend. The login flow can easily be handled by using the withAuthenticator wrapper from the @aws-amplify/ui-react package. We just need to adjust our App.js and import withAuthenticator:

import { withAuthenticator } from '@aws-amplify/ui-react';

Now we need to wrap the main component with the withAuthenticator wrapper:

export default withAuthenticator(App);

Running npm start will now start the app with an authentication flow allowing users to sign up and sign in:

Deploy and host app

Finally, we want to deploy our app which can be either done manually or via automatic continuous deployment. In this demo I want to deploy it manually and host it as static web app. If you want to use continuous deployment instead, please check out this official guide.

First, we need to add hosting:

▶ amplify add hosting
? Select the plugin module to execute: Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
? Choose a type: Manual deployment

and then we are ready to publish our app:

amplify publish

After publishing, we can see the app URL where our application is hosted on an `amplifyapp.com domain in our terminal.

What’s next

Amplify provides also a way to run your API locally, check out this tutorial.

Here are some cool things that you can additionally add to your Amplify application:

• DataStore
• User File Storage
• Serverless APIs
• Analytics
• AI/ML
• Push Notification
• PubSub
• AR/VR

Take a look at the official Amplify docs for further information about the framework.

Conclusion

In this article I showed you that building and deploying a full-stack serverless application using AWS Amplify requires a minimum amount of work. Without using such a framework it would be much harder and this way you can focus more on the end product instead of what is happening inside.

If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.