Supercharging Nuxt Apps with VueUse

If you’ve built anything with Nuxt, you’ve already bought into composables. For example, if you’ve used useFetch for data fetching or useRoute for routing, you’ve been working with composables.

Nuxt pushes you toward small, reusable pieces of logic. VueUse simply extends that idea to the stuff you deal with every day (stuff you deal with but don’t really want to think about)

What VueUse Actually Is

VueUse is a collection of utility composables for Vue. It covers things like browser APIs, state syncing and performance helpers. Nothing abstract, just composables you’d probably end up writing yourself anyway.

Look at this example:

      import { useMouse } from '@vueuse/core'

const { x, y } = useMouse()

    

As simple as that, you can access reactive mouse position. No setup. No cleanup.

VueUse Feels Native in Nuxt

The good thing about using VueUse in Nuxt apps is that it feels very native and without friction:

• most composables are auto-imported
• SSR is already handled
• Browser APIs are safely wrapped

You don’t need to think about process.client o onMounted for basic stuff.

For example, the following works in a Nuxt app without messing with SSR:

      import { useNetwork } from '@vueuse/core'

const { isOnline, offlineAt } = useNetwork()

    

It also really shines when it comes to having less boilerplate and more shipping. These parts are usually the more boring parts that are not difficult, but maybe annoying.

Take localeStorage:

      const token = useLocalStorage('token', null)

    

Now it’s:

• reactive
• persistent
• type-safe
• synced automatically

No watchers, no JSON parsing and no edge cases.

Stuff You’ll Actually Use in Real Nuxt Apps

Let’s look at 3 examples that you might actually end up using in real projects.

Dark Mode

Dark mode is basically a requirement now, and VueUse makes it trivial.

      const isDark = useDark()
const toggleDark = useToggle(isDark)

    

Drop that into a layout or header and you’re done.

Responsive Logic

Sometimes CSS isn’t enough, and you need logic that reacts to screen size.

      import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints(breakpointsTailwind)

const smAndLarger = breakpoints.greaterOrEqual('sm') // sm and larger
const largerThanSm = breakpoints.greater('sm') // only larger than sm
const lgAndSmaller = breakpoints.smallerOrEqual('lg') // lg and smaller
const smallerThanLg = breakpoints.smaller('lg') // only smaller than lg

    

Great for conditionally rendering components in Nuxt layouts.

Debounced Inputs

Debouncing is a common practice these days; search bars, filters or live queries it is everywhere.

      const search = ref('')
const debouncedSearch = useDebounce(search, 300)

    

With VueUse you can implement a clean, readable, and easy to reason about debounce mechanism.

But why not writing your own composables?

Writing custom composables is great. You should still do it. But for common problems, VueUse is already tested and edge cases are handled. APIs are consistent and you’d end up with less repeated code. Think of it as the difference between crafting logic and rebuilding utilities.

Lastly

VueUse is fully tree-shakable. If you don’t use a composable, it won’t end up in your bundle. Nuxt encourages composables and VueUse gives you really good ones.

If you’re building Nuxt apps and not using VueUse yet, you’re probably working harder than you need to. So give it a try today and you’ll spend less time with setup and maintenance and more time building actual features.