Nue.js: 3kb UI Library Complete Guide 🚀

web-development Sep 10, 2023 3 min read

Nue.js full reference: 3kb library, no hooks/props/effects, server+client rendering, pure HTML/CSS/JS, progressive enhancement, islands architecture, zero bundler, universal components for ultra-fast web apps.

Nue.js: 3kb Anti-Framework Complete Mastery Guide 🚀

Nue.js = 3kb UI library (gzipped). No hooks, no props, no effects, no JSX.
Pure HTML/CSS/JS. Server-first + client islands. Zero bundler required.
Progressive enhancement. Powers content sites, SPAs, UI libraries, email templates.
Back to basics = Lighthouse 100/100.

🎯 Nue.js vs React vs Vue vs Svelte vs Solid

Feature	Nue.js	React 19	Vue 3	Svelte 5	Solid
Size	3kb	45kb	32kb	12kb	18kb
Concepts	HTML/CSS	Hooks/JSX	Options API	Stores	Signals
Bundler	None	Required	Required	Required	Required
SSR	Native	Next.js	Nuxt	SvelteKit	SolidStart
Learning	1 hour	2 weeks	1 week	3 days	5 days
Philosophy	HTML first	JS first	JS first	Compile-time	Reactive

Rule:

Content + Speed → Nue.js.
Complex SPAs → React/Vue.

🚀 ZERO-TOOLCHAIN SETUP (10 Seconds)

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/nuejs@latest"></script>
</head>
<body>
  <nue-counter></nue-counter>
  
  <script type="module">
    nue.render(document.body)
  </script>
</body>
</html>

✅ 3kb gzipped
✅ No bundler
✅ No build step
✅ Pure HTML/CSS/JS
✅ Server + Client
✅ Progressive enhancement
✅ Works everywhere

🏗️ CORE SYNTAX (Pure HTML)

1. Reactive Component (Counter)

<nue-counter>
  <h1>Count: {{ count }}</h1>
  <button @click="count++">+1</button>
  <button @click="count--">-1</button>
  
  <script>
    export default {
      count: 0
    }
  </script>
</nue-counter>

2. Server Component (Static)

<nue-user id="123">
  <h2>{{ user.name }}</h2>
  <p>{{ user.email }}</p>
  
  <script>
    export default async function({ id }) {
      const user = await fetch(`/api/user/${id}`).then(r => r.json())
      return { user }
    }
  </script>
</nue-user>

3. Hybrid Island (SSR + Client)

<nue-search>
  <input bind:value="query">
  <ul>
    <li v-for="result in results">{{ result.title }}</li>
  </ul>
  
  <script>
    export default {
      query: '',
      async results() {
        if (!this.query) return []
        return await fetch(`/api/search?q=${this.query}`).then(r => r.json())
      }
    }
  </script>
</nue-search>

🎨 STYLING (Global CSS, No Scoped)

/* Pure global CSS - Reusable everywhere */
nuer-counter { 
  @apply p-8 bg-white rounded-2xl shadow-lg;
  max-width: 400px;
  margin: 2rem auto;
}

nuer-counter h1 {
  @apply text-3xl font-black text-gray-900 mb-6;
}

nuer-counter button {
  @apply px-6 py-3 bg-blue-600 text-white rounded-xl font-medium hover:bg-blue-700 transition-all;
  margin: 0 0.5rem;
}

<!-- Same component, different context -->
<nue-counter class="hero-counter w-full max-w-md mx-auto"></nue-counter>
<nue-counter class="sidebar-counter w-64"></nue-counter>

🛠️ MULTIPLE COMPONENTS (Single File)

<!-- components/ui.nue -->
<nue-button>
  <slot></slot>
  <script>
    export default {
      click() {
        this.$emit('click')
      }
    }
  </script>
</nue-button>

<nue-modal>
  <div class="overlay" @click="open = false"></div>
  <div class="content">
    <slot></slot>
    <nue-button @click="open = false">Close</nue-button>
  </div>
  
  <script>
    export default {
      open: false
    }
  </script>
</nue-modal>

🌐 SERVER-SIDE RENDERING (Zero Config)

// server.js - Any Node.js server
import { render } from 'nuejs/server.js'

app.get('/', async (req, res) => {
  const html = await render(`
    <nue-clock></nue-clock>
    <nue-weather city="London"></nue-weather>
  `)
  res.send(html)
})

<!-- nue-clock.nue -->
<nue-clock>
  <h2>London: {{ time }}</h2>
  
  <script>
    export default {
      get time() {
        return new Date().toLocaleTimeString()
      }
    }
  </script>
</nue-clock>

📱 PROGRESSIVE ENHANCEMENT (HTML First)

<!-- Works without JS -->
<div id="counter" data-count="0">
  <h1>Count: 0</h1>
  <button>+</button>
  <button>-</button>
</div>

<!-- Enhanced with Nue -->
<nue-counter hydrate="#counter">
  <!-- Same HTML, now reactive -->
