Hi 👋

Happy New Year 🥳🎉🥂🎊

📊 Let’s recap my year 2022 📊

💍 I got married
💸 I had a very successful year as freelancer
📹 I started to create video content
📈 Grew from ~400 to nearly 2000 Twitter followers
📈 Increased LinkedIn follower count to more than 4000 followers

mokkapps.de

⭐ Rewrote the whole app using Nuxt 3
⭐ Published 9 blog posts
⭐ Published 45 Vue tips

weekly-vue.news

⭐ Moved my weekly Vue newsletter to a separate domain
⭐ Published 52 newsletter issues

codesnap.dev

⭐ Launched my first SaaS
⭐ +200 registered users
⭐ +4000 exported code snippets

Let’s see what 2023 will bring 🤞🏻

Of course, you can expect a new Vue tip each week 💪🏻

Have a nice week ☀️

Vue Tip: Access DOM in Watcher Callback After Vue Updated It

If you make changes to reactive state in a Vue component, it can trigger both component updates and any watcher callbacks you have created.

By default, these callbacks are executed before the component updates, so if you try to access the DOM inside a callback, it will be in its pre-update state.

To access the DOM after Vue has updated it in a watcher callback, you can use the flush: 'post' option:

<script setup>
watch(source, callback, {
  flush: 'post',
})

watchEffect(callback, {
  flush: 'post',
})
</script>

Example for Vue 2 with Options API:

<script>
export default {
  // ...
  watch: {
    key: {
      handler() {},
      flush: 'post',
    },
  },
}
</script>

Post-flush watchEffect() also has a convenience alias, watchPostEffect():

<script setup>
import { watchPostEffect } from 'vue'

watchPostEffect(() => {
  /* executed after Vue updates */
})
</script>

Curated Vue Content

📕 Using OAuth in Nuxt 3

👉🏻 OAuth is a widely-used industry standard for securely accessing user information without giving access to their passwords.

👉🏻 Michael gives an overview of how it works, and why he uses it for authentication in Nuxt 3 apps.

📕 How to reuse one Vue.js codebase across multiple apps

👉🏻 “Reusability is kind of the final boss of software development. (…) everything becomes more complex as soon as something needs to be reused many times.”

📕 Next, Nest, Nuxt… Nust?

👉🏻 “This blog post is for everyone looking for their new favorite JavaScript backend framework.”

👉🏻 Marius explains just what systems like Next and Gatsby do and touches on a few differences.

Quote of the week

JavaScript Tip: How to Sort an Array of Integers

In JavaScript, Array.prototype.sort() sorts the elements of an array in place and returns the reference to the same array, now sorted. The default sort order is ascending, built upon converting the elements into strings and comparing their UTF-16 code unit value sequences.

sort() mutates the original array. Therefore we use [...numbers] to create a shallow copy of the array in the following example.

To sort an array of integers, we must provide a compare function that defines the sort order:

const numbers = [10, 3, 45, 999, 20]

const ascendingSortedNumbers = [...numbers].sort((a, b) => a - b)
console.log(ascendingSortedNumbers) // [ 3, 10, 20, 45, 999 ]

const descendingSortedNumbers = [...numbers].sort((a, b) => b - a)
console.log(descendingSortedNumbers) // [ 999, 45, 20, 10, 3 ]

Curated Web Development Content

📕 Building a website like it’s 1999… in 2022

👉🏻 Sophie is on a mission this year to bring back the spirit of the old web.

👉🏻 “(…) and now so many websites look the same. These old personal websites were a reflection of yourself.”

📕 You can add biometric authentication to your webpage. Here’s how.

👉🏻 The easiest way to add biometric authentication to your web application is to use a standard called WebAuthn.

📕 Twenty Five Thousand Dollars Of Funny Money

👉🏻 Rachel worked for six weeks at a place that sold ads and fixed a bug that “gave 25 grand worth of funny money to anyone who clicked”.

📕 Build your own synthetic user testing

👉🏻 Syntethic tests simulate the random, unexpected behaviors of your users.

👉🏻 In this tutorial, Ben shows how to build a synthetic monitoring test for a form on a website.

📕 cheat.sh

👉🏻 Unified access to the best community driven cheat sheets repos of the world.

🛠️ open-pdf-sign

👉🏻 open-pdf-sign allows users to sign PDF files digitally from the command line or webserver.

🛠️ Clipboard

👉🏻 Allows users to cut, copy, and paste anything anywhere from the terminal.

