new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Nuxt · Getting started · all subjects

migration/component-options

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

fetch hook replaced by useAsyncData or useFetch

In Nuxt 3, the fetch hook is replaced by useAsyncData or useFetch composables in your component. useAsyncData replaces both the asyncData and fetch hooks from Nuxt 2.

key option migration in Nuxt 3

In Nuxt 3, the key option is defined within the definePageMeta compiler macro instead of in the export default object. It can be a string or a method that takes the route as parameter.

loading feature not supported in Nuxt 3

The loading feature from Nuxt 2 is not yet supported in Nuxt 3.

scrollToTop option migration in Nuxt 3

In Nuxt 3, the scrollToTop option is defined within the definePageMeta compiler macro instead of in the export default object. To customize scroll behavior in Nuxt 3, you can use ~/router.options.ts file.

scrollToTop feature not fully supported in Nuxt 3

The scrollToTop feature is not yet fully supported in Nuxt 3. You can overwrite the default scroll behavior of vue-router in an ~/router.options.ts file.

watchQuery not supported in Nuxt 3

The watchQuery option is not supported in Nuxt 3. Instead, you can directly use a watcher (watch) to trigger refetching data when query parameters change.

Nuxt 3 data fetching migration example with useAsyncData

This example shows how to migrate from Nuxt 2 asyncData to Nuxt 3 useAsyncData: Nuxt 2: ```ts export default { async asyncData ({ params, $http }) { const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`) return { post } } } ``` Nuxt 3: ```vue <script setup lang="ts"> const { data: post, refresh } = await useAsyncData('post', () => $fetch(`https://api.nuxtjs.dev/posts/${params.id}`)) </script> ```

Nuxt 3 data fetching migration example with useFetch

This example shows how to use useFetch as a convenience wrapper around useAsyncData for simple fetch operations: ```vue <script setup lang="ts"> const { data: post, refresh } = await useFetch(`https://api.nuxtjs.dev/posts/${params.id}`) </script> ```

Nuxt 3 watchQuery replacement example

This example shows how to replace Nuxt 2 watchQuery with a watcher in Nuxt 3: ```vue <script setup lang="ts"> const route = useRoute() const { data, refresh } = await useFetch('/api/user') watch(() => route.query, () => refresh()) </script> ```

Give your agent this brain