utilities

12 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

defineNuxtComponent helper function

defineNuxtComponent() is a helper function for defining type safe Vue components using Options API. It is similar to Vue's defineComponent() but also adds support for asyncData and head component options. The recommended way of declaring Vue components in Nuxt is using <script setup lang="ts">.

asyncData method in defineNuxtComponent

The asyncData() method can be used within a component definition created with defineNuxtComponent(). This method allows fetching data server-side before rendering the component. It receives no parameters and should return an object containing the data properties. Example: export default defineNuxtComponent({ asyncData () { return { data: { greetings: 'hello world!' } } } })

head method in defineNuxtComponent

The head() method can be used within a component definition created with defineNuxtComponent(). This method accepts a nuxtApp parameter and returns an object containing head metadata properties like title. Example: export default defineNuxtComponent({ head (nuxtApp) { return { title: 'My site' } } })

defineNuxtComponent asyncData example

Example of using asyncData() with defineNuxtComponent(): export default defineNuxtComponent({ asyncData () { return { data: { greetings: 'hello world!', }, } }, })

defineNuxtComponent head example

Example of using head() with defineNuxtComponent(): export default defineNuxtComponent({ head (nuxtApp) { return { title: 'My site', } }, })

refreshCookie signature and purpose

The refreshCookie function refreshes cookie values returned by useCookie. It takes a single parameter 'name' of type string and returns void. It is useful for manually updating the useCookie ref when a new cookie value has been set in the browser. Available since Nuxt v3.10.

refreshCookie example with login flow

Example showing refreshCookie usage: const tokenCookie = useCookie('token'); const login = async (username, password) => { const token = await $fetch('/api/token', { /** ... */ }) refreshCookie('token') }; const loggedIn = computed(() => !!tokenCookie.value)

cookieStore experimental feature auto-refresh

Since Nuxt v3.12.0, the experimental cookieStore option is enabled by default and automatically refreshes useCookie values when cookies change in the browser, making manual refreshCookie calls unnecessary in that case.

showError utility function

showError is a utility function that displays a full-screen error page. It accepts an error parameter that can be a string, Error object, or a partial object with properties: cause, data, message, name, stack, status, statusText. The error is set in state using useError() to create a reactive and SSR-friendly shared error state across components. showError calls the app:error hook.

showError parameter type

The error parameter for showError can be: string | Error | Partial<{ cause, data, message, name, stack, status, statusText }>

showError example with string

showError('😱 Oh no, an error has been thrown.')

showError example with object

showError({ status: 404, statusText: 'Page Not Found' })

Give your agent this brain