👉🏻 It works straight out-of-the-box with zero dependencies on Windows, Linux, Android, macOS, and many other operating systems.

Originally published at https://weekly-vue.news.

Published at Dec 26, 2022, 2:00 PM

Hi 👋

I deleted my account at Revue as they will shut down in January 2023.

This is the first issue that is sent via my custom-built newsletter solution:

I store the subscriber list on Supabase, manage the content as Markdown files on my Nuxt 3-powered newsletter website and send the emails using Amazon SES.

I plan to write a blog post about how I replaced Revue with my custom-built solution.

Have a nice week ☀️

Vue Tip: Pass Custom Arguments to Event Handler Method

In Vue, we use the v-on (typically shortened with the @ symbol) to listen to DOM events and run some JavaScript code when triggered.

We can use inline handlers or method handlers if the logic for the event handler is more complex:

<script setup>
const name = ref('Vue.js')

const greet = (event) => {
  alert(`Hello ${name.value}!`)
  if (event) {
    alert(event.target.tagName)
  }
}
</script>

<template>
  <button @click="greet">Greet</button>
</template>

Sometimes we need to pass custom arguments to the method and access the original DOM event:

<script setup>
const name = ref('Vue.js')

const greet = (event, name) => {
  alert(`Hello ${name.value}!`)
  if (event) {
    alert(event.target.tagName)
  }
}
</script>

<template>
  <button @click="greet($event, “Michael”)">Greet</button>
</template>

The original DOM event is accessible via the unique $event variable. Custom arguments can be added by calling the method in an inline handler instead of directly binding it to a method name.

Curated Vue Content

🛠️ PortalVue 3.0

👉🏻 Feature-rich portal plugin for Vue 3.

👉🏻 “A Portal Component for Vue 3, to render DOM outside of a component, anywhere in the document.”

📆 Vue.js Nation 2023

👉🏻 It’s all happening 25 & 26 January

👉🏻 Get to know Quasar, Vuetify 3, Nuxt 3, Pinia, Vite, Vitest, Volar, Vue.js, Typescript, VueUse and more!

👉🏻 Evan You is hosting the keynote for Vue.js Nation.

👉🏻 Register free!

🛠️ neodrag

👉🏻 This drag-and-drop solution includes packages for React, Svelte, Vue, Solid and vanilla JavaScript.

Quote of the week

JavaScript Tip: A function that throws an error if a required parameter is missing

Default function parameters allow named parameters to be initialized with default values if no value or undefined is passed.

We can use this approach to write a function that throws an error if a required parameter is missing:

const isRequired = () => {
  throw new Error('Parameter is required!')
}

const foo = (bar = isRequired()) => {
  console.log(bar)
}

foo() // throws the isRequired error
foo(undefined) // throws the isRequired error
foo(false) // logs "false"
foo(null) // logs "null"
foo('Test') // logs "true"

Curated Web Development Content

📕 Super Useful CSS Resources

👉🏻 A collection of 70 web-based tools that can generate pure CSS without the need for JavaScript or external libraries.

👉🏻 Categories include property generators, animations, backgrounds, typography, loaders, and layouts.

🛠️ Act

👉🏻 It allows users to run GitHub Actions locally.

👉🏻 It allows developers to receive fast feedback and features a local task runner.

👉🏻 It is available on Windows, macOS, and Linux.

Originally published at https://weekly-vue.news.

Hi 👋

Unfortunately, my newsletter service (Revue by Twitter) shuts down in January 2023 … in about four weeks….

Of course, I will continue publishing weekly Vue news!

I will migrate all existing subscribers to a custom solution: Store the subscriber list on Supabase, manage the content on my Nuxt 3-powered newsletter website and send the emails using Amazon SES.

Next week’s issue will look quite different but will contain the same high-quality content. If you encounter any problems, send me a email.

Have a great week ☀️

Vue Tip: Avoid Mutating a Prop Directly

If you are using Vue 3 + ESLint and try to mutate a prop in your Vue component, you should see the following error:

Unexpected mutation of “todo” prop. eslintvue/no-mutating-props

If you are using Vue 2, Vue will throw the following error/warning in your browser’s console:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value.

Explanation

First, we look at the official documentation to understand why Vue throws that error.

Why do we see the error

When objects and arrays are passed as props, while the child component cannot mutate the prop binding, it will be able to mutate the object or array’s nested properties. This is because JavaScript objects and arrays are passed by reference, and it is unreasonably expensive for Vue to prevent such mutations.

Why is it a problem

