Vue Nuxt
Tips & Tricks

A collection of Vue, Nuxt and Vite tips, tricks and good practices.

One of the most common mistakes I see across Vue codebases is the misuse of `ref()`. You don't have to wrap every variable in `ref()`, only wrap it when you need reactivity. 💡

<script setup>
// this doesn't need to be wrapped in ref()
// no need for reactivity here
const links = [
    name: 'about',
    href: '/about'
    name: 'terms of service',
    href: '/tos'
    name: 'contact us',
    href: '/contact'

// isActive flag needs to be reactive to reflect UI changes
// that's why it's a good idea to wrap tabs into ref
const tabs = ref([
    name: 'Privacy',
    url: '/privacy',
    isActive: true
    name: 'Permissions',
    url: '/permissions',
    isActive: false