Vue tips · 132 tips
Over the last few years, I've collected a list of valuable tips while developing and writing about Vue & Nuxt. Some are clever, some I use almost every day, and some are more advanced — but they're all useful.
Understand the key distinction between useFetch and event.$fetch in Nuxt. Learn why using event.$fetch for server-side API calls is the recommended approach for better performance and SSR correctness.
Use a typed entry helper to infer props from each component in a component map. This is useful when rendering dynamic blocks from CMS or configuration data.
A concise guide on how to access your Pinia store within a Nuxt production build.
Learn how to use the useLoadingIndicator composable in Nuxt to access and manage the loading state of your app's pages. Improve user experience by displaying loading indicators and handling transitions seamlessly.
effectScope can be used to group and cleanup multiple reactive effects.
Learn to wield useAsyncData along with Promise.all() to load data faster with parallel requests in your Nuxt application.
Learn how to pre-fetch data on the server before app start in Nuxt 3+ to improve load times and user experience.
Ensure that your data are valid and safe in your Nuxt server routes before processing them.
If you want to keep things simple and avoid adding extra dependencies, you can implement basic routing functionality in Vue.js without using external libraries like Vue Router.
KeepAlive is a built-in Vue component that allows you to conditionally cache component instances when dynamically switching between multiple components.
`setResponseStatus` is a Nuxt composable to set the status code and (and optionally the status message) of the response.
Since Nuxt 3.9 you can use the useOnce composable to run a given function or block of code once during server-side rendering or client-side navigation.
Styling your components in Vue.js can be done in multiple ways. One of the most common ways is to use the class attribute, especially if you are using a CSS framework like Tailwind. In combination with v-bind you can dynamically assign classes to your components.
Vue composables are a way to encapsulate logic in a reusable way in Vue 3. They are a great way to share logic between components, but I often see them used in places where they are not needed.
When using reactive provide/inject values, it is recommended to keep any mutations to reactive state inside of the provider whenever possible.
Wrapper components can help you share styling across multiple Vue components. This can make your code cleaner and more maintainable.
It sometimes happens that you need to have different configurations for different environments in your Nuxt.js application. Therefore, Nuxt provides fully typed, per-environment overrides for your Nuxt configuration.
For prop validations inside `<script setup>` with TypeScript you need to define an interface for the props and use the `withDefaults` helper to set default values.
Nitro, h3 and ofetch are UnJS packages that are used to power the Nuxt 3 server engine.
Template Refs are a way to access elements in the DOM from within a Vue component. As the name suggests, you should use a ref to access the element in the template.
You can programmatically trigger a transition via the "key" attribute.
In certain scenarios, you need to pass on all slots from a parent component to the child component.
In Nuxt 3, you can use the `signal` parameter with the globally available `$fetch` helper to cancel an API request.
Sometimes, you want to apply specific styles to a component only if it has an event listener attached.