The main drawback of such mutations is that it allows the child component to affect the parent state in a way that isn’t obvious to the parent component, potentially making it more difficult to reason about the data flow in the future. As a best practice, you should avoid such mutations unless the parent and child are tightly coupled by design.

Recommended solution

In most cases, the child should emit an event to let the parent perform the mutation.

Demo

Let’s look at a code example. I’m using a Todo app to demonstrate the error. The source code is interactively available on StackBlitz.

Let’s start by taking a look at the TodoList.vue component:

TodoList.vue contains a reactive variable todos that includes an array of Todo items. In the template, each item is rendered via TodoItem.vue component:

Assuming ESLint is correctly configured, you should see the following ESLint error if you open TodoItem.vue in your editor:

Mutating props is an anti-pattern

We want to write components that are easy to maintain.

In a maintainable component, only the component itself should be able to change its own state.

Additionally, only the component’s parent should be able to change the props.

These two rules are essential to ensure Vue’s One-Way Data Flow to make our app’s data flow easier to understand.

⚠️ If we mutate the props, we violate both rules and break Vue’s data flow!

In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value.

Solution

In most cases, the error can be solved using a computed property.

In our example, instead of mutating the prop, we emit an event to the parent. The parent is then responsible for updating the Todo list correctly.

Let’s use a writeable computed property in TodoItem.vue. Its getter access the prop's value, and the setter emits an event to the parent:

Finally, we need to react to the emitted event in TodoList.vue and update the todos accordingly:

The prop is not mutated with this solution, and we correctly use the one-way data flow in our Vue application.

The amazing Michael Thiessen also wrote a detailed article about this topic.

Curated Vue Content

📕 Announcing Vite 4

vitejs.dev

👉🏻 Vite is now using Rollup 3, which allowed them to simplify Vite’s internal asset handling and has many improvements

🛠️ Maska 2.1

beholdr.github.io

👉🏻 A zero-dependency input mask

👉🏻 Happy in vanilla situations, but can also integrate with Vue 2/3.

🛠️ Harlem 3.0

harlemjs.com

👉🏻 A simple extensible state management for Vue 3.

👉🏻 Provides a simple functional API for creating, reading, and mutating state.

Quote of the Week

JavaScript Tip: Sum an array with reduce()

The reduce() method executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

The first time that the callback is run there is no “return value of the previous calculation”. If supplied, an initial value may be used in its place. Otherwise the array element at index 0 is used as the initial value and iteration starts from the next element (index 1 instead of index 0).

Perhaps the easiest-to-understand case for reduce() is to return the sum of all the elements in an array:

The reducer walks through the array element-by-element, at each step adding the current array value to the result from the previous step (this result is the running sum of all the previous steps) — until there are no more elements to add.

Curated Web Development Content

📅 JSWorld Conference 2023

jsworldconference.com

👉🏻 The largest JS conference in the world, and it’s back in Amsterdam on Feb. 8–10.

👉🏻 30 talks on Vite, Vue and Svelte by the Creator of Vite and Vue, Evan You and Core Team members.

📕 Tidy up your ES6 imports

antoinemesnil.hashnode.dev

Antoinse shows three ways how to tidy up ES6 imports:

👉🏻 Barrel pattern

👉🏻 Aliases

👉🏻 Order imports

📕 Testing static types in TypeScript

2ality.com

👉🏻 When it comes to TypeScript code there are far fewer options for testing its compile-type types.

📕 Speeding up the JavaScript ecosystem — one library at a time

marvinh.dev

👉🏻 Most popular libraries can be sped up by avoiding unnecessary type conversions or by avoiding creating functions inside functions.

📕 TypeScript 5.0 Iteration Plan

github.com

👉🏻 Eagerly awaiting TypeScript 5?

👉🏻 The first beta is due in late January 2023.

📕 Why would anyone need JavaScript generator functions?

jrsinclair.com

👉🏻 James explains that generator functions in JS may not be essential but they do have utility and can change how you approach certain problems.

📕 Templating in HTML

kittygiraudel.com

👉🏻 Kitty explains why the template element in HTML is pretty handy.

📕 Tips for analyzing logs

jvns.ca

14 useful tips including the following:

👉🏻 Search for the request’s ID

👉🏻 Build a timeline

🛠️ Modern Errors

github.com

👉🏻 A JS/TS library for handling errors

👉🏻 It features simple patterns for creating error classes, setting error properties, wrapping or aggregating errors, and separating known and unknown errors.

🛠️ Snow.js

embed.im

