Exclusive tips every week

Hey!

Happy New Year's Eve! It's been an amazing year for Vue and Nuxt. Wishing you all the best for 2026.

Let's close out the year with some tips and articles.

— Michael

🔥 Creating Magic with Context-Aware Components

Context-aware components are "magical" — they adapt to what's going on around them automatically, handling edge cases, state sharing, and more.

There are 3 main types of context-aware components, but configuration is the one I find most interesting.

1. State Sharing

When you break up a large component into smaller ones, they often still need to share state.

Instead of pushing that work on whoever's consuming the components, you can make this happen "behind the scenes."

To give you more flexibility, you may break up a Dropdown component into Select and Option components. But to make it easier to use, the Select and Option components share the selected state with each other:

<!-- Used as a single component for simplicity -->
<Dropdown v-model="selected" :options="[]" />

<!-- Split up for more flexibility -->
<Select v-model="selected">
  <Option value="mustard">Mustard</Option>
  <Option value="ketchup">Ketchup</Option>
  <div class="relish-wrapper">
    <Option value="relish">Relish</Option>
  </div>
</Select>

2. Configuration

Sometimes component behaviour needs to change based on what's going on in the rest of the application. This is often done to automagically handle edge cases that would otherwise be annoying to deal with.

A Popup or Tooltip should reposition itself so it doesn't overflow out of the page. But if that component is inside a modal, it should move, so it doesn't overflow out of the modal.

This can be done automagically if the Tooltip knows when it's inside a modal.

3. Styling

You already create context-aware CSS, applying different styles based on what's happening in parent or sibling elements.

.statistic {
  color: black;
  font-size: 24px;
  font-weight: bold;
}

/* Give some separation between stats
   that are right beside each other */
.statistic + .statistic {
  margin-left: 10px;
}

CSS variables let us push this further, allowing us to set different values in different parts of the page.

🔥 Easy Unit Testing in Nuxt

For your unit tests, @nuxt/test-utils lets you opt-in to a Nuxt environment by adding .nuxt. to the filename of your test:

./tests/MyComponent.nuxt.test.ts

You can also add a special comment at the top of the file:

@vitest-environment nuxt

Or enable the environment for all Vitest tests in your config:

// vitest.config.ts
import { defineVitestConfig } from '@nuxt/test-utils/config';

export default defineVitestConfig({
  test: {
    environment: 'nuxt'
  },
};

🔥 Mock Nuxt Components When Testing

When testing, you'll often need to shallow render a component — mocking out any descendent components to keep your test simpler.

With @nuxt/test-utils you can use the mockComponent utility method to help with that:

import { mockComponent } from '@nuxt/test-utils/runtime';

// Use Options API to configure
mockComponent('MyComponent', {
  props: {
    value: String
  },
  setup(props) {
        // ...
  },
});

// Or use a separate file to clean things up (and use <script setup>)
mockComponent('MyComponent', () => import('./MyComponent.mock.vue'));

// ...tests

📜 Adding Drag and Drop (video)

In this video from LearnVue, we see how easy it can be to add a powerful drag and drop system in to your app.

Check it out here: Adding Drag and Drop (video)

📜 Bulletproof Watchers in Vue

Learn how to write bulletproof watchers in Vue, when to use onCleanup and onWatcherCleanup, and how to build reusable cleanup helpers.

Check it out here: Bulletproof Watchers in Vue

💬 Chaos

"Automating chaos just gives faster chaos." — Mark Fewster

🧠 Spaced-repetition: From Options to Composition — The Easy Way

The best way to commit something to long-term memory is to periodically review it, gradually increasing the time between reviews 👨‍🔬

Actually remembering these tips is much more useful than just a quick distraction, so here's a tip from a couple weeks ago to jog your memory.

You can use reactive to make the switch from the Options API a little easier:

// Options API
export default {
  data() {
    username: 'Michael',
    access: 'superuser',
    favouriteColour: 'blue',
  },
    methods: {
    updateUsername(username) {
      this.username = username;
    },
  }
};

We can get this working using the Composition API by copying and pasting everything over using reactive:

// Composition API
setup() {
  // Copy from data()
  const state = reactive({
    username: 'Michael',
    access: 'superuser',
    favouriteColour: 'blue',
  });

  // Copy from methods
  updateUsername(username) {
    state.username = username;
  }

    // Use toRefs so we can access values directly
    return {
    updateUsername,
    ...toRefs(state),
  }
}

We also need to make sure we change this → state when accessing reactive values, and remove it entirely if we need to access updateUsername.

Now that it’s working, it’s much easier to continue refactoring using ref if you want to — or just stick with reactive.

🔗 Want more Vue and Nuxt links?

Michael Hoffman curates a fantastic weekly newsletter with the best Vue and Nuxt links.

Sign up for it here.