# Idea to Production in 2 days, thanks to...

# ...[**Nuxt 3**](https://v3.nuxtjs.org/)!

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

[![Tweetic io cover](https://tweetic.io/og.png)](https://tweetic.io/)

Introducing [Tweetic.io](https://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](https://supabase.com) landing page! I looked around the internet, but couldn't find any static tweet generator, thus created this tools!!!



### 🚀 Features
- 🤩 Free
- 📖 [Open-Source](https://github.com/zernonia/tweetic)
- 🚀 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](https://github.com/zernonia/tweetic/tree/master/plugins). 

> this saves me soooooooo much time!
    

## Server Engine (Nitro)

Nuxt 3 is running on [Nitro engine](https://v3.nuxtjs.org/guide/concepts/server-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](https://vercel.com) with zero configuration! Nitro will auto-detect the platform, and generate the appropriate output for you. [Here](https://v3.nuxtjs.org/guide/deploy/presets#supported-hosting-providers) 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`.  

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1652803972652/0AsFdzHs-.png align="center")

The one thing that literally blew my mind, is this....
![Screenshot 2022-05-18 at 12.10.01 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1652803827847/6YA1Oho-g.png align="center")

... 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](https://vitejs.dev) 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.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1652804460381/BTDHdIBQQ.png align="center")


# `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](@atinuxt) (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!
 

%[https://twitter.com/Atinux/status/1526673182798794754]
 

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!