👉🏻 Add a snow effect to a web page

👉🏻 It’s that time… (in Germany at least)

Hi 👋

I’m still busy working on my video content but I found the time to publish a new blog post about a table of contents component for Nuxt 3 and Nuxt Content. You can find the link below.

I’m also planning to rewrite my GitHub Traffic Viewer with Nuxt 3 & VueFire.

I put a lot of effort into this weekly newsletter, and you can support my work in the following ways:

• Reply to this mail with a short testimonial about why you love this newsletter. I will reference it at weekly-vue.news.
• Share weekly-vue.news on social media and help me spread the word.
• Buy me a coffee ☺️

Have a great week ☀️

Vue Tip: Dynamically Add & Remove Route While App Is Running

Adding routes to your router is usually done via the routes option, but in some situations, you might want to add or remove routes while the application is already running.

Vue Router provides two functions for dynamic routing: router.addRoute() and router.removeRoute()

Adding Routes

addRouteonly registers a new route. If you want to navigate to the newly added route, you need to manually navigate with router.push() or router.replace().

It’s also possible to add nested routes:

Removing Routes

There are three ways to remove an existing route:

• Use router.removeRoute():

• Use the callback returned by router.addRoute():

• Add a route with a conflicting name. If you try to add a route with the same name as an existing route, it will remove the first route and add the new route:

StackBlitz Demo

Check the official documentation for more details about this feature.

Curated Vue Content

📕 Create a Table of Contents With Active States in Nuxt 3 — mokkapps.de

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.

📕 Migrating from Nuxt 2 to Nuxt 3

debbie.codes

👉🏻 Debbie shares with you the steps she took to migrate her site from Nuxt 2 to Nuxt 3.

📕 Nuxt 3 + useFetch = Reactive Vue at its best 🔥

medium.com

👉🏻 Vue utilizes reactive programming.

👉🏻 By using useFetch provided by Nuxt 3 we can get the most out of this programming paradigm and reduce code complexity.

📕 Event Bus Pattern in Nuxt 3 with Full TypeScript Support

dev.to

👉🏻 Using an Event Bus is an easy way to communicate different parts of our application.

👉🏻 In this article, Isreal learns us how to implement it with Nuxt 3 and TypeScript.

Quote of the Week

JavaScript Tip: Measuring the perfomance of functions

JavaScript Tip: Measuring the performance of functions

We can use the Performance Web API to check the execution time of our code.

The performance.now function returns the value of time in milliseconds.

The returned value represents the time elapsed since the time origin. The time origin is a standard time which is considered to be the beginning of the current document’s lifetime.

Curated Web Development Content

📕 35 Misconceptions about date and time

www.meziantou.net

👉🏻 Everybody uses the same calendar.

👉🏻 1 year equals 12 months.

👉🏻 GMT is the same as UTC.

👉🏻 Time zone offsets are always integer numbers of hours.

👉🏻 Weeks start on Monday. And more.

📕 Advanced TypeScript

angularexperts.io

Get familiar with some of Typescript’s greatest advanced features:

👉🏻 Union and intersection types

👉🏻 Keyof

👉🏻 Typeof

👉🏻 Conditional types

👉🏻 Utility types

👉🏻 Infer type

👉🏻 Mapped types

📕 Converting the TypeScript Codebase to Modules

github.com

👉🏻 The TypeScript team recently migrated the TypeScript codebase from legacy namespaces to ECMAScript modules.

👉🏻 It improved compiler performance by 10–25%.

📕 Data Structures In Frontend JavaScript In The Real World

profy.dev

👉🏻 You will see examples that you might recognize from your own code or that can use in your projects or on the job.

📕 The Perfect Commit

simonwillison.net

👉🏻 The perfect commit contains the implementation, tests to show the implementation works, updated documentation, and a link to an issue thread providing further context.

🛠️ git-delete-merged-branches

github.com

👉🏻 A command-line tool for keeping repositories clean.

👉🏻 It supports deletion of both local and remote branches and workflows with multiple release branches.

🛠️ Icon Maker by Raycast

icon.ray.so

👉🏻 A tool to create beautiful icons for your projects, apps, or Raycast extensions with ease.

🛠️ OverlayScrollbars

kingsora.github.io

👉🏻 JS scrollbar plugin to replace native scrollbars

👉🏻 Provides custom styleable overlay scrollbars while keeping a native functionality and feel.

👉🏻 v2.0 is a full rewrite in TypeScript and smaller, too.

Time to relax and destroy something

