[{"data":1,"prerenderedAt":357},["ShallowReactive",2],{"navigation":3,"search":38,"open-source-page":259,"open-source-projects":282,"$fU3nzkpwulBBq6Ofs3k35ulaIH0iLW3X43MEGIJVd9Dg":354},[4],{"title":5,"path":6,"stem":7,"children":8,"page":37},"Blog","\u002Fblog","blog",[9,13,17,21,25,29,33],{"title":10,"path":11,"stem":12},"WPNuxt 2.0: Type-Safe Headless WordPress for Nuxt 4","\u002Fblog\u002Fwpnuxt-v2","blog\u002F993.wpnuxt-v2",{"title":14,"path":15,"stem":16},"Kaspa: digital silver","\u002Fblog\u002Fkaspa","blog\u002F994.kaspa",{"title":18,"path":19,"stem":20},"Discovering Nuxt","\u002Fblog\u002Fdiscoveringnuxt","blog\u002F995.discoveringnuxt",{"title":22,"path":23,"stem":24},"Hello World Vernaillen.dev","\u002Fblog\u002Fhello-world-vernaillen-dev","blog\u002F996.hello-world-vernaillen-dev",{"title":26,"path":27,"stem":28},"Building a stronger personal brand","\u002Fblog\u002Fbuilding-a-stronger-personal-brand","blog\u002F997.building-a-stronger-personal-brand",{"title":30,"path":31,"stem":32},"Using Liferay 7 to build a community website","\u002Fblog\u002Fusing-liferay-7-to-build-a-community-website","blog\u002F998.using-liferay-7-to-build-a-community-website",{"title":34,"path":35,"stem":36},"My action plan after Liferay DevCon","\u002Fblog\u002Fmy-action-plan-after-liferay-devcon","blog\u002F999.my-action-plan-after-liferay-devcon",false,[39,43,49,55,60,65,70,75,80,85,89,94,99,104,109,114,119,124,129,132,137,142,147,152,157,161,165,168,172,177,182,187,190,195,200,205,208,213,218,223,228,233,236,241,246,249,254],{"id":11,"title":10,"titles":40,"content":41,"level":42},[],"Announcing WPNuxt 2.0 — type-safe composables, multi-layer caching, Gutenberg block rendering, authentication, and an AI-powered MCP server for headless WordPress with Nuxt WPNuxt 2.0 brings type-safe composables, multi-layer caching, Gutenberg block rendering, and full authentication to headless WordPress with Nuxt. After 16 alpha releases, 7 betas, and over 700 commits, it's ready for production. WPNuxt connects WordPress with Nuxt via GraphQL, generating typed composables from your queries so you can fetch and render WordPress content without writing boilerplate. Version 2 adds the features that were missing to make this a complete solution for production headless WordPress sites. Type-safe composables generated from GraphQL queries with full autocompleteThree-layer caching — server (Nitro SWR), client deduplication, and SSR payloadGutenberg block rendering with 10 built-in Vue componentsAuthentication with password, OAuth, and external provider supportAI-powered development via MCP server integrationServerless-ready — no jsdom, works on Vercel out of the boxSSG support — full static site generation with prerender route fetchingGraphQL mutations — generated useMutation*() composables alongside queries WPNuxt v1 worked as a single module wrapping nuxt-graphql-middleware, but it had gaps: no built-in caching strategy, no authentication, and serverless deployments on Vercel broke due to jsdom in the server bundle. Version 2 fills those gaps. Three packages (@wpnuxt\u002Fcore, @wpnuxt\u002Fblocks, @wpnuxt\u002Fauth) ship from a unified monorepo with synchronized versions, shared testing infrastructure, and a CI compatibility matrix covering multiple WordPress and Nuxt versions. Upgrading from v1? The MCP server includes a wpnuxt_migrate tool that scans your project and guides you through the changes. See breaking changes below.",1,{"id":44,"title":45,"titles":46,"content":47,"level":48},"\u002Fblog\u002Fwpnuxt-v2#composable-api","Composable API",[10],"The composable API is cleaner in v2. The configurable prefix is gone — all composables use a consistent use naming convention. The separate useAsync* composables are replaced by a lazy option. - const { data } = await useWPPosts()\n+ const { data } = await usePosts()\n\n- const { data } = await useWPPageByUri({ uri })\n+ const { data } = await usePageByUri({ uri })\n\n- const { data } = useAsyncWPPosts()\n+ const { data } = usePosts(undefined, { lazy: true }) Every composable is auto-imported and fully typed. The module generates TypeScript declarations from your GraphQL queries and fragments at build time, so you get autocomplete and type checking all the way from WordPress through to your Vue templates. Each composable now accepts options for retry, timeout, and caching: const { data: post } = await usePostByUri({\n  uri: route.params.slug\n}, {\n  retry: 3,\n  retryDelay: 1000,\n  timeout: 5000,\n  clientCache: false\n}) Retry uses exponential backoff by default. Timeouts create an AbortController under the hood and clean up properly when the request completes or the component unmounts. WPNuxt 2 also generates composables for GraphQL mutations. Define a mutation in your extend\u002Fqueries\u002F folder and the module generates a useMutation{Name}() composable — fully typed, auto-imported, and ready to use for creating comments, submitting forms, or any custom WordPress mutation. The usePrevNextPost() composable provides previous\u002Fnext post navigation out of the box.",2,{"id":50,"title":51,"titles":52,"content":53,"level":54},"\u002Fblog\u002Fwpnuxt-v2#extending-queries","Extending Queries",[10,45],"WPNuxt provides default GraphQL queries for posts, pages, menus, and settings. You can override any of these or add your own by creating .gql files in the extend\u002Fqueries\u002F folder: query CustomPosts($limit: Int = 10) {\n  posts(first: $limit) {\n    nodes {\n      ...Post\n      customField\n    }\n  }\n} This generates useCustomPosts() and a lazy variant automatically — fully typed, auto-imported, and cached.",3,{"id":56,"title":57,"titles":58,"content":59,"level":48},"\u002Fblog\u002Fwpnuxt-v2#multi-layer-caching","Multi-Layer Caching",[10],"One of the biggest improvements in v2 is a structured three-layer caching system that works out of the box: LayerScopeWhat It DoesServer (Nitro)All usersSWR-based caching of GraphQL responses (~1-5ms vs ~200-500ms uncached)Client (GraphQL)Per browserDeduplicates identical queries during navigationPayloadPer requestPrevents refetch during SSR-to-client hydration Configure it in nuxt.config.ts: export default defineNuxtConfig({\n  wpNuxt: {\n    cache: {\n      enabled: true,\n      maxAge: 300,\n      swr: true\n    }\n  }\n}) You can also disable caching per-query for content that needs to be fresh, like authenticated or preview content: const { data } = await useViewer(undefined, {\n  clientCache: false\n}) Every deployment automatically generates a unique build hash that invalidates the cache, so stale content never survives a redeploy. The SSG support deserves a special mention. WPNuxt normalizes WordPress URIs with trailing slashes to ensure consistent cache keys between prerendered payloads and client-side navigation. The getCachedData functions are defined at module level (not inside the composable) to maintain stable function references across SSR and hydration, preventing Nuxt's \"incompatible options\" warnings.",{"id":61,"title":62,"titles":63,"content":64,"level":48},"\u002Fblog\u002Fwpnuxt-v2#content-rendering","Content Rendering",[10],"",{"id":66,"title":67,"titles":68,"content":69,"level":54},"\u002Fblog\u002Fwpnuxt-v2#the-wpcontent-component","The WPContent Component",[10,62],"The \u003CWPContent> component handles WordPress content rendering: \u003Ctemplate>\n  \u003CWPContent :node=\"page\" \u002F>\n\u003C\u002Ftemplate> WPContent automatically detects whether @wpnuxt\u002Fblocks is installed. If it is, content renders through the BlockRenderer for structured Gutenberg blocks. Otherwise, it falls back to sanitized HTML via the built-in v-sanitize-html directive. The component also intercepts clicks on internal links and uses navigateTo() for client-side navigation. It respects modifier keys (Ctrl\u002FCmd+click for new tab), target=\"_blank\", download attributes, and rel=\"external\" — so link behavior stays predictable.",{"id":71,"title":72,"titles":73,"content":74,"level":54},"\u002Fblog\u002Fwpnuxt-v2#gutenberg-blocks","Gutenberg Blocks",[10,62],"The @wpnuxt\u002Fblocks package renders WordPress Gutenberg blocks as Vue components. Each block type maps to a dedicated component: ComponentBlock TypeCoreParagraphcore\u002FparagraphCoreHeadingcore\u002FheadingCoreImagecore\u002FimageCoreButtoncore\u002FbuttonCoreButtonscore\u002FbuttonsCoreQuotecore\u002FquoteCoreGallerycore\u002FgalleryCoreSpacercore\u002FspacerCoreDetailscore\u002FdetailsEditorBlockFallback for unsupported blocks Install the blocks package alongside core: pnpm add @wpnuxt\u002Fblocks export default defineNuxtConfig({\n  modules: ['@wpnuxt\u002Fblocks']\n}) The blocks module automatically extends the Post and Page GraphQL fragments to include editorBlocks data. It also detects @nuxt\u002Fui and uses its components where appropriate — for example, CoreButton renders as a UButton when Nuxt UI is available. Override any block by creating your own component in components\u002Fblocks\u002F. A CoreParagraph.vue in your project takes precedence over the built-in version, giving you full control over rendering without ejecting from the system.",{"id":76,"title":77,"titles":78,"content":79,"level":54},"\u002Fblog\u002Fwpnuxt-v2#serverless-ready-sanitization","Serverless-Ready Sanitization",[10,62],"Version 1 used @radya\u002Fnuxt-dompurify, which pulled jsdom (~5.7 MB) into the server bundle. This broke SSR on serverless platforms like Vercel where the bundle size matters. Version 2 replaces this with a built-in v-sanitize-html directive. On the server, HTML passes through as-is (WordPress is a trusted source). On the client, DOMPurify loads lazily using the native browser DOM — no jsdom required.",{"id":81,"title":82,"titles":83,"content":84,"level":48},"\u002Fblog\u002Fwpnuxt-v2#authentication","Authentication",[10],"The @wpnuxt\u002Fauth package adds WordPress authentication with three supported flows: MethodFlowWordPress PluginPasswordUsername\u002Fpassword via GraphQL mutationHeadless Login for WPGraphQLExternal OAuthGoogle, GitHub, etc.Headless Login for WPGraphQLWordPress OAuthRedirect to WordPress loginminiOrange WP OAuth Server All three methods store JWT tokens in secure httpOnly cookies with automatic refresh handling. const { user, isAuthenticated, login, logout } = useWPAuth()\n\nawait login({ username: 'demo', password: 'secret' }) The useWPUser() composable provides role checking: const { hasRole, isAdmin, isEditor } = useWPUser() Authentication is SSR-compatible — cookies are included in server-side requests, so authenticated content renders correctly on first load.",{"id":86,"title":87,"titles":88,"content":64,"level":48},"\u002Fblog\u002Fwpnuxt-v2#developer-tools","Developer Tools",[10],{"id":90,"title":91,"titles":92,"content":93,"level":54},"\u002Fblog\u002Fwpnuxt-v2#mcp-server","MCP Server",[10,87],"WPNuxt 2 ships with a Model Context Protocol server that integrates with AI assistants like Claude Code. Add it to your project's .mcp.json: {\n  \"mcpServers\": {\n    \"wpnuxt\": {\n      \"type\": \"sse\",\n      \"url\": \"https:\u002F\u002Fwpnuxt.com\u002Fmcp\"\n    }\n  }\n} The MCP server provides tools across several categories: WordPress Discovery — Connect to your WordPress site and explore content types, menus, taxonomies, installed plugins, and available Gutenberg blocks. Content Fetching — Fetch posts, pages, and sample content directly, or run custom GraphQL queries. Code Generation — Scaffold pages, components, GraphQL queries, and block renderers for your WPNuxt project. The wpnuxt_init tool generates a complete project structure. Migration — The wpnuxt_migrate tool scans v1 projects, identifies breaking changes, detects anti-patterns, and generates compatibility helpers for upgrading. Documentation Proxy — The nuxt_docs and nuxt_ui_docs tools proxy official Nuxt and Nuxt UI documentation, so you only need one MCP server for your WPNuxt project.",{"id":95,"title":96,"titles":97,"content":98,"level":54},"\u002Fblog\u002Fwpnuxt-v2#the-wpnuxi-cli","The wpnuxi CLI",[10,87],"A standalone CLI tool handles project scaffolding and diagnostics: # Create a new WPNuxt project\nnpx wpnuxi init my-site\n\n# Display environment info\nnpx wpnuxi info\n\n# Run health checks\nnpx wpnuxi doctor The doctor command checks your environment variables, WordPress URL validity, GraphQL endpoint reachability, introspection support, and project dependencies. It gives you a clear diagnostic when something isn't connecting.",{"id":100,"title":101,"titles":102,"content":103,"level":54},"\u002Fblog\u002Fwpnuxt-v2#vercel-auto-configuration","Vercel Auto-Configuration",[10,87],"WPNuxt v2 auto-detects Vercel deployments and applies the right settings: Native SWR for proper ISR (Incremental Static Regeneration) handlingSSR forced for all routes (fixes catch-all route classification issues)WordPress uploads proxy (\u002Fwp-content\u002Fuploads\u002F** forwarded to your WordPress site) — images and media referenced in WordPress content just work without exposing your WordPress domain@nuxt\u002Fimage IPX configuration with proper WordPress domain aliases No manual Vercel configuration needed — it just works.",{"id":105,"title":106,"titles":107,"content":108,"level":54},"\u002Fblog\u002Fwpnuxt-v2#additional-configuration","Additional Configuration",[10,87],"For WordPress sites with public introspection disabled, WPNuxt supports a schemaAuthToken that sends a Bearer token during schema download without ever exposing it in the client bundle: wpNuxt: {\n  schemaAuthToken: process.env.WPNUXT_SCHEMA_AUTH_TOKEN\n} WPNuxt automatically creates server\u002FgraphqlMiddleware.serverOptions.ts and app\u002FgraphqlMiddleware.clientOptions.ts with sensible defaults for cookie forwarding, Authorization header passthrough, and preview mode support. Existing files are never overwritten, so custom configurations are preserved. Running nuxt prepare for the first time triggers an interactive setup that prompts for your WordPress URL, creates .env and .env.example files, sets up .mcp.json for AI assistant integration, and creates the extend\u002Fqueries\u002F folder for custom GraphQL queries.",{"id":110,"title":111,"titles":112,"content":113,"level":48},"\u002Fblog\u002Fwpnuxt-v2#breaking-changes","Breaking Changes",[10],"If you're upgrading from v1, the key changes are: Composable names — useWP* prefix dropped: useWPPosts() → usePosts(), useWPPageByUri() → usePageByUri()Lazy loading — useAsync* replaced by a lazy option: usePosts(undefined, { lazy: true })Cache config — enableCache \u002F cacheMaxAge replaced by cache: { enabled, maxAge, swr }Removed composables — useFeaturedImage() (use post.featuredImage.node directly), useWPUri() (use useRoute().params)Minimum versions — Nuxt 4.0+, Node.js 20+, nuxt-graphql-middleware 5.x The WPNuxt MCP server includes a wpnuxt_migrate tool that can scan your v1 project and generate a detailed migration plan.",{"id":115,"title":116,"titles":117,"content":118,"level":48},"\u002Fblog\u002Fwpnuxt-v2#getting-started","Getting Started",[10],"The fastest way to start a new WPNuxt project: npx wpnuxi init my-wordpress-site Or manually: pnpm add @wpnuxt\u002Fcore export default defineNuxtConfig({\n  modules: ['@wpnuxt\u002Fcore'],\n  wpNuxt: {\n    wordpressUrl: 'https:\u002F\u002Fyour-wordpress-site.com'\n  }\n}) To add blocks and authentication: pnpm add @wpnuxt\u002Fblocks @wpnuxt\u002Fauth export default defineNuxtConfig({\n  modules: [\n    '@wpnuxt\u002Fcore',\n    '@wpnuxt\u002Fblocks',\n    '@wpnuxt\u002Fauth'\n  ]\n}) Run nuxt prepare and WPNuxt handles the rest — downloading the GraphQL schema, generating composables, and setting up type declarations.",{"id":120,"title":121,"titles":122,"content":123,"level":48},"\u002Fblog\u002Fwpnuxt-v2#whats-next","What's Next",[10],"WPNuxt 2.0 is stable and ready for production. Here's what's on the roadmap: Cursor-based pagination for large content setsDeeper inner block nesting for complex Gutenberg layoutsAdditional default queries for taxonomies and searchEnd-to-end tutorials for common use cases (blog, SEO, menus)Media handling deep dive with @nuxt\u002Fimage optimization patterns Feedback, feature requests, and bug reports are welcome on the GitHub repository.",{"id":125,"title":126,"titles":127,"content":128,"level":48},"\u002Fblog\u002Fwpnuxt-v2#resources","Resources",[10],"Getting Started: WPNuxt DocumentationGitHub Repositorynpm: @wpnuxt\u002Fcore WordPress Requirements: WPGraphQL PluginWPGraphQL Content Blocks (for @wpnuxt\u002Fblocks)Headless Login for WPGraphQL (for @wpnuxt\u002Fauth) Related Posts: Discovering Nuxt html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"id":15,"title":14,"titles":130,"content":131,"level":42},[],"A proof-of-work cryptocurrency staying true to Satoshi's vision while using blockDAG technology for faster transactions",{"id":133,"title":134,"titles":135,"content":136,"level":48},"\u002Fblog\u002Fkaspa#kaspa-at-a-glance","Kaspa At a Glance",[14],"Kaspa is a proof-of-work cryptocurrency that stays true to Satoshi Nakamoto's vision—decentralized, secure digital money—while fixing Bitcoin's speed limitations. It uses blockDAG (Directed Acyclic Graph) instead of a traditional blockchain, allowing multiple blocks to be created in parallel (~10 blocks per second) while maintaining decentralization. The ecosystem is expanding with L2 solutions (Kasplex, Igra) today and a longer-term vision called vProgs for native smart contracts using zero-knowledge proofs.",{"id":138,"title":139,"titles":140,"content":141,"level":48},"\u002Fblog\u002Fkaspa#what-is-kaspa","What is Kaspa?",[14],"Kaspa aims to realize Satoshi Nakamoto's vision of fast, decentralized, secure digital money—but with modern upgrades. It improves on Bitcoin's original design by replacing the single-chain blockchain with a \"blockDAG.\" Instead of adding blocks one at a time, blockDAG allows many blocks to be created simultaneously and connects them in a network (Directed Acyclic Graph). The GHOSTDAG protocol orders any conflicting blocks to maintain consensus. Traditional BlockchainKaspa's BlockDAGOne block every 10 minutes (Bitcoin)~10 blocks per second (post-Crescendo)Sequential block creationParallel block creationLimited throughputHigher throughput potential Note: The Crescendo hardfork (May 5, 2025) upgraded the network from 1 BPS to 10 BPS. Higher rates (~32 BPS) are longer-term targets. Kaspa maintains proof-of-work mining with no pre-mine and no central authority—though ASICs now dominate the network hashrate, making GPU mining mainly a hobbyist pursuit.",{"id":143,"title":144,"titles":145,"content":146,"level":48},"\u002Fblog\u002Fkaspa#why-im-interested","Why I'm Interested",[14],"As a developer who values open-source principles, Kaspa caught my attention because: Technical approach: The blockDAG architecture is an elegant solution to the throughput vs. decentralization tradeoffActive development: The core team has been steadily improving the protocol, with smart contract capabilities on the horizonvProgs vision: Native smart contracts with off-chain execution and on-chain verification using zero-knowledge proofs (more on this below) I've started learning smart contract development and EVM programming to be ready when these capabilities become available.",{"id":148,"title":149,"titles":150,"content":151,"level":48},"\u002Fblog\u002Fkaspa#smart-contracts-current-and-future","Smart Contracts: Current and Future",[14],"Kaspa started as a pure currency. The ecosystem is now expanding with multiple approaches to programmability: Available Today: KRC-20: Token standard using L1 data insertion and off-chain indexing In Development: Kasplex L2: Planned Ethereum-compatible L2 with LUA VM targeted for December 2025Igra Labs: EVM-compatible ZK rollup (testnet live, mainnet targeted early 2026) Long-term Vision: vProgs: Native smart contracts built into L1 (see below)",{"id":153,"title":154,"titles":155,"content":156,"level":48},"\u002Fblog\u002Fkaspa#vprogs-off-chain-execution-on-chain-verification","vProgs: Off-Chain Execution, On-Chain Verification",[14],"vProgs (Verifiable Programs) represent Kaspa's long-term approach to smart contracts. The key idea: instead of executing contracts on-chain (slow and expensive) or on separate L2s (fragments liquidity), vProgs execute off-chain and prove correctness using zero-knowledge proofs. The blockchain only verifies the proof. How it works: Think of vProgs like apps that run independently but can interact when needed. A token swap might involve three vProgs—a price oracle, trading app, and stablecoin manager—each generating proofs that combine into one atomic transaction. Claimed benefits (per BSC News analysis): Efficient verification instead of full re-executionMultiple vProgs can interact in single transactions\"ScopeGas\" fee system for spam protection Current status: The vProgs Yellow Paper (Draft v0.0.1) was released September 2025. This is early-stage research—timelines are speculative and depend on development progress, testing, and audits.",{"id":158,"title":116,"titles":159,"content":160,"level":48},"\u002Fblog\u002Fkaspa#getting-started",[14],"If you want to explore Kaspa: Learn more: kaspa.org for documentationSet up a wallet: Kasware (browser) or Kaspium (mobile)Join the community: GitHub, Discord, Research ForumDeveloper resources: Kaspa Developer Hub, KIPs",{"id":162,"title":126,"titles":163,"content":164,"level":48},"\u002Fblog\u002Fkaspa#resources",[14],"Official: Kaspa.org · Documentation · Discord Ecosystem: Kasplex · Igra Labs · Kasia Technical: vProgs Yellow Paper · rusty-kaspa · KIPs Disclaimer: This post represents my personal interest and research. It is not financial advice. Always do your own research before investing in any cryptocurrency.",{"id":19,"title":18,"titles":166,"content":167,"level":42},[],"After starting to learn Vue 3 a few years ago, I decided to continue the learning path to Nuxt 3",{"id":169,"title":18,"titles":170,"content":171,"level":48},"\u002Fblog\u002Fdiscoveringnuxt#discovering-nuxt",[18],"After rebuilding this site vernaillen.dev from scratch up with Vue last year, for which I spend a lot of time selecting and integrating different vue and vite plugins, I decided to build my other website, Harmonics.be and links.vernaillen.dev with Nuxt 3. Nuxt makes it a lot easier and faster to bootstrap a new website. Less fiddling with plugins to make it all work nicely together. And it's bundled with Vite and running on Nitro's server engine, so it's pretty fast. I also love writing and publishing content with Markdown, therefor Nuxt Content is just perfect for me for content management. Edit: A month has past since I've first published this blog post, but since then I've also created a new website using Nuxt for my sister Anneleen Vernaillen, and today (March 2) I've put the Nuxt version of this website.",{"id":173,"title":174,"titles":175,"content":176,"level":48},"\u002Fblog\u002Fdiscoveringnuxt#deployed-on-vercel","Deployed on Vercel",[18],"At this moment I have deployed 6 websites using Nuxt on Vercel: anneleenvernaillen.com my sister, Anneleen Vernaillen's new website. All design and art work by her, web development by meharmonics.be my website for my activities as a sound healing practicioner, ecstatic dance dj and trance dance facilitatorvernaillen.dev this website, my freelance developer websitelinks.vernaillen.dev my \"link in bio\" appnuxt-audiomotion-analyzer-docs Nuxt AudioMotion Analyzer, a Vite plugin I made wrapping Henrique Vianna's audioMotion-analyzernuxt-audiomotion-analyzer.vercel.app a small demo site for the Vue AudioMotion Analyzer",{"id":178,"title":179,"titles":180,"content":181,"level":48},"\u002Fblog\u002Fdiscoveringnuxt#the-stack-im-using","The stack I'm using",[18],"Nuxt 3 as web frameworkit's abviously based on Vue.js as JavaScript frameworkNuxt Content 2 for managing content with markdownTailwindcss as CSS frameworkVitest for unit testingCypress for e2e testingpnpm as fast package managerRenovate for automating dependency updatesGitHub as code repositoryNetlify for 'bringing it all together' and hosting the appsVisual Studio Code for code editing",{"id":183,"title":184,"titles":185,"content":186,"level":48},"\u002Fblog\u002Fdiscoveringnuxt#the-learning-never-stops","The learning never stops",[18],"For learning everything about Nuxt I decided to purchase the Mastering Nuxt 3 video course, which is created by the team who created Nuxt 3. I didn't regret that purchase and I can highly recommed it. Currently I'm learning how to build and secure serverside api's with Nuxt.",{"id":23,"title":22,"titles":188,"content":189,"level":42},[],"Introducing a complete rewrite of the website for my freelance business, now built with Vue 3, Vite, Tailwind and Markdown",{"id":191,"title":192,"titles":193,"content":194,"level":48},"\u002Fblog\u002Fhello-world-vernaillen-dev#sunset-of-vernaillencom","Sunset of Vernaillen.com",[22],"To be honest the most important reason I wanted to make a new website is because Vernaillen.com was made in Liferay and I didn't want to keep a Liferay server running only for my personal website. Anyway, my main focus as a freelance consultant is not on Liferay any more lately, but more on full stack development with Spring micro-services, Angular or Vue.js, as well as on DevOps with Kubernetes, Jenkins, Sonar, etc. I wanted to become more skilled in Vue.js anyway, so I decided to rewrite my website using Vue 3, Vite, Tailwind and Markdown:",{"id":196,"title":197,"titles":198,"content":199,"level":48},"\u002Fblog\u002Fhello-world-vernaillen-dev#hello-world-for-vernaillendev","Hello World for Vernaillen.dev",[22],"For the design I decided to use this Startup Tailwind CSS Template, cause I'm a developer, not a designer :) It was fun to port into the Vue app. And after changing the main colors to match my company branding and logo (design by my sister, Anneleen Vernaillen), I thought the result was quite nice. Most of the fun for me was in learning the new features of Vue 3, learning how to use Vite and Tailwind, and create blog functionality based on markdown files. The result is a website that is very easy to edit and publish content updates, cause as a developer I'm obviously familiar with git and markdown anyway.",{"id":201,"title":202,"titles":203,"content":204,"level":48},"\u002Fblog\u002Fhello-world-vernaillen-dev#website-features","Website Features",[22],"Built with Vue 3, TypeScript, Vite and Tailwind CSSStatic Site Generation with vite-ssg, so search indexes can crawl the contentAll content is created using Markdown and rendered with vite-plugin-md and markdown-itSVG support in Vue with vite-svg-loader, used for the background graphicsRSS & Atom for newsreadersDark and Light styleTone.js and audio visualisation with vue-audiomotion-analyzerPinia is used to keep track of the audio player stateAutomated deployments \u002F auto publishing on NetlifyContinous integration with CircleCICode quality check with SonarCloudUnit tests with vitest",{"id":27,"title":26,"titles":206,"content":207,"level":42},[],"The story behind the vernaillen.com website",{"id":209,"title":210,"titles":211,"content":212,"level":48},"\u002Fblog\u002Fbuilding-a-stronger-personal-brand#the-crew","The Crew",[26],"January 2017 was a month that I will always remember. I left Belgium on January 6th for what would be a 2,5 months journey in Asia. For the first leg of my trip, I decided to spend 6 weeks in Bali because I wanted to focus on some side projects and get stuff done. To hold me accountable to reach my goals for these side projects, I decided to join a productivity program in Ubud called The Crew, organized and coached by Colleen Schell. During this one month of productivity I was hoping to finish a WordPress website for a client, profile myself better as a Liferay expert, define a roadmap for {dev}Nomads, a community for nomadic developers that I have started, and start executing that roadmap.",{"id":214,"title":215,"titles":216,"content":217,"level":48},"\u002Fblog\u002Fbuilding-a-stronger-personal-brand#program","Program",[26],"But it turned out completely different! In this month we had half day sessions 4 times a week, from Monday to Thursday. To give you an idea of the program, these are some of the topics we worked on: Define our \"North Star\", our personal missionAnalysis of our own personal value treeExercises around emotional intelligence and empathic listeningNLP with Helene WeissPracticing the Pomodoro techniqueWrite in a gratitude journal every dayDeep Dive: Focus on a Crew member's challenges...",{"id":219,"title":220,"titles":221,"content":222,"level":48},"\u002Fblog\u002Fbuilding-a-stronger-personal-brand#takeaways","Takeaways",[26],"This was quite intensive and I didn't get to focus as much on my projects as I wanted. I felt bad about that at first, but later I realized that what I got out of it instead was amazing. These are the most important things I got out of the program: I learned how to express myself and show who I am, creating my own value tree and translate this into text for my website and a strong personal brandI was able to redefine my goals and get more clarity, realizing that what works best for me is to focus on only one thing at a timeDiscussing emotions and being open about vulnerabilities was so far out of my comfort zone, but it has helped me to open up and realize that it can be powerful to show your vulnerability. It made me confident that I can be more open about being an HSP, Highly Sensitive Person. There is also a TED talk by Brene Brown about the Power of Vulnerability, that inspired me a lot, so I highly recommend it if you're interested in the topic.",{"id":224,"title":225,"titles":226,"content":227,"level":48},"\u002Fblog\u002Fbuilding-a-stronger-personal-brand#new-ideas","New ideas",[26],"Now, what does this all has to do with my new website, you're asking? It is the Crew program that has set the mindset in which the ideas for the new website were born.",{"id":229,"title":230,"titles":231,"content":232,"level":48},"\u002Fblog\u002Fbuilding-a-stronger-personal-brand#personal-branding","Personal branding",[26],"And during the program, another opportunity presented itself: a personal branding workshop organized by Patricia Parkinson at the Outpost coworking space. First I didn't want to do yet another workshop that would eat more of my time, cause I was feeling bad about not having much work done yet for the WordPress website for my client, but on the other hand it was a perfect opportunity to focus on my personal branding, which I actually need to do as well. The workshop turned out to be amazing as well. We learned why personal branding is important, we did a peer survey, defined our audience persona, build a mood board and practiced our elevator pitch. This was exactly what I needed to translate what I had learned at the Crew program into an actual personal brand. After the workshop, Patricia helped me to translate the values I had listed in my value tree into the different sections on my website. Patricia also came up with the brilliant idea of listing the projects I have worked on in \"portfolio style\" using a category filter based on the technologies I used on these projects. So, the end result is a website that is not only showing what I do, but also who I am, how I love to work and what my values and passions are. Last, but not least, I want to thank Carole Favre, one of my fellow Crew members, for coming up with the term \"Techie with a heart\" (I love it!), as well as the other Crew members for supporting me in this journey.",{"id":31,"title":30,"titles":234,"content":235,"level":42},[],"Plans for the devNomads website",{"id":237,"title":238,"titles":239,"content":240,"level":48},"\u002Fblog\u002Fusing-liferay-7-to-build-a-community-website#liferay-7","Liferay 7",[30],"Since I wrote the previous article on this blog, about my plans after Liferay DevCon last year, I've been testing every alpha, beta, rc and ga release of the new Liferay 7. The reason why I was following it up so closely is not just because I make a living as a freelance Liferay consultant, but also because I decided to use Liferay 7 to build the community website for {dev}Nomads, a community for nomadic developers. For those who don't know Liferay yet, here's why to use it as described on the Liferay website: The reasons to use Liferay Portal for your website are simple: it provides a robust platform to build your site on quickly and serve it to all clients, be they desktop, mobile, or anything in between; it provides all the standard applications you need to run on your site; and it provides an easy to use development framework for new applications or customization. In addition to this, Liferay Portal is developed using an open source methodology, by people from around the world. The code base is solid and has been proved to be reliable and stable in mission critical deployments in diverse industries.",{"id":242,"title":243,"titles":244,"content":245,"level":48},"\u002Fblog\u002Fusing-liferay-7-to-build-a-community-website#building-a-community-website","Building a community website",[30],"In fact Liferay provides almost everything \"out of the box\" that is needed to build a great community website: Message Boards This will be one of the core features for the {dev}Nomads website.PollsWiki'sMicroblogs: status updates like twitterBlogsForm builderWeb Content & Document Management Besides the specific community features Liferay also supports: Multiple sites and subsites This is excellent for {dev}Nomads for creating a private forum for each mastermind group. Virtual instances In fact this website (www.vernaillen.com) is set up as a virtual instance on the same Liferay server.Staging Allows to do all the content authoring and testing in a staging environment and publish them to a production environment when ready.Geolocation Out of the box ability to geolocate all web content, data lists, documents & media as well as the ability to create lists of geolocalized content and publish them in a Map. All the Liferay functionality is also accessible through a RESTFul Webservice API This is excellent for integration with other applications or mobile apps.Full modularity with OSGi All functionality is provided as separate modules, which allows to easily switch features on and off, but also easily extend and customize functionality. These are a few of the new features of the Liferay 7 that I'm most excited about: AlloyEditor is a new web content editor build on CKEditor. Liferay decided to remove the default UI of CKEditor and build a completely new UI using React. The inline content authoring works very easy, but it's also possible to edit the html directly, including side by side editing and html validation: In other words: this is an excellent editor for the target audience of {dev}Nomads, cause they are all developers. :) The new Form builder allows defining and publishing advanced dynamic forms. The forms can have complex multi-column layouts and span several pages. They can be published in any Liferay site just by dropping the form into a page or also Google Forms style, by providing a URL that links directly to a full page form. Many field types are included out of the box and custom types can be added by deploying custom modules. Forms can also be integrated with Liferay's workflow system to submit forms through a predefined process.",{"id":35,"title":34,"titles":247,"content":248,"level":42},[],"Liferay DevCon",{"id":250,"title":251,"titles":252,"content":253,"level":48},"\u002Fblog\u002Fmy-action-plan-after-liferay-devcon#liferay-devcon-2015","Liferay DevCon 2015",[34],"A few weeks ago I went to the Liferay Developer Conference in Darmstadt. Needless to say there were many new features of Liferay 7 presented and lot's of exciting stuff happened at the conference. You can read about the highlights in the blogposts of Olaf Kock and James Falkner.",{"id":255,"title":256,"titles":257,"content":258,"level":48},"\u002Fblog\u002Fmy-action-plan-after-liferay-devcon#my-action-plan","My action plan",[34],"It was already the 3rd year in a row that I attended the conference and as always it has given me a motivational boost. So, I made a list for myself about the actions I want to take after the conference and I'd like to share this with you: Participate more in the forums. I've been trying to do that for a while already, but it's not always easy when working full time as a consultant. But James Falkner announced the use of networkactivator.com for the Liferay forums, which is a system that sends a list every week of unanswered forum topics. I'm now subscribed for the Theming and Development sections.Test new Liferay7 theming features. I've been part of the Liferay 7 Community Expedition from the start, tested some milestone releases and posted a few forum topics about it. I was surprised though when James Falkner mentioned me in his Community Update at DevCon on the leaderboard of the expedition. This motivates me to be involved even more, so I'm actively testing new features in the alpha releases now.Get Liferay 7 up and running for my website. Maybe it's very early to already base a live website on on alpha version, but after all it is just a website and no real portal functionality is needed yet. The most important part to be able to put this website online, was to learn about the new theming features of Liferay 7. Lots is changing fo the theming as well, but I managed to convert my Liferay 6.2 theme into a Liferay 7 theme. :)Start blogging on vernaillen.com. Which also happened already, because you're reading my first blogpost right now. :)And lastly, but maybe the most important one, start building Liferay plugins to distribute through the Liferay Marketplace. I won't share yet what exactly I'm working on, but I might do it when i'm a bit further in the process. :) Starting this week I will work as a consultant for only 4 days per week instead of 5, which will give me more space to work on my own projects and contribute back to the community.",{"id":260,"title":261,"body":262,"description":263,"extension":264,"links":265,"meta":276,"navigation":277,"path":278,"seo":279,"stem":280,"__hash__":281},"pages\u002Fopen-source.yml","Open Source",null,"Modules, tools, and starters I built and maintain — plus pull requests merged into projects across the ecosystem.","yml",[266,271],{"label":267,"to":268,"icon":269,"color":270},"GitHub","https:\u002F\u002Fgithub.com\u002Fvernaillen","i-simple-icons-github","neutral",{"label":272,"to":273,"icon":274,"variant":275},"Let's collaborate","https:\u002F\u002Fcalendly.com\u002Fvernaillen\u002F15min","i-lucide-calendar","outline",{},true,"\u002Fopen-source",{"title":261,"description":263},"open-source","C8cOUM5kJ8pHUse4MuaywLx25yTb0IkKenM-AhmQfcY",[283,297,310,322,337,348],{"id":284,"title":285,"date":286,"description":287,"extension":264,"image":288,"meta":289,"stem":290,"tags":291,"url":295,"video":37,"__hash__":296},"projects\u002Fprojects\u002F1.wpnuxt.yml","WPNuxt","2026-02-01","A Nuxt module to use WordPress as a headless CMS with a Nuxt frontend. Connects via GraphQL for the best of both worlds — familiar editing for content creators, cutting-edge frontend for developers.","\u002Fimages\u002Fprojects\u002Fwpnuxt-logo-dark.png",{},"projects\u002F1.wpnuxt",[292,293,294,261],"Nuxt","WordPress","GraphQL","https:\u002F\u002Fwpnuxt.com","cJjATPjLBmGf0-Z34KWnoPb5yurtUz9AjqYd9kywoAc",{"id":298,"title":299,"date":300,"description":301,"extension":264,"image":302,"meta":303,"stem":304,"tags":305,"url":308,"video":37,"__hash__":309},"projects\u002Fprojects\u002F2.vernaillen-dev.yml","Vernaillen.dev","2026-01-01","This very website — my developer portfolio and blog. Built with Nuxt 4, Nuxt UI, and Nuxt Content. Open source on GitHub.","\u002Fimages\u002Fprojects\u002Fvernaillendev.png",{},"projects\u002F2.vernaillen-dev",[292,306,307],"Nuxt UI","Nuxt Content","https:\u002F\u002Fvernaillen.dev","Y5e_JV7-rG47TWaQ8OVX4k8fcDJOInqrsEdxo8USRRM",{"id":311,"title":312,"date":313,"description":314,"extension":264,"image":315,"meta":316,"stem":317,"tags":318,"url":320,"video":37,"__hash__":321},"projects\u002Fprojects\u002F3.harmonics.yml","Harmonics.be","2023-01-01","Website for my sound healing, ecstatic dance, and trance dance activities. Built with Nuxt and Nuxt Content, deployed on Vercel.","\u002Fimages\u002Fprojects\u002Fharmonics.png",{},"projects\u002F3.harmonics",[292,307,319],"Vercel","https:\u002F\u002Fharmonics.be","QST8PF4wbVaz235gmsI7jS838EyAiG93937yp2k-TSg",{"id":323,"title":324,"date":325,"description":326,"extension":264,"image":327,"meta":328,"stem":329,"tags":330,"url":335,"video":37,"__hash__":336},"projects\u002Fprojects\u002F3.vue-fft-visualizer.yml","Vue FFT Visualizer","2024-01-01","Real-time FFT audio visualization component for Vue. Renders frequency data as interactive WebGL visuals — where creative coding meets the web audio API.","\u002Fimages\u002Fprojects\u002Ffft-visualizer.png",{},"projects\u002F3.vue-fft-visualizer",[331,332,333,334],"Vue","WebGL","Audio","Creative Coding","https:\u002F\u002Fgithub.com\u002Fvernaillen\u002Fvue-fft-visualizer","nTDcuZcq3bh4uW833ntBw2A33MNtnlQ8GB8h3ojjnQ4",{"id":338,"title":339,"date":340,"description":341,"extension":264,"image":342,"meta":343,"stem":344,"tags":345,"url":346,"video":277,"__hash__":347},"projects\u002Fprojects\u002F4.audiomotion-analyzer.yml","Nuxt Audiomotion Analyzer","2023-06-01","High-resolution real-time audio spectrum analyzer for Nuxt. A plugin wrapping Henrique Vianna's audioMotion-analyzer for visualizing audio data.","\u002Fimages\u002Fprojects\u002Fvue-audiomotion-analyzer.mp4",{},"projects\u002F4.audiomotion-analyzer",[292,333,334],"https:\u002F\u002Fnuxt-audiomotion-analyzer-docs.vercel.app\u002F","uX3f_ItjT8ZEhPaIkwOIUb-PJ91Zj5iMwlwKZYh1018",{"id":349,"title":312,"date":313,"description":314,"extension":264,"image":315,"meta":350,"stem":351,"tags":352,"url":320,"video":37,"__hash__":353},"projects\u002Fprojects\u002F5.harmonics.yml",{},"projects\u002F5.harmonics",[292,307,319],"WshMoFuF3uEnAqlK3Vouc1SKZIMFg5o-EFmSxy-la2s",{"authored":355,"contributed":356},[],[],1778406861238]