This content originally appeared on Level Up Coding - Medium and was authored by Agvictor
The science of Nuxt 3
What is Nuxtjs
Nuxt is the production-ready Vue framework. It’s comparable to how Nextjs is to React. With Nuxtjs, you can create Single Page Applications (SPAs) and server-side rendered apps. The VueJS team has been working on Nuxt 3 for about 16 months. We had been waiting, but it was worth the wait. Nuxtjs comes with a lot of amazing features but we are going to discuss 3 in this article.
1. The New Server Engine (Nitro)
Nuxt Apps are powered by a powerful server engine called Nitro. The server engine enables a lot of cool features, such as cross-platform support for Node.js, browsers, service-workers, and more, Serverless support out-of-the-box, automatic code-splitting, and async-loaded chunks, development server with hot module reloading.
2. Auto-Imports
Nuxt auto-imports helper functions, composables, and Vue APIs to use across your application without explicitly importing them. Every Nuxt application can also use auto-imports for its components, composables, and plugins based on the directory structure. Components, composables, or plugins can use these functions.
<script setup>
/* useAsyncData() and $fetch() are auto-imported */
const { data, refresh, pending } = await useAsyncData('/api/hello', () => $fetch('/api/hello'))
</script>
To put this in short, any file in the component or composables folder can be used in the page folder without importing it. It is also for Vue APIs to be auto imported.
3. Improved Data Fetching
Data Fetching, This is the act of Fetching Data on the server and returning it to the client-side component when the component mounts so that the component will have access to this data instantly. Thus, there will be no load time for the data. Nuxt provides useFetch, useLazyFetch, useAsyncData, and useLazyAsyncData to handle data fetching within your `application. Example
<script setup>
const { data } = await useAsyncData('count', () => $fetch('/API/count'))
</script>
<template>
Page visits: {{ data }}
</template>iceberg
Conclusion
Nuxtjs has gotten a serious power boost and this is just the tip of the iceberg. There are a lot of other features that I did not mention. Be sure to check out the Nuxtjs docs. Thanks for reading 😎
NuxtJS 3, Let’s Talk About 3 New Features was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Agvictor
Agvictor | Sciencx (2022-05-01T15:58:33+00:00) NuxtJS 3, Let’s Talk About 3 New Features. Retrieved from https://www.scien.cx/2022/05/01/nuxtjs-3-lets-talk-about-3-new-features/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.