🛠️ Simulate an Asteroid Impact in Your Hometown — neal.fun

👉🏻 Asteroid Launcher is a website that allows users to simulate how an asteroid might destroy any given locale.

I’m a big fan of a table of contents (ToC) on the side of a blog post page, especially if it is a long article. It helps me gauge the article’s length and allows me to navigate between the sections quickly.

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.

Originally published at https://mokkapps.de.

Hi 👋

My plans for this week are creating new video content for my brand-new YouTube channel.

I tried many different screencast tools but finally decided to buy Screenflow which is a very powerful tool.

Have a great week ☀️

Vue Tip: Force-Enable Vue Devtools in Production Build

Often we cannot reproduce a bug in the development environment and need to debug it in production.

Unfortunately, in most cases, the Vue Devtools browser extension is disabled in production builds:

Luckily, there is a way to force-enable it in production builds.

Open Console in Browser DevTools

First, we need to open the console in your browser’s DevTools:

Windows or Linux: Ctrl + Shift + J

Mac: Cmd + Option + J

Access Vue App Instance

Now we need to get access to the Vue app instance:

If you are using Vue 2 you need to call:

For Vue 3, you need to run the following code in the console:

The app variable contains a reference to the Vue app instance:

We can now store the app version in a new variable called version:

Access Vue Devtools Instance

In the next step, we need access to the Vue Devtools instance which is available via window.__VUE_DEVTOOLS_GLOBAL_HOOK__:

We store it in a variable called devtools and set its property enabled to true:

Finally, we need to re-initialize the Vue app instance:

The last step is to refresh the browser DevTools to be able to detect the changes on the Vue app instance:

Windows or Linux: Alt + R

Mac: Option + R

Now the Vue Devtools extension is enabled in the production build:

ℹ️ If you don’t want to do this on your own, check the “Vue force dev” Chrome extension

Curated Vue Content

📕 Optimizing A Vue App

www.smashingmagazine.com

👉🏻 In this article, Michelle Barker will walk you through some of the front-end optimization tips to keep our Vue apps as efficient as possible.

📕 Investing in Vue, Nuxt, and VueFire

firebase.blog

👉🏻 Google’s Firebase platform is building a ‘first class’ experience for Vue developers, including support for Nuxt.

📕 A domain-driven Vue.js Architecture

medium.com

👉🏻 “For our reasonably large enterprise Vue.js app, this approach helped us a lot in clarifying responsibilities and enforcing separation of concerns on an architectural level. “

🛠️ pinceau

github.com

👉🏻 A CSS-in-TypeScript framework built for Vue

👉🏻 Still early days but has the perk of seamless integration into Vue, and works with Nuxt, Vitesse, and Vite.

Quote of the Week

JavaScript Tip: Clean up promises similarly to a try/catch/finally block

The finally() method of a Promise schedules a function, the callback function, to be called when the promise is settled (fullfilled or rejected).

It’s very convienient for cleaning up similarly to try/catch/finally blocks.

Like then() and catch(), it immediately returns an equivalent Promise object, allowing you to chain calls to another promise method, an operation called composition.

This lets you avoid duplicating code in both the promise’s then() and catch() handlers.

Curated Web Development Content

📕 Zod Tutorial

www.totaltypescript.com

👉🏻 How to use the schema validation library Zod to check types at runtime.

👉🏻 Explained by none other than the excellent Matt Pocock.ypeScript-first schema declaration and validation library. In this tutorial, Matt Pocock has prepared a set of exercises that will help you level up.

📕 An Interactive Guide to Flexbox

www.joshwcomeau.com

👉🏻 A new, interactive explainer from Josh, with over 20 demos showing off how Flexbox works.

📕 Complete rewrite of ESLint

github.com

👉🏻 ESLint is joining forces with TSLint and planning a complete rewrite to prepare for “the next ten years of linting.”

📕 Futuristic CSS

www.smashingmagazine.com

👉🏻 Future CSS trends and takes a look at some far-fetched and futuristic CSS features that might one day make their way to the browses, such as CSS toggles, switch function, intrinsic typography. And more.

📹 You are not your user

www.youtube.com

👉🏻 This is a great, quick explainer on the importance of including everyone from the beginning of your project to ensure accessible outcomes.

🛠️ trash-cli

github.com

👉🏻 Stop using rm -rf to delete files on your computer.

👉🏻 In contrast to rm which is dangerous and permanently deletes files, this only moves them to the trash, which is much safer and reversible.

Hi 👋