</nue-counter>

🎯 USE CASES (Real-World Patterns)

1. Content Sites (90% Static)

<nue-blog-post id="123">
  <article>
    <h1>{{ post.title }}</h1>
    <nue-comments post-id={post.id} client:visible />
  </article>
</nue-blog-post>

2. UI Library (shadcn-style)

<nue-button variant="primary" size="lg">
  Click me
</nue-button>

<nue-card>
  <nue-card-header>
    <h3>Card Title</h3>
  </nue-card-header>
  <nue-card-content>
    Content...
  </nue-card-content>
</nue-card>

3. Dashboard Widgets

<main class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-8">
  <nue-chart data={sales} client:idle />
  <nue-stats client:visible />
  <nue-notifications />
</main>

🚀 PRODUCTION WORKFLOWS

1. No Build (CDN)

<script src="https://unpkg.com/nuejs"></script>

2. Pre-build (Static Sites)

npx nue build src/ dist/

3. SSR (Any Server)

// Express/Nitro/Fastify
import { render } from 'nuejs/server.js'

📊 PERFORMANCE COMPARISON

Metric	Nue.js	React 19	Vue 3	Svelte 5
Library Size	3kb	45kb	32kb	12kb
HTML Output	100%	70%	80%	90%
TTI (Time to Interactive)	50ms	800ms	400ms	200ms
Memory	2MB	25MB	18MB	8MB
No-JS Fallback	Perfect	❌	❌	❌

🎯 DIRECTORY STRUCTURE

src/
├── components/
│ ├── ui.nue # Button, Modal, Card
│ └── layout.nue # Header, Footer
├── pages/
│ ├── index.nue
│ └── blog.nue
├── styles/
│ └── global.css
└── server.js

🚀 DEPLOYMENT (Everywhere)

# Static hosting
npx nue build && npx wrangler pages publish dist/

# Any Node.js server
npm start

# Deno
deno run --allow-net server.ts

# Cloudflare Workers
wrangler deploy

🎯 PRODUCTION CHECKLIST

✅ 3kb gzipped (No bundler)
✅ Pure HTML/CSS/JS (No JSX)
✅ Server + Client rendering
✅ Progressive enhancement
✅ Global CSS (Reusable)
✅ Multiple components/file
✅ Islands architecture
✅ Works without JS
✅ Any server (Node/Deno)
✅ Lighthouse 100/100

🎨 COMPLETE EXAMPLE (Dashboard)

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/nuejs"></script>
  <link href="styles.css" rel="stylesheet">
</head>
<body>
  <nue-dashboard>
    <header class="header">
      <h1>Dashboard</h1>
    </header>
    
    <main class="grid">
      <nue-stats client:visible />
      <nue-chart data={chartData} client:idle />
      <nue-tasks />
    </main>
  </nue-dashboard>
  
  <script type="module">
    nue.render(document.body)
  </script>
</body>
</html>

Nue.j = Bloat-free web development.
3kb, HTML-first, zero tooling, progressive enhancement = fastest websites + simplest DX.

#Nue.js #Web Development #JavaScript Frameworks #Lightweight #No-Bundler

Nue.js: 3kb UI Library Complete Guide 🚀

Nue.js: 3kb Anti-Framework Complete Mastery Guide 🚀

🎯 Nue.js vs React vs Vue vs Svelte vs Solid

🚀 ZERO-TOOLCHAIN SETUP (10 Seconds)

🏗️ CORE SYNTAX (Pure HTML)

1. Reactive Component (Counter)

2. Server Component (Static)

3. Hybrid Island (SSR + Client)

🎨 STYLING (Global CSS, No Scoped)

🛠️ MULTIPLE COMPONENTS (Single File)

🌐 SERVER-SIDE RENDERING (Zero Config)

📱 PROGRESSIVE ENHANCEMENT (HTML First)

🎯 USE CASES (Real-World Patterns)

1. Content Sites (90% Static)

2. UI Library (shadcn-style)

3. Dashboard Widgets

🚀 PRODUCTION WORKFLOWS

1. No Build (CDN)

2. Pre-build (Static Sites)

3. SSR (Any Server)

📊 PERFORMANCE COMPARISON

🎯 DIRECTORY STRUCTURE

🚀 DEPLOYMENT (Everywhere)

🎯 PRODUCTION CHECKLIST

🎨 COMPLETE EXAMPLE (Dashboard)

Explore Related Topics

Category

Related Tags

Stay Updated with Our Latest Articles

About the Author

pankaj kumar

@scope CSS 2026: Native Style Scoping Complete Guide 🚀

Vitest + Playwright: The 2026 JavaScript Testing Stack 🚀

Related Articles

@scope CSS 2026: Native Style Scoping Complete Guide 🚀

Astro 6.0 2026: Ultimate Static-First Framework Guide 🚀

Sass 2026: CSS Preprocessor Complete Mastery Guide 🚀

Pankaj Kumar