Vue stuff

3 min read
~457 words
NO DATE
DRAFT

Only top-level refs are unwrapped in your <template>

You can't use double quotes inside dynamic props

Vue requires double quotes (") around your dynamic props, so you can't use them in the value of your prop. Instead you can only use single quotes (') and backticks (`) in your template. If you really need to use double quotes you need to make a variable in your <script> section.

For example, these work:

vue
<script setup lang="ts">
const stringWithDoubleQuotes = '"'
</script>
 
<template>
  <input :value="'hello'" />
  <input :value="`hello`" />
  <input :value="stringWithDoubleQuotes" />
</template>

But the following don't, even though the syntax highlighting looks okay. See also in the Vue SFC Playground

vue
<template>
  <input :value="'"'" />
  <input :value="`"`" />
  <input :value="'\"'" />
</template>

Route params merging in vue-router (and Nuxt)

If you switch routes using the route's name (vs using the actual path), you only need to provide params that have changed!! For example, if you're on the /agents/agent-1/tasks/task-1 route and you want to navigate to the /agents/agent-1/tasks/task-2 route, you can do this

vue
<template>
  <Link
    :to="{
      name: 'agent-agentId-tasks-taskId',
      params: {
        taskId: 'task-2',
      },
    }"
  >
    To next task
  </Link>
</template>

or

typescriptjavascript
const router = useRouter()
 
router.push({
  name: 'agent-agentId-tasks-taskId',
  params: {
    taskId: 'task-2',
  },
})
const router = useRouter()
 
router.push({
  name: 'agent-agentId-tasks-taskId',
  params: {
    taskId: 'task-2',
  },
})

Warning

This only works for route params, but NOT query. The query is overwritten every time you navigate to a new page.

<template>s behave differently if they have no v-* attributes

Probably don't use proxyRefs

What is proxyRefs?

proxyRefs is a nice utility that unwraps ref keys on an object (can't find the docs for this 😕). For example, the following 2 snippets have the same effect on the message ref.

Without proxyRefs
typescriptjavascript
const message = ref('hi')
 
console.log(message.value) // 'hi'
 
message.value = 'hello'
const message = ref('hi')
 
console.log(message.value) // 'hi'
 
message.value = 'hello'
With proxyRefs
typescriptjavascript
const message = ref('hi')
 
const proxyObject = proxyRefs({
  message,
})
 
console.log(proxyObject.message) // 'hi'
 
proxyObject.message = 'hello' // updates the underlying `message` ref
const message = ref('hi')
 
const proxyObject = proxyRefs({
  message,
})
 
console.log(proxyObject.message) // 'hi'
 
proxyObject.message = 'hello' // updates the underlying `message` ref

Sidenote: I can't find any reference to this in the docs, so maybe we're not supposed to use it at all , and reactive and shallowReactive do the same thing and more.

Using proxyRefs can make it harder to reason about when you're accessing a "reactive" value. This is an especially big issue with custom composables / hooks if you wrap the whole return value in proxyRefs and destructure its return value:

typescriptjavascript
export const useStuff = () => {
  const message = ref('hi')
 
  return proxyRefs({ message })
}
 
// in another file...
 
/**
 * Here, `message` will just be a string, and not a ref, so anywhere you use
 * `message` won't receive updates!!!
 */
const { message } = useStuff()
export const useStuff = () => {
  const message = ref('hi')
 
  return proxyRefs({ message })
}
 
// in another file...
 
/**
 * Here, `message` will just be a string, and not a ref, so anywhere you use
 * `message` won't receive updates!!!
 */
const { message } = useStuff()