I’m still experimenting with my quick-tip videos; creating these videos is a lot of fun. You can find them on my social media profiles (Twitter, LinkedIn, Instagram).

I put a lot of effort into this weekly newsletter, and you can support my work in the following ways:

• Reply to this mail with a short testimonial about why you love this newsletter. I will reference it at weekly-vue.news.
• Share weekly-vue.news on social media and help me spread the word.
• Buy me a coffee ☺️

Have a great week ☀️

Vue Tip: Use Provide & Inject to Avoid Prop Drilling

Props are the standard way to pass data from the parent to a child component.

This works well in simple scenarios but has some drawbacks if a deeply nested component needs data from a distant ancestor component:

Take a look at the <Footer> component: It needs to declare and pass the props to the <DeepChild> component, even if it does not care about them. Imagine a longer component chain between the parent and the deep child component; all would be affected along the way. This is called "prop drilling" and is no fun for us developers.

Usually, we solve this problem by using state management solutions like Pinia.

But sometimes, we want to share data from a parent component to all its children components without using a store. If you are using Vue 2, you must either use a state management solution or pass the props down to the deeply nested component.

Vue 3 introduced a new concept to solve prop drilling with provide and inject :

The principle is simple:

• In the parent component, we declare the variables (props, data, computed, …), which will be accessible to all descendants via the provide key.
• From any child component, we specify the list of injectable variables via the inject key

Provide

• To provide data to a component’s descendants, we use the provide() function:

The first argument of the provide() function is the injection key, which can be a string or a Symbol. The descendant component uses this key to look up the desired value to inject. The second argument is the value, which can be of any type, including reactive state such as refs. Using reactive values in the provide() function establishes a reactive connection to the descendant component that injects the value.

As you can see in the above example, it is valid to call provide multiple times with different injection keys and values.

Inject

To inject data provided by an ancestor component, we use the inject() function:

For more details, check the official docs.

Curated Vue Content

📕 Nuxt 3 Client-Side Error Handling

masteringnuxt.com

👉🏻 Michael explains the NuxtErrorBoundary component that comes with Nuxt 3.

👉🏻 It makes handling client-side errors a breeze.

📕 Comment Threads with Recursive Components in Vue 3

www.simplethread.com

👉🏻 It’s common for applications to use threaded comment replies for managing communication.

👉🏻 In Vue, we can use recursion to help manage displaying those threads.

TypeScript Tip: Make every property of a certain type required

Required<Type> constructs a type consisting of all properties of Type set to required:

It’s the opposite of Partial.

Quote of the Week

Curated Web Development Content

📕 Clean Code in TypeScript

javascript.plainenglish.io

👉🏻 Don’t add unneeded context

👉🏻 Use enum

👉🏻 Function names should say what they do

👉🏻 Prefer functional programming over imperative programming

👉🏻 Avoid negative conditionals

👉🏻 and more…

📕 Using TypeScript with Node.js

www.robinwieruch.de

👉🏻 This tutorial is part 2 of 3 of a series.

👉🏻 It shows how to we migrating a Node.js project to TypeScript.

📕 The Evolution Of Scalable CSS

frontendmastery.com

👉🏻 “In this post, we’ll develop a deeper understanding of CSS by diving into the underlying issues that make it difficult to scale.”

📕 No architecture is better than bad architecture

rogovoy.me

👉🏻 Building a solid architecture can be a waste of energy and can stop teams from working fast.

📕 The HTTP crash course nobody asked for

fasterthanli.me

👉🏻 “The inner workings of HTTP/2 were intimidating and mysterious before I wrote this article, and now they feel somewhat approachable.”

🛠️ HyperUI

github.com

👉🏻 A collection of free Tailwind CSS components that can be used in your next project.

🛠️ TypeRunner

github.com

👉🏻 A TypeScript compiler that can do type checking up to 1000x faster and claims to “bring TypeScript to the next level.”

🛠️ Barrelsby

github.com

👉🏻 Automatically create TypeScript barrels for your entire code base.

👉🏻 Barrels help to simplify large blocks of import statements at the top of files and help to group up related functionality.

😂 Password Purgatory

passwordpurgatory.com

👉🏻 “an intentionally infuriating API to request inane and ultimately unachievable password criteria intended to deliberately frustrate the user.”

Hi 👋

Since last week, Nuxt 3 is finally stable 🥳

I’m working on a new blog post about a ToC (Table of Contents) component for Nuxt Content v2.

Additionally, I’m experimenting with short video clips about my tips.

