format: apply repo prettier (3.8.1) to the folded skills tree
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
This commit is contained in:
@@ -15,15 +15,17 @@ Server renders HTML, then hydrates on client:
|
||||
// nuxt.config.ts - this is the default
|
||||
export default defineNuxtConfig({
|
||||
ssr: true,
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
**Benefits:**
|
||||
|
||||
- Fast initial page load (HTML is ready)
|
||||
- SEO-friendly (content is in HTML)
|
||||
- Works without JavaScript initially
|
||||
|
||||
**How it works:**
|
||||
|
||||
1. Server executes Vue code, generates HTML
|
||||
2. Browser displays HTML immediately
|
||||
3. JavaScript loads and hydrates the page
|
||||
@@ -37,15 +39,17 @@ Render entirely in the browser:
|
||||
// nuxt.config.ts
|
||||
export default defineNuxtConfig({
|
||||
ssr: false,
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
**Benefits:**
|
||||
|
||||
- Simpler development (no SSR constraints)
|
||||
- Cheaper hosting (static files only)
|
||||
- Works offline
|
||||
|
||||
**Use cases:**
|
||||
|
||||
- Admin dashboards
|
||||
- SaaS applications
|
||||
- Apps behind authentication
|
||||
@@ -62,24 +66,26 @@ Provide loading UI while app hydrates:
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #00dc82;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #00dc82;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@@ -106,21 +112,21 @@ export default defineNuxtConfig({
|
||||
// Server-rendered (default)
|
||||
'/api/**': { cors: true },
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### Route Rules Reference
|
||||
|
||||
| Rule | Description |
|
||||
|------|-------------|
|
||||
| `prerender: true` | Pre-render at build time |
|
||||
| `ssr: false` | Client-side only |
|
||||
| `swr: number \| true` | Stale-while-revalidate caching |
|
||||
| `isr: number \| true` | Incremental static regeneration |
|
||||
| `cache: { maxAge: number }` | Cache with TTL |
|
||||
| `redirect: string` | Redirect to another path |
|
||||
| `cors: true` | Add CORS headers |
|
||||
| `headers: object` | Custom response headers |
|
||||
| Rule | Description |
|
||||
| --------------------------- | ------------------------------- |
|
||||
| `prerender: true` | Pre-render at build time |
|
||||
| `ssr: false` | Client-side only |
|
||||
| `swr: number \| true` | Stale-while-revalidate caching |
|
||||
| `isr: number \| true` | Incremental static regeneration |
|
||||
| `cache: { maxAge: number }` | Cache with TTL |
|
||||
| `redirect: string` | Redirect to another path |
|
||||
| `cors: true` | Add CORS headers |
|
||||
| `headers: object` | Custom response headers |
|
||||
|
||||
### Inline Route Rules
|
||||
|
||||
@@ -130,7 +136,7 @@ Define per-page:
|
||||
<script setup lang="ts">
|
||||
defineRouteRules({
|
||||
prerender: true,
|
||||
})
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -147,7 +153,7 @@ export default defineNuxtConfig({
|
||||
'/about': { prerender: true },
|
||||
'/posts/*': { prerender: true },
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
Or use `nuxt generate`:
|
||||
@@ -164,20 +170,20 @@ export default defineNuxtConfig({
|
||||
hooks: {
|
||||
'prerender:routes'({ routes }) {
|
||||
// Add dynamic routes
|
||||
const posts = await fetchPostSlugs()
|
||||
const posts = await fetchPostSlugs();
|
||||
for (const slug of posts) {
|
||||
routes.add(`/posts/${slug}`)
|
||||
routes.add(`/posts/${slug}`);
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
Or in pages:
|
||||
|
||||
```ts
|
||||
// server/api/posts.ts or a plugin
|
||||
prerenderRoutes(['/posts/1', '/posts/2', '/posts/3'])
|
||||
prerenderRoutes(['/posts/1', '/posts/2', '/posts/3']);
|
||||
```
|
||||
|
||||
## Edge-Side Rendering
|
||||
@@ -190,10 +196,11 @@ export default defineNuxtConfig({
|
||||
nitro: {
|
||||
preset: 'cloudflare-pages', // or 'vercel-edge', 'netlify-edge'
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
Supported platforms:
|
||||
|
||||
- Cloudflare Pages/Workers
|
||||
- Vercel Edge Functions
|
||||
- Netlify Edge Functions
|
||||
@@ -206,12 +213,12 @@ Use `import.meta.server` and `import.meta.client`:
|
||||
<script setup>
|
||||
if (import.meta.server) {
|
||||
// Server-only code
|
||||
console.log('Running on server')
|
||||
console.log('Running on server');
|
||||
}
|
||||
|
||||
if (import.meta.client) {
|
||||
// Client-only code
|
||||
console.log('Running in browser')
|
||||
console.log('Running in browser');
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@@ -229,7 +236,7 @@ For components:
|
||||
</template>
|
||||
```
|
||||
|
||||
<!--
|
||||
<!--
|
||||
Source references:
|
||||
- https://nuxt.com/docs/guide/concepts/rendering
|
||||
- https://nuxt.com/docs/getting-started/prerendering
|
||||
|
||||
Reference in New Issue
Block a user