index

Why did i start this Journey?

Its rather simple MONEY! Even if JavaScript and all its Frameworks give me nightmares. Their still crucial to make money in this Techspace we are in. Think about it even if you have the greatest backend system:

• Performant as fuck
• Secure like fort knox
• Scalable
• Beautiful maintainable

Still nobody will buy the product if the UI/UX experience makes you feel like your locked in a Rubber Cell. With this said let me introduce you into the wonders of shadcn and nuxt 4.

Introducing Nuxt 4

Nuxt is an open source Meta Framework built on top of Vue.Js. It’s the straight competitor to Next the Meta framework built on React. I decided to go with Nuxt over Next because React is a rotting hell hole controlled by Vercel. Sad to say Nuxt was also bought by Vercel but Vue is still the newer more opinionated real Framework.

Vue feels complete whilst React is a gigantic after school project created by meta. I dont know how it managed to become so dominant. The same is also even more true with JavaScript itself HAHHA.

Key benefits (why Nuxt is amazing)

• Universal SSR (Server Side Rendering)
  • Better Seo and Performance
• SPA (Single Page Application)
  • Fast client side apps
• Hybrid (Best of SSR and SPA)
  • combining where needed

NEXT ALSO HAS THIS!!!

I dont care Nuxt has still more to offer:

• File-based routing
  • created from your pages/ directory (Works straight out the box)
• Powerful Modules that are plug in play
  • have a look Modules
• Vue + Vite
  • modern tooling
  • hot module reloading
  • Strong TypeScript Support
  • Nitro Engine (Deserves its own Article btw)
  • Great dev experience

In short: complete batteries included framework that makes us go fast!

But i hear you say: “I cant design and HTML and CSS are the hardest programming language as we all know”

I was also in this camp but let me Introduce you to my friend shadcn.

Introducing shadcn

ITS NOT A LIBRARY!

You pull the components straight into your Project. Giving you absolute control over your design and the functionality! This also means Zero dependencies and maintaining of these dependencies. Shadcn is amazing!

Whats best about it is that leveraging AI becomes great to change components to your liking.

IMPORTANT:

Dont let AI install shadcn and its structure! It will ruin it and make weird stuff happen. Implement shadcn yourself. Set your common components under layouts/default.vue or else you will have a gigantic mess.

Also look into the great shadcn documentation and look at the components. Make sure you have an idea what you want. AI will sometimes make its own components even tho they are already created by shadcn.

Leverage AI to only customize or add functionality. Dont tell it make this and that cause it will not do it right!

One concern i had is that shadcn is in use everywhere. So all apps built with it look a like. This isnt a problem its a skill issue!

Use the tailwind.css (Global css) to make custom variables or swap in whole new themes. I recommend looking at tweakcn. Its a website containing many such themes.

Also go into the components themself and add some new properties. I mean values are Tailwind strings so you can jump in and make a new xxl property or some weird shit you like.

To wrap up lets get into CN after all its called ShadCN

cn is a shorthand for Class and Names. Its a utility function located under /lib/utils.cs. Its used to make working with logic (JavaScript) easy.

Example:

Without CN:

<button className={`text-sm ${disabled ? "bg-gray-300" : "bg-blue-500"}`}>
  Hello
</button>

With CN:

<button className={cn("text-sm", disabled ? "bg-gray-300" : "bg-blue-500")}>
  Hello
</button>

No need for annoying String Templates (Backticks)!

Chaining also is as simple as adding , followed by a new condition (like an Array)

This is all what i have currently discovered diving into the frontend world.

I hope you can make some use of it.