Here is an example: https://www.loom.com/share/0b00767197a64c79b4fa2c2ae0ac5f37

Let me know what you think about these kind of videos.

Have a great week ☀️

Vue Tip: Change the Interpolation Delimiter

It is possible to adjust the delimiters used for text interpolation within the template.

This is typically used to avoid conflicting with server-side frameworks that also use mustache syntax.

The default delimiters are the double curly braces (called mustache syntax): {{ }}

We can change the delimiter in the config object of the application instance:

👉🏻 Try it out

⚠️ Important

The compilerOptions config option is only respected when using the full build (i.e. the standalone vue.js that can compile templates in the browser).

If you are using the runtime-only build with a build setup, checkout the official docs.

Curated Vue Content

📕 Nuxt 3 State Management: Pinia vs useState

www.vuemastery.com

👉🏻 In this article, Michael discusses the main differences between Pinia and useState and when to use each.

📕 Is Turbopack really 10x Faster than Vite?

github.com

👉🏻 Vue and Vite’s Evan You decided to run some benchmarks and ended up pretty deep down the rabbit hole.

🛠️ Online Options API to Composition API converter for Vue

tjk.github.io

JavaScript Tip: Manipulate URLs

JavaScript has a built-in API that allows you to easily manipulate URLs and get their search parameters:

Curated Web Development Content

📕 The State of Frontend in 2022 survey

tsh.io

👉🏻 “real day-to-day perspective from frontend professionals of all levels and backgrounds.”

👉🏻 I love to see Vue on the third place of used & liked frameworks 💚

📕 What is a realm in JavaScript?

weizman.github.io

👉🏻 A realm is essentially the complete execution environment for a JavaScript program.

👉🏻 Interesting if you want to know how JavaScript works under the hood.

📕 State of CSS 2022

web.dev

👉🏻 This post is the article form of the State of CSS talk given at Google IO 2022.

👉🏻 It provides a brief overview of the new features and resources for more information.

📹 Programming in TypeScript

www.freecodecamp.org

👉🏻 5 hour YouTube course.

👉🏻 This beginner course will teach you everything you need to get started coding TypeScript.

🛠️ JavaScript Booster (VS Code Extension)

marketplace.visualstudio.com

👉🏻 Add quick actions to VS Code.

👉🏻 Useful for IntelliJ users who are used to these handy actions.

🛠️ 98.css — jdan.github.io

👉🏻 98.css is a CSS library for building interfaces that look like Windows 98

Quote of the Week

Hi 👋

I’m available for work from 9st January 2023, see tweet below.

This week I’ll work on a theme for Slidev, an amazing tool for developers to create presentations.

Have a great week ☀️

Vue Tip: Defining and Registering Vue Web Components

Web Components is an umbrella term for a set of web native APIs that allows developers to create reusable custom elements. Vue has excellent support for both consuming and creating custom elements.

The main advantage of web components is that they can be used with any framework or even without a framework.

In three simple steps, let’s look at how we can create a web component from a Vue SFC (single-file component).

1. Create the custom element

To create the custom element, we use defineCustomElement:

You may have noticed that our SFC uses the special file ending .ce.vue.

It inlines the SFC’s <style> tags as strings of CSS and exposes them under the component's styles option.

During production build with default tooling setup, the <style> inside the SFCs are extracted and merged into a single CSS file. But for the custom component, the <style> tags should be injected into the custom element's shadow root.

2. Register the custom element with the DOM

Next, we can register the custom element using the define method. After registration, all <my-example> tags on the page will be upgraded afterward:

3. Use the custom element in your HTML

Finally, we can use our custom element in HTML:

Check out the docs for more details on how this works.

Curated Vue Content

📕 Hybrid Rendering in Nuxt.js 3

vueschool.io

👉🏼 Nuxt 3 has a lot of rendering options. There’s SSR, SSG, SPA…

👉🏻 In this article, Daniel breaks down each option.

📕 A guide to automated testing in Vue with Cypress

blog.logrocket.com

👉🏻 In this article, Paul teaches us how to test individual Vue components with Cypress.

👉🏻 “If you’re using Vue, Cypress is one of the best tools available for testing your application.”

📹 Vue’s Road to Vite

viteconf.org

👉🏻 As Haoqun shared in his talk at ViteConf, it’s not only the speed that makes Vite attractive.

👉🏻 Slides: https://docs.google.com...

TypeScript Tip: Avoid Default Exports

Let’s first take a look at an example with default exports using export default:

