<NuxtLayout> name prop not reactive

Question

I have a component that should switch the used layout based on the current breakpoint.

<script setup lang="ts">
import { computed } from "vue";
import { breakpointsTailwind } from "@vueuse/core";

const breakpoints = useBreakpoints(breakpointsTailwind);

const layoutName = computed(() =>
  breakpoints.smaller("md") ? "sidenav-mobile" : "sidenav-desktop",
);
</script>

<template>
  <div>
    {{ breakpoints.smaller("md") }} <!-- this is reactive -->
    <NuxtLayout :name="layoutName"> <!-- layoutName is not reactive -->
      <template #links>
        <slot name="links"></slot>
      </template>
    </NuxtLayout>
  </div>
</template>

When resizing the window below or above the breakpoint, my debug output {{ breakpoints.smaller("md") }} correctly changes to true or false, but the layout does not switch unless I reload.

What am I doing wrong?

Answer 1

It returns a ref. In templates they're unwrapped, so it works "as expected".

In your computed you need to add a .value to read the current value.