...Nuxt 3!
If you are not familiar with Nuxt 3, it is build on top of the awesome Vue 3 + Vite (or Webpack if you like) + Typescript, which makes the process of development feels like a breeze. But before we jump right into the Nuxt awesomeness, let me show you the product I've built!
Showcase
Introducing Tweetic.io! It Convert Tweets to Static HTML, where you can embed it on your landing page, blogs or anywhere you like.
It was heavily inspired by Tweet embedded on Supabase's landing page! I looked around the internet, but couldn't find any static tweet generator, thus created this tools!!!
🚀 Features
- 🤩 Free
- 📖 Open-Source
- 🚀 API ready
- 📋 Copy/Download Static HTML
Ok, enough showcasing, let's dive in to the real deal, Nuxt3!
Nuxt Features
Auto Import
Still wasting your time and effort naming every Vue component, then importing them one by one manually into your views components? Create view and import in Vue router one by one?
Well, Nuxt auto-import components got you covered! Nuxt (even before Nuxt 3) has auto-import features that import all components in ./components folder, as well as creating routes based on your./pages folder.
Check out the ./pages/index.vue from Tweetic.io:
<script setup lang="ts">
// No need to import anything because Nuxt 3 does it automatically!!
</script>
<template>
<div class="mt-32 flex flex-col items-center overflow-hidden xl:overflow-visible">
// some h1, h2
<NuxtLink to="/thank-you" class="flex flex-col items-center mt-8 text-gray-400">
<span>thank you everyone...</span>
<Underline class="w-16 -mt-2"></Underline>
</NuxtLink>
<div class="flex flex-col items-center space-y-4 md:relative mt-8 md:mt-32 w-full md:h-224">
<div class="md:absolute flex items-center -top-20 left-10 text-gray-400">
<Arrow class="w-12"></Arrow>
<span>Static HTML tweets</span>
</div>
<Tweet
class="md:absolute top-0 left-0"
url="https://twitter.com/zernonia/status/1513020247690809346"
layout="supabase"
></Tweet>
// more tweets
</div>
</div>
</template>
But that's not all, now the latest Nuxt 3 has even more auto-import features!
TS/JS files in plugins and composables are auto-imported, so you don't need to export them, and manually import them into nuxt.config.ts, or your function script! You can look at all the plugins for Tweetic.io here.
this saves me soooooooo much time!
Server Engine (Nitro)
Nuxt 3 is running on Nitro engine, which unlocks new full-stack capabilities to Nuxt server. It generates:
- server API by reading files in
server/api/ - server middleware from
server/middleware/ - server routes from
server/routes
(YES everything is automatic again!!)
Creating API endpoint is ridiculously easy! You just need to return a JSON data, and done! You have an API endpoint ready to go. Of course, we are free to create node based API as well if you choose to!
Check out this super simple server/api/hello.ts:
export default defineEventHandler((event) => {
return {
api: 'world!'
}
})
Now calling http://localhost:3000/api/hello will return JSON { "api": "world" } 🌎 to you 🔥
Furthermore, the smoothest experience of using this new Nitro engine is when deploying the app! Nitro has cross-platform support for Node.js, Browsers, service-workers and more. It support serverless deployment out-of-the-box too!
Tweetic.io is deployed on Vercel with zero configuration! Nitro will auto-detect the platform, and generate the appropriate output for you. Here are the list of supported hosting providers!
No need to mess with deployment, this is SMOOTH!
Fully Typed!!
Nuxt 3 is fully typed and provides helpful shortcuts to ensure you have access to accurate type information when you are coding. If you are Typescript fans like me, you will be in love with coding once again!
Nuxt 3 generates type-ready Vue components, so you can refers to props and emits easily without inspecting the components, or worried that you might be passing the wrong props into the components.
Other than that, the response from useFetch/useAsyncData provided by Nuxt 3 is also fully typed! You can use the response immediately without having to type cast it like using fetch.
The one thing that literally blew my mind, is this....
... did you spot it?
Is that Nuxt will auto suggest what Server API route is available to be called 🤯!!!
This is super DX in it's finest!
Super fast load time
Last but not least, the lightning fast Vite load time! Vite has been well-known for it's blazing fast initial load time, as well as it's build time. Nuxt 3 uses Vite to bundle the application.
For my tiny apps, it took 1401 milliseconds to start the dev server. That is blazingly fast compared to Nuxt 2 with webpack.
npx nuxi init <your-app>
Nuxt 3 really boosted my productivity, and my developing experience! I couldn't express enough how good the experience is, you just have to taste it on your own! 🍇
So what are you waiting for? As Nuxt 3 is currently in the release candidate 3, I'm hopeful that the Nuxt environment will get richer with more awesome plugins and modules!
While discussing a feature request for Nuxt 3 with my friend on Twitter, @Sébastien Chopin (CEO of NuxtLab) dropped by and take note of the thread that we were discussing! This indicates how proactive the team is, and how eager they are to build a product that will be loved by many!
21:17 PM - 17 May 2022
If you haven't tried out Nuxt 3, now is a good time! Give yourself a taste of Super DX (made possible by Nuxt teams and the communities!) and share with me 1 thing you like the most about Nuxt 3 in the comment section down below!
Thank you for your attention! 💛 May God bless you!