And now the same example but without the default export:

Why is it better?

🤜🏻 Better refactoring support

🤜🏻 Typo protection

🤜🏻 Better tree shaking

🤜🏻 Auto import / completion

Curated Web Development Content

📕 Type-level TypeScript

type-level-typescript.com

👉🏻 An online course to take your TypeScript skills from intermediate to advanced.

👉🏻 It will give you a solid understanding of the type system’s fundamentals and guide you through its most advanced features.

📕 Let’s Talk About Web Components

bradfrost.com

👉🏻 Brad looks at how web components can help deliver design system component libraries and their compatibility with JS libraries and frameworks.

📕 Toyota Suffered a Data Breach by Accidentally Exposing A Secret Key Publicly On GitHub

blog.gitguardian.com

👉🏻 Toyota revealed they had accidentally exposed a credential allowing access to customer data in a public GitHub repo for nearly 5 years.

🛠️ DevTools-X

github.com

👉🏻 A cross-platform collection of offline-first developer utilities similar to those native to Mac/Windows.

👉🏻 Includes utilities for color, images, JSON, Regex, SQL, and even a live React playground.

🛠️ SurveyJS

surveyjs.io

👉🏻 A form builder library for creating data-driven, multi-langauge survey forms.

👉🏻 It has a ‘pro’ level and some related commercial services but is MIT licensed at the base.

🛠️ Day.js

day.js.org

👉🏻 Fast 2kB alternative to Moment.js with the same modern API.

Quote of the Week

Last week I finally managed to deploy a static version of my portfolio website (developed with Nuxt 3) to Netlify.

This week I’ll work on some bugfixes for CodeSnap.dev and maybe I have time to start writing a new blog post. The next article will be about the Table of Contents component I developed for my portfolio website.

Have a great week ☀️

Vue Tip: Share Composable State Across Components

We create a new state on each function call if we define state in a Vue composable. But sometimes, we want to sync the composable state across components.

Let’s take a look at a simple example:

We define a simple reactive variable cart inside the useCart composable. Every time a component calls useCart, a new state is created.

The following Stackblitz includes a running demo. Click “Add to cart” on “Component 1” and “Component 2”, and you can see that every component has it’s own cart state:

Vue Share Composable State Across Components — StackBlitz — stackblitz.com

To keep the same state between every useCart instance, we need to lift he state up outside the function, so it's created only once:

You can test it by yourself in the Stackblitz demo above: Click “Add to shared cart” on “Component 1” and “Component 2”, and you can see that they now share the same state.

Curated Vue Content

📕 Dev SSR on Nuxt with Vite

antfu.me

👉🏻 Anthony Fu guides you through the inner workings of Server-Side rendering in dev mode with Nuxt 3 and how this inspired a larger ecosystem.

📕 Let’s use Vue3 Features in Your Vue2 Project

medium.com

👉🏻 Chamara explain, how to upgrade your existing Vue2 project to Vue 2.7

👉🏻 He’ll also explain how to use the mentioned backported features in your project explaining a small application.

📹 How Vite Makes Nuxt Possible

www.youtube.com

👉🏻 In this talk from ViteConf 2022, Nuxt core team member Daniel Roe explains how Vite makes Nuxt 3 possible

🛠️ Start a Nuxt project

nuxt.new

👉🏻 Open a Nuxt starter on CodeSandbox or StackBlitz to get up and running in a few seconds.

🛠️ Vuesax

vuesax.com

👉🏻 A framework of UI components created with Vuejs to make projects easily and with a unique and pleasant style.

TypeScrip Tip: Lock Types Using Const Assertion

When we construct new literal expressions with const assertions, we can signal to the language that

- no literal types in that expression should be widened (e.g. no going from “hello” to string)

- object literals get readonly properties

- array literals become readonly tuples

Curated Web Development Content

🤣 CSS debugging: The console.log of CSS

📕 Ten Years of TypeScript

devblogs.microsoft.com

👉🏼 TypeScript’s PM reflects on how its ideas have stood the test of time and looks forward to another ten years.

📕 Fully Typed Web Apps (from Kent C. Dodds)

www.epicweb.dev

👉🏻 “Type safety is something that’s not only valuable, but achievable across boundaries end to end.”

📕 Schema validation in TypeScript with Zod

blog.logrocket.com

👉🏻 Zod is a tool that fills this TypeScript blindspot and helps with type safety during runtime.

👉🏻 It can help you build a pretty flexible Schema design and run it against a form or user input.

Quote of the Week