<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Joni Ilman Pahmi</title>
    <description>The latest articles on DEV Community by Joni Ilman Pahmi (@joni_ilman12).</description>
    <link>https://dev.to/joni_ilman12</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4110455%2F7d0dc212-6f1e-4c54-9605-f56377e324b3.png</url>
      <title>DEV Community: Joni Ilman Pahmi</title>
      <link>https://dev.to/joni_ilman12</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/joni_ilman12"/>
    <language>en</language>
    <item>
      <title>I Turned My WordPress Store Into an MCP Server. Now an AI Agent Runs My Business — With My Permission.</title>
      <dc:creator>Joni Ilman Pahmi</dc:creator>
      <pubDate>Fri, 09 Oct 2026 00:25:37 +0000</pubDate>
      <link>https://dev.to/joni_ilman12/i-turned-my-wordpress-store-into-an-mcp-server-now-an-ai-agent-runs-my-business-with-my-1i3c</link>
      <guid>https://dev.to/joni_ilman12/i-turned-my-wordpress-store-into-an-mcp-server-now-an-ai-agent-runs-my-business-with-my-1i3c</guid>
      <description>&lt;p&gt;&lt;em&gt;Or: how a WordPress plugin, an embedded OAuth 2.1 authorization server, and a blue slime named Blub are teaching AI agents to ask before they act.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The story that started it all
&lt;/h2&gt;

&lt;p&gt;One evening, an AI agent created a product in my WooCommerce store.&lt;/p&gt;

&lt;p&gt;Not through a hack. Not through a leaked admin password. And not because I gave an AI unrestricted access to my WordPress dashboard.&lt;/p&gt;

&lt;p&gt;It proposed the action, I reviewed the details, and I approved it through an admin dashboard.&lt;/p&gt;

&lt;p&gt;The product was &lt;strong&gt;"Cilok Goang Pedas Mantap"&lt;/strong&gt; — a spicy Indonesian street-food product — with its price, sale price, stock, SKU, categories, tags, and SEO metadata configured through an AI-assisted workflow.&lt;/p&gt;

&lt;p&gt;The agent was Meta's Muse Spark, accessed through Muse Code.&lt;/p&gt;

&lt;p&gt;The bridge that made this possible is called &lt;strong&gt;&lt;a href="https://github.com/joniilmanfahmi00-collab/musespark-mcp" rel="noopener noreferrer"&gt;MuseSpark MCP Bridge&lt;/a&gt;&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;It's a WordPress plugin that turns a WordPress + WooCommerce installation into an MCP server, allowing AI agents to interact with business data through structured tools rather than relying entirely on browser automation.&lt;/p&gt;

&lt;p&gt;And the part I care about most isn't that an AI can create a product.&lt;/p&gt;

&lt;p&gt;It's that I can decide what it is allowed to do.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is MuseSpark MCP Bridge?
&lt;/h2&gt;

&lt;p&gt;MuseSpark MCP Bridge exposes selected WordPress business capabilities through the &lt;strong&gt;Model Context Protocol (MCP)&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fukdfc3gungoat1ujga0l.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fukdfc3gungoat1ujga0l.gif" alt="Musespark MCP Bridge WP Dashboard Appreance" width="719" height="394"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Instead of building a separate integration for every AI agent, the plugin provides a standardized interface for operations such as reading posts, managing product inventory, creating content, updating SEO metadata, and generating daily business summaries.&lt;/p&gt;

&lt;p&gt;Here's the current toolset:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Tool&lt;/th&gt;
&lt;th&gt;Access&lt;/th&gt;
&lt;th&gt;Purpose&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;wp_list_posts&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Read&lt;/td&gt;
&lt;td&gt;Retrieve WordPress posts&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;wp_create_post&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Write&lt;/td&gt;
&lt;td&gt;Create content or drafts&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;seo_set_post_meta&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Write&lt;/td&gt;
&lt;td&gt;Update Yoast SEO metadata&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;wc_list_products&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Read&lt;/td&gt;
&lt;td&gt;Retrieve WooCommerce products&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;wc_create_product&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Write&lt;/td&gt;
&lt;td&gt;Create WooCommerce products&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;wc_update_stock&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Write&lt;/td&gt;
&lt;td&gt;Update inventory&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;newsletter_add_subscriber&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Write&lt;/td&gt;
&lt;td&gt;Add a newsletter subscriber&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;report_daily_summary&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Read&lt;/td&gt;
&lt;td&gt;Generate a daily business summary&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;The server implements the MCP &lt;code&gt;2025-06-18&lt;/code&gt; specification over Streamable HTTP, including the relevant initialization, ping, tools, resources, and prompts protocol methods.&lt;/p&gt;

&lt;p&gt;It has been verified end-to-end with the official MCP Inspector, including the OAuth authorization flow over HTTPS.&lt;/p&gt;

&lt;p&gt;The project has also been tested in live Muse Code sessions using Muse Spark, where the agent created real products and content drafts through the approval workflow.&lt;/p&gt;

&lt;p&gt;This is still an evolving prototype, but the basic integration is already doing useful work.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why MCP instead of another custom API?
&lt;/h2&gt;

&lt;p&gt;WordPress already has a REST API. WooCommerce has its own API. So why introduce MCP?&lt;/p&gt;

&lt;p&gt;Because exposing an API and giving an AI agent a usable interface to business operations are two different problems.&lt;/p&gt;

&lt;p&gt;A conventional API gives applications endpoints and data structures. MCP provides a standardized way for compatible AI clients to discover and invoke tools.&lt;/p&gt;

&lt;p&gt;For example, instead of asking an agent to figure out how to construct a series of HTTP requests to create a product, I can expose a tool called &lt;code&gt;wc_create_product&lt;/code&gt; with a defined input schema.&lt;/p&gt;

&lt;p&gt;The agent can reason about the available tool, prepare its arguments, and request the operation through the MCP server.&lt;/p&gt;

&lt;p&gt;The plugin then handles the WordPress-side integration and applies its authorization and autonomy policies.&lt;/p&gt;

&lt;p&gt;This doesn't make every AI agent automatically compatible, nor does it eliminate the need for proper validation. It simply gives compatible clients a more consistent interface to work with.&lt;/p&gt;

&lt;p&gt;The architecture looks like this:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AI agent → MCP client → MuseSpark MCP Bridge → WordPress / WooCommerce&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The AI handles reasoning and tool selection. WordPress remains the source of truth for business data.&lt;/p&gt;

&lt;p&gt;And the bridge determines how those tool requests are handled.&lt;/p&gt;

&lt;h2&gt;
  
  
  The part I'm proudest of: the AI asks for permission
&lt;/h2&gt;

&lt;p&gt;Giving an AI agent access to a business system is easy to demonstrate.&lt;/p&gt;

&lt;p&gt;Building a sensible boundary between what the agent &lt;em&gt;can propose&lt;/em&gt; and what it &lt;em&gt;can actually execute&lt;/em&gt; is the more interesting engineering problem.&lt;/p&gt;

&lt;p&gt;MuseSpark MCP Bridge includes an autonomy policy engine with three modes.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. &lt;code&gt;read_only&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;The agent can inspect permitted business data, but write operations are not allowed.&lt;/p&gt;

&lt;p&gt;This is the mode I'd start with when connecting an unfamiliar agent to a real store.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. &lt;code&gt;draft_only&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;The agent can prepare drafts rather than directly publishing content.&lt;/p&gt;

&lt;p&gt;This is useful for workflows where AI can do the repetitive preparation while a human retains editorial control.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. &lt;code&gt;require_confirmation&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;This is the default mode.&lt;/p&gt;

&lt;p&gt;When a write action requires confirmation, the plugin routes the request to an approval queue rather than immediately executing the requested operation.&lt;/p&gt;

&lt;p&gt;I can review the proposed payload in the admin UI, approve it, or reject it. The action runs only after approval.&lt;/p&gt;

&lt;p&gt;The distinction matters: &lt;strong&gt;an agent requesting an action is not the same as an action being authorized to execute.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The server also validates scopes at request time and records them with the task for auditing.&lt;/p&gt;

&lt;p&gt;That creates a clearer record of what was requested and under which permissions it was processed.&lt;/p&gt;

&lt;p&gt;Of course, an approval queue isn't a substitute for secure authorization, input validation, or proper capability checks. It's one layer in a broader security model.&lt;/p&gt;

&lt;p&gt;But it's an important layer.&lt;/p&gt;

&lt;p&gt;I don't want an agent to accidentally publish a product with the wrong price just because it misunderstood my instructions. And I certainly don't want a compromised integration to have unrestricted write access to my store.&lt;/p&gt;

&lt;h2&gt;
  
  
  OAuth 2.1, built into WordPress
&lt;/h2&gt;

&lt;p&gt;One of the more substantial parts of this project is its embedded OAuth 2.1 authorization server.&lt;/p&gt;

&lt;p&gt;Rather than relying exclusively on manually generated credentials, the plugin implements an authorization flow designed for compatible MCP clients.&lt;/p&gt;

&lt;p&gt;The current implementation includes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Protected resource metadata under RFC 9728.&lt;/li&gt;
&lt;li&gt;Authorization server discovery under RFC 8414.&lt;/li&gt;
&lt;li&gt;Dynamic client registration under RFC 7591.&lt;/li&gt;
&lt;li&gt;Mandatory PKCE using &lt;code&gt;S256&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;A user consent screen.&lt;/li&gt;
&lt;li&gt;Refresh-token rotation.&lt;/li&gt;
&lt;li&gt;Token revocation.&lt;/li&gt;
&lt;li&gt;A legacy scoped JWT bearer-token option for supported workflows.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Tokens and authorization codes are stored as hashes rather than plaintext credentials. The plugin also provides audit logging and an admin interface for managing tokens, approvals, logs, and settings.&lt;/p&gt;

&lt;p&gt;For command-line workflows, a scoped JWT can be generated through WP-CLI:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;wp musespark generate-token &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--user_id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;1 &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--scopes&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s1"&gt;'*'&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;--ttl&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;3600
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That example deliberately requests all scopes, so it should be treated as a development example, not a recommended production configuration. In a real deployment, use the narrowest permissions the workflow needs and an appropriately privileged WordPress account.&lt;/p&gt;

&lt;p&gt;OAuth implementation details are not a guarantee of security by themselves. The project still needs further hardening, and I don't consider the current prototype production-ready.&lt;/p&gt;

&lt;p&gt;That distinction is important enough to say explicitly.&lt;/p&gt;

&lt;h2&gt;
  
  
  BYOK: Bring your own agent
&lt;/h2&gt;

&lt;p&gt;My philosophy is simple: &lt;strong&gt;the plugin ships no AI model.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;There is no bundled model, no AI inference proxy, and no per-token markup. MuseSpark MCP Bridge is an integration layer, not an AI platform.&lt;/p&gt;

&lt;p&gt;The responsibilities are deliberately separated:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;The agent&lt;/strong&gt; reasons about the task and decides which tools to request.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The MCP server&lt;/strong&gt; exposes structured business capabilities.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;WordPress&lt;/strong&gt; remains the source of truth.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The authorization and policy layers&lt;/strong&gt; determine which operations are permitted and whether approval is required.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The human operator&lt;/strong&gt; retains control over sensitive actions.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Muse Spark through Muse Code is the first agent workflow I've verified end-to-end with this project.&lt;/p&gt;

&lt;p&gt;Because the server implements MCP rather than a proprietary Muse-specific tool protocol, other compatible MCP clients can potentially use the same endpoint too. Claude Desktop, Cursor, and custom agents are examples of clients worth exploring, but compatibility and authorization flows must be tested individually.&lt;/p&gt;

&lt;p&gt;This is the architectural advantage I want to preserve.&lt;/p&gt;

&lt;p&gt;If I change AI providers tomorrow, I shouldn't have to rebuild the entire WordPress integration just to expose the same business operations to another agent.&lt;/p&gt;

&lt;p&gt;One backend. A standardized interface. Different potential agents.&lt;/p&gt;

&lt;p&gt;That's a much more interesting proposition to me than tying a business workflow to a single AI vendor.&lt;/p&gt;

&lt;h2&gt;
  
  
  Meet Blub 💙
&lt;/h2&gt;

&lt;p&gt;Every serious security project needs an unserious mascot.&lt;/p&gt;

&lt;p&gt;Meet &lt;strong&gt;Blub&lt;/strong&gt;, a chubby blue slime with an operator headset who lives in the admin dashboard.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F7pgdqpkwzmahm84he54y.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F7pgdqpkwzmahm84he54y.png" alt="Blub" width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Blub is there to greet the operator and keep the approval workflow a little less intimidating.&lt;/p&gt;

&lt;p&gt;The mascot also has a small origin story: I briefly considered using a third-party mascot as a local easter egg, then decided that building an independent identity was the better choice.&lt;/p&gt;

&lt;p&gt;So I created Blub instead.&lt;/p&gt;

&lt;p&gt;His catchphrase is:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;"Blub!"&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Depending on the context, it roughly means, "The task is done."&lt;/p&gt;

&lt;p&gt;The plan is to bring Blub into future chat-based workflows, including a Telegram control bot with inline approval and rejection actions.&lt;/p&gt;

&lt;p&gt;That integration is on the roadmap, not a shipped feature yet.&lt;/p&gt;

&lt;p&gt;Still, I like the idea of a friendly little slime reminding me that an AI agent has something waiting for my approval.&lt;/p&gt;

&lt;p&gt;Security doesn't have to look intimidating to be taken seriously.&lt;/p&gt;

&lt;h2&gt;
  
  
  What works today, and what doesn't?
&lt;/h2&gt;

&lt;p&gt;I'd rather be precise about the project's status than turn a working prototype into a production-readiness claim.&lt;/p&gt;

&lt;p&gt;MuseSpark MCP Bridge is currently at &lt;strong&gt;v0.2.x&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  What's been verified
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;MCP protocol interaction through the official MCP Inspector.&lt;/li&gt;
&lt;li&gt;An end-to-end OAuth flow over HTTPS with MCP Inspector.&lt;/li&gt;
&lt;li&gt;Live Muse Code sessions using Muse Spark.&lt;/li&gt;
&lt;li&gt;Real WooCommerce product creation through the approval workflow.&lt;/li&gt;
&lt;li&gt;Content-draft workflows through the same integration.&lt;/li&gt;
&lt;li&gt;The WordPress admin interface for managing tokens, approvals, logs, and settings.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  What's still missing
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;An automated PHPUnit and integration-test suite.&lt;/li&gt;
&lt;li&gt;Rate limiting.&lt;/li&gt;
&lt;li&gt;Further OAuth and security hardening.&lt;/li&gt;
&lt;li&gt;The final WordPress.org submission package.&lt;/li&gt;
&lt;li&gt;Planned chat gateways and more granular autonomy controls.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These aren't minor footnotes. They're part of the work required before I would recommend treating the project as a production-ready business integration.&lt;/p&gt;

&lt;p&gt;The current implementation is functionally verified in specific workflows, but that is not the same as having comprehensive automated coverage or a completed security review.&lt;/p&gt;

&lt;p&gt;I'd rather publish an honest roadmap than pretend those gaps don't exist.&lt;/p&gt;

&lt;h2&gt;
  
  
  What's next?
&lt;/h2&gt;

&lt;p&gt;There are four areas where contributions could make a meaningful difference.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Automated testing&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The biggest gap is a proper PHPUnit suite and an integration harness covering authorization, scopes, tool execution, approval decisions, and failure cases.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Chat-based control&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A Telegram bot with inline approve/reject buttons is planned. WhatsApp Cloud API integration is another potential direction, particularly for customer-service workflows.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. More granular autonomy policies&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The current three policy modes provide a starting point. The roadmap includes per-domain autonomy levels, from tightly controlled operations to more autonomous workflows, with appropriate boundaries.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Documentation and deployment&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Installation instructions, OAuth flow documentation, translations, and a cleaner distribution package all need continued work.&lt;/p&gt;

&lt;p&gt;If you want to explore the code, report a bug, or contribute, start here:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Repository:&lt;/strong&gt; &lt;a href="https://github.com/joniilmanfahmi00-collab/musespark-mcp" rel="noopener noreferrer"&gt;https://github.com/joniilmanfahmi00-collab/musespark-mcp&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Contributing guide:&lt;/strong&gt; &lt;a href="https://github.com/joniilmanfahmi00-collab/musespark-mcp/blob/main/CONTRIBUTING.md" rel="noopener noreferrer"&gt;https://github.com/joniilmanfahmi00-collab/musespark-mcp/blob/main/CONTRIBUTING.md&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Security policy:&lt;/strong&gt; &lt;a href="https://github.com/joniilmanfahmi00-collab/musespark-mcp/blob/main/SECURITY.md" rel="noopener noreferrer"&gt;https://github.com/joniilmanfahmi00-collab/musespark-mcp/blob/main/SECURITY.md&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The project is distributed under GPL-2.0-or-later.&lt;/p&gt;

&lt;p&gt;MuseSpark MCP Bridge is an independent community integration. Muse, Muse Spark, and related marks belong to Meta Platforms, Inc.; the project is not affiliated with, endorsed by, or sponsored by Meta.&lt;/p&gt;

&lt;h2&gt;
  
  
  Your business, your rules
&lt;/h2&gt;

&lt;p&gt;I started this project because I wanted to explore a practical question:&lt;/p&gt;

&lt;p&gt;What happens when an AI agent can interact with a real business system, instead of merely explaining how a human could do it?&lt;/p&gt;

&lt;p&gt;The answer isn't that the AI should automatically become the administrator of everything.&lt;/p&gt;

&lt;p&gt;It's that we can give agents specific tools, define their permissions, record what they do, and require human approval where it matters.&lt;/p&gt;

&lt;p&gt;A WordPress store doesn't need to surrender control to benefit from AI automation.&lt;/p&gt;

&lt;p&gt;It needs a reliable interface, a clear authorization model, and sensible limits on what an agent can do.&lt;/p&gt;

&lt;p&gt;That's what I'm trying to build with MuseSpark MCP Bridge.&lt;/p&gt;

&lt;p&gt;If you'd like to explore the current prototype, check out the repository:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://github.com/joniilmanfahmi00-collab/musespark-mcp" rel="noopener noreferrer"&gt;GitHub: MuseSpark MCP Bridge&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;For a local or development installation, a compatible MCP client can connect to the endpoint:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://your-site.test/wp-json/musespark-mcp/v1/mcp
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Replace the example hostname with your own WordPress site's HTTPS URL, and configure the client using the authentication method it supports.&lt;/p&gt;

&lt;p&gt;This is a prototype, so review the setup and security requirements before connecting it to a live store.&lt;/p&gt;

&lt;p&gt;The long-term goal is straightforward: let the agent do the repetitive work, let the system enforce the boundaries, and let the human remain in control.&lt;/p&gt;

&lt;p&gt;And when there's a task waiting for approval?&lt;/p&gt;

&lt;p&gt;Blub! 💙&lt;/p&gt;

</description>
      <category>ai</category>
      <category>wordpress</category>
      <category>automation</category>
      <category>opensource</category>
    </item>
    <item>
      <title>Alisha Catat: a local Gemma order assistant for my friend small print shop in Ciamis, Indonesia</title>
      <dc:creator>Joni Ilman Pahmi</dc:creator>
      <pubDate>Sun, 04 Oct 2026 23:56:47 +0000</pubDate>
      <link>https://dev.to/joni_ilman12/alisha-catat-a-local-gemma-order-assistant-for-a-small-print-shop-in-ciamis-indonesia-1cg8</link>
      <guid>https://dev.to/joni_ilman12/alisha-catat-a-local-gemma-order-assistant-for-a-small-print-shop-in-ciamis-indonesia-1cg8</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/hacktoberfest-weekend-2026-10-01"&gt;Hacktoberfest Weekend Challenge: Build for a Friend&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;Meet &lt;strong&gt;Alisha Cetak&lt;/strong&gt;, a small print shop in Cisontrol, Rancah, Indonesia, owned by my friend A Asep, who agreed to be named in this article.&lt;/p&gt;

&lt;p&gt;Like many small businesses, the shop handles practical, everyday work: banners, photo prints, ID cards, invitations, and other printing orders. Prices are maintained on a poster, while order details and transactions have traditionally been recorded by hand.&lt;/p&gt;

&lt;p&gt;That workflow works, but recording orders, calculating prices, tracking down payments, and preparing sales summaries can become repetitive.&lt;/p&gt;

&lt;p&gt;So I built Asep a small order assistant powered by a locally running Gemma model.&lt;/p&gt;

&lt;p&gt;The idea is simple: &lt;strong&gt;let the owner describe an order naturally, then let the application turn it into structured, verifiable business data.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;For example, Asep can type an order like this:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Pak Dedi pesan spanduk 3x1 dua lembar, DP 100rb&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;In English, that roughly means:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Mr. Dedi orders two 3 × 1 metre banners, with a 100,000 IDR down payment.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The application extracts the relevant information, matches the item against the shop's price list, calculates the price, and presents a confirmation screen before saving the order.&lt;/p&gt;

&lt;p&gt;Once saved, the data can be used to produce receipts in PDF, Excel, or image format for sharing through WhatsApp. The application also provides daily, weekly, and monthly sales reports.&lt;/p&gt;

&lt;p&gt;The goal isn't to replace the shop owner with an AI agent. It's to reduce repetitive administrative work while keeping the owner in control of every transaction.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Demo:&lt;/strong&gt; &lt;a href="https://youtu.be/5HfD7Sn_3tU" rel="noopener noreferrer"&gt;CLICK ME!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Screenshots:&lt;/strong&gt; &lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
  &lt;tbody&gt;
&lt;tr&gt;
    &lt;td&gt;&lt;img width="376" height="669" alt="brave_XdVAX5Hizv" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fuser-attachments%2Fassets%2F591574cf-2025-48cd-92c7-39610603a8e8"&gt;&lt;/td&gt;
    &lt;td&gt;&lt;img width="375" height="667" alt="brave_TgSRCOOykD" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fuser-attachments%2Fassets%2F23597838-3ccb-420c-a31c-2615c993842e"&gt;&lt;/td&gt;
    &lt;td&gt;&lt;img width="375" height="667" alt="brave_hEydZyixao" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fuser-attachments%2Fassets%2F95958486-fc41-4df5-bd42-8a4ab36098d3"&gt;&lt;/td&gt;
    &lt;td&gt;&lt;img width="375" height="667" alt="brave_z5DUQnjVdN" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fuser-attachments%2Fassets%2F72dc525e-7578-4977-a54d-ed20076e480e"&gt;&lt;/td&gt;
    &lt;td&gt;&lt;img width="375" height="667" alt="brave_OtdunzwdjD" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Fuser-attachments%2Fassets%2Fad8790b9-767a-47d6-abae-55ccd7c62058"&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;I'd also like to include a photo of Asep using the application at his counter, with his permission and with customer information hidden.&lt;/p&gt;

&lt;p&gt;The application has been tried at the shop. This is an early, practical use case rather than a claim that the system has already been validated across hundreds of transactions.&lt;/p&gt;

&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Repository:&lt;/strong&gt; &lt;a href="https://github.com/joniilmanfahmi00-collab/alisha-catat" rel="noopener noreferrer"&gt;https://github.com/joniilmanfahmi00-collab/alisha-catat&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The application is built with Solid-Vue JS, my own Vue + Vite framework with file-based API routes powered by h3.&lt;/p&gt;

&lt;p&gt;The rest of the stack includes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Ollama + Gemma 3&lt;/strong&gt; for local language-model inference.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;SQLite + Drizzle ORM&lt;/strong&gt; for local data storage.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Tailwind CSS&lt;/strong&gt; for styling.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Tabler Icons&lt;/strong&gt; for interface icons.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Chartist&lt;/strong&gt; for sales charts.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;pdf-lib&lt;/strong&gt; for PDF receipts.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;ExcelJS&lt;/strong&gt; for Excel exports.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Decimal.js&lt;/strong&gt; for monetary calculations.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  How I Built It
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. A local model running on modest hardware
&lt;/h3&gt;

&lt;p&gt;I used &lt;code&gt;gemma3:4b&lt;/code&gt; through Ollama on my development machine:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;AMD A8-9600 CPU&lt;/li&gt;
&lt;li&gt;8 GB RAM&lt;/li&gt;
&lt;li&gt;No dedicated GPU&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This was an important constraint. I wanted to explore whether an open-weight model could be useful for an actual small-business workflow without requiring a GPU, a cloud inference service, or a subscription to a hosted language-model API.&lt;/p&gt;

&lt;p&gt;The model runs locally on the machine. For typed orders, the core order-parsing workflow does not require an internet connection.&lt;/p&gt;

&lt;p&gt;The performance is not instant, but the experiment showed that a small local model can still be useful when the task is narrowly defined.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Gemma extracts data; ordinary code handles the money
&lt;/h3&gt;

&lt;p&gt;One of the most important design decisions was limiting what the model is allowed to do.&lt;/p&gt;

&lt;p&gt;Gemma is responsible for extracting structured information from the customer's natural-language order, including:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Customer name&lt;/li&gt;
&lt;li&gt;Product or service&lt;/li&gt;
&lt;li&gt;Dimensions or size&lt;/li&gt;
&lt;li&gt;Quantity&lt;/li&gt;
&lt;li&gt;Unit&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The model returns JSON constrained by a schema.&lt;/p&gt;

&lt;p&gt;For example, an order mentioning two banners measuring 3 × 1 metres should be represented as structured fields rather than left as an unstructured sentence.&lt;/p&gt;

&lt;p&gt;The application then takes over.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Gemma does not decide the price, calculate the total, or determine the amount of money received.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Those operations are handled by deterministic application code:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;The extracted product is matched against the shop's price list.&lt;/li&gt;
&lt;li&gt;The price is calculated according to the applicable pricing rule.&lt;/li&gt;
&lt;li&gt;The down-payment amount is parsed separately.&lt;/li&gt;
&lt;li&gt;Monetary calculations use Decimal.js.&lt;/li&gt;
&lt;li&gt;The resulting order is shown in a confirmation card.&lt;/li&gt;
&lt;li&gt;The user can correct the extracted information before saving it.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The price list supports different pricing methods, such as per-unit prices, per-square-metre prices, per-pack prices, and manually entered price ranges where necessary.&lt;/p&gt;

&lt;p&gt;This separation matters because a language model can misinterpret an order. It should not be trusted to invent a price or perform financial calculations without deterministic checks.&lt;/p&gt;

&lt;p&gt;The model helps interpret the customer's words; the application remains responsible for the transaction.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. A confirmation step instead of blind automation
&lt;/h3&gt;

&lt;p&gt;I deliberately included a confirmation card rather than saving every model response immediately.&lt;/p&gt;

&lt;p&gt;An incorrectly interpreted dimension, quantity, or customer name can create problems at a real print shop. Even a small mistake can affect the price or the final product.&lt;/p&gt;

&lt;p&gt;The confirmation step gives Asep a chance to review and correct the extracted information before the order is stored.&lt;/p&gt;

&lt;p&gt;If the model is unavailable or too slow, the same interface can be used as a manual form.&lt;/p&gt;

&lt;p&gt;This fallback is important: the business workflow should not become unusable simply because an AI component is unavailable.&lt;/p&gt;

&lt;p&gt;AI is an assistant in this application, not a mandatory dependency for every action.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. From an order to a useful business record
&lt;/h3&gt;

&lt;p&gt;After confirmation, the application stores the order locally in SQLite.&lt;/p&gt;

&lt;p&gt;That record can then be used to generate receipts and sales summaries. Instead of treating each transaction as an isolated piece of handwritten information, the application makes the data available for daily, weekly, and monthly reporting.&lt;/p&gt;

&lt;p&gt;The workflow is therefore more than a text-to-JSON demonstration.&lt;/p&gt;

&lt;p&gt;It connects language-model inference to a practical business process: order entry, validation, pricing, record keeping, receipt generation, and reporting.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Measured
&lt;/h2&gt;

&lt;p&gt;I ran a small experiment on the CPU-only development machine using five invented sample orders. These were test inputs, not a representative dataset from the shop, so the results should be treated as an initial observation rather than a rigorous benchmark.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Configuration&lt;/th&gt;
&lt;th&gt;Correct extractions&lt;/th&gt;
&lt;th&gt;Approx. time per order&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Gemma 3 4B, longer prompt&lt;/td&gt;
&lt;td&gt;5/5&lt;/td&gt;
&lt;td&gt;37 seconds&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Gemma 3 4B, shorter prompt&lt;/td&gt;
&lt;td&gt;5/5&lt;/td&gt;
&lt;td&gt;23 seconds&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Gemma 3 1B, shorter prompt&lt;/td&gt;
&lt;td&gt;4/5&lt;/td&gt;
&lt;td&gt;11 seconds&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;For the 1B model, the missed extraction was flagged by a warning in the application.&lt;/p&gt;

&lt;p&gt;Two lessons stood out.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;First, prompt length matters on limited hardware.&lt;/strong&gt; In this small test, shortening the prompt reduced the time per order from around 37 seconds to around 23 seconds. That is approximately a 38% reduction.&lt;/p&gt;

&lt;p&gt;The result suggests that keeping the task focused and avoiding unnecessary prompt instructions can make local inference more practical. It does not establish that prompt processing alone accounted for the entire difference; these timings include the model's overall response time.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Second, a smaller model can be useful when paired with appropriate application-level validation.&lt;/strong&gt; The 1B model was faster but made one mistake in five samples. The warning helped surface that problem rather than silently treating every output as correct.&lt;/p&gt;

&lt;p&gt;These results are not enough to conclude that the smaller model is generally better or that the larger model will always be accurate. They simply helped me understand the trade-offs on my available hardware.&lt;/p&gt;

&lt;p&gt;For a real deployment, I would want a larger and more varied test set, repeated timing measurements, and evaluation against actual orders with permission from the shop owner.&lt;/p&gt;

&lt;h2&gt;
  
  
  Already Used in the Shop
&lt;/h2&gt;

&lt;p&gt;Asep has been trying the application at his counter. He shared the following feedback over WhatsApp and gave me permission to quote it:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;intinamah mantap, aplikasina ringan, mudah di akses bisa offline oge. jeng mempermudah rekap harian sampai bulanan toko saya&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;In English, the message means approximately:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Overall, it's great. The application is lightweight, easy to access, works offline too, and makes it easier to recap my shop's sales from daily to monthly.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;For me, this feedback matters more than simply demonstrating that a model can generate valid JSON.&lt;/p&gt;

&lt;p&gt;The application was built for a particular person with a particular workflow, and he has started using it to see whether it helps with his work.&lt;/p&gt;

&lt;p&gt;There is an important qualification to the offline claim, though.&lt;/p&gt;

&lt;p&gt;Asep's shop PC does not have a microphone, so voice input is not part of his current daily workflow. He has mainly been using the typed-order flow.&lt;/p&gt;

&lt;p&gt;The application can still be useful without voice input: he can enter an order, review the extracted data, confirm the transaction, and use the resulting records for reporting.&lt;/p&gt;

&lt;p&gt;The same application could potentially support other small shops by letting them configure their own price lists and product types, although each shop's workflow and pricing rules would need to be checked.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Open Innovation Matters
&lt;/h2&gt;

&lt;p&gt;For this project, open-weight AI and local inference were not just technical preferences. They made the approach practical for the environment in which the application was built.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. No per-request cloud inference fees
&lt;/h3&gt;

&lt;p&gt;A small print shop may not have enough order volume to justify a recurring AI service subscription.&lt;/p&gt;

&lt;p&gt;Running Gemma locally avoids per-request fees for the model inference itself. There are still costs associated with the computer, electricity, maintenance, and software development, but the shop does not need to pay a hosted-model provider for every order parsed.&lt;/p&gt;

&lt;p&gt;That makes the operating cost easier to predict.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Order data can stay on the shop's computer
&lt;/h3&gt;

&lt;p&gt;For typed orders, the text is sent to the locally running model rather than a remote LLM API.&lt;/p&gt;

&lt;p&gt;This reduces the need to transmit customer names and order details to an external inference provider.&lt;/p&gt;

&lt;p&gt;Local processing does not automatically guarantee complete privacy or security. The computer, application, database, backups, and any other connected services still need appropriate protection. But keeping inference local gives the business more control over where its data is processed.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. It can run without a dedicated GPU
&lt;/h3&gt;

&lt;p&gt;The experiment used an AMD A8-9600 CPU and 8 GB of RAM, without a dedicated GPU.&lt;/p&gt;

&lt;p&gt;The response time is a clear limitation, but the setup demonstrates that a local model can be explored on modest hardware.&lt;/p&gt;

&lt;p&gt;Not every small business needs a powerful AI workstation. Sometimes a practical, slower solution is more accessible than a faster solution that requires new hardware or recurring service fees.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. I can change the model and its behaviour
&lt;/h3&gt;

&lt;p&gt;Using an open-weight model with Ollama lets me experiment with different model sizes, prompts, and structured-output approaches.&lt;/p&gt;

&lt;p&gt;That flexibility made it possible to compare Gemma 3 4B and 1B on the same small set of sample orders and to adjust the prompt without being tied to one hosted API.&lt;/p&gt;

&lt;p&gt;A closed API could also provide structured extraction, and I am not claiming that local inference is always more accurate or faster. The advantage here is having more control over the model deployment and the ability to run the core parsing workflow locally.&lt;/p&gt;

&lt;p&gt;For this particular use case, those trade-offs are worth exploring.&lt;/p&gt;

&lt;h2&gt;
  
  
  Honest Limitations
&lt;/h2&gt;

&lt;p&gt;The application is an early project, and there are several limitations worth making explicit.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Local inference is relatively slow.&lt;/strong&gt; On my development machine, the tested configurations took approximately 11–37 seconds per order. Actual performance will depend on the hardware, model, prompt, and input.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The benchmark is very small.&lt;/strong&gt; Five invented orders cannot establish production-level accuracy or reliability.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Human confirmation remains necessary.&lt;/strong&gt; The extracted order must be reviewed before saving, especially when dimensions, quantities, or customer details affect the transaction.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Voice input is not guaranteed to work offline.&lt;/strong&gt; It uses the browser's speech-recognition capability, which may rely on a remote service depending on the browser and implementation. Gemma processes the resulting text locally, but that does not mean the audio itself is processed locally.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The shop PC has no microphone.&lt;/strong&gt; Consequently, voice input has not been part of Asep's daily usage.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Microphone access has browser restrictions.&lt;/strong&gt; Browsers generally require a secure context, such as HTTPS or localhost, for microphone access. A phone opening the application over a plain HTTP LAN address may not be able to use the microphone. Keyboard dictation is an alternative, depending on the device.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Local does not mean maintenance-free.&lt;/strong&gt; The application still needs backups, sensible access controls, error handling, and a plan for updates and data recovery.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I would like to improve the voice workflow and test the application against more varied orders. I would also like to collect feedback over a longer period before making stronger claims about how much time it saves.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Learned
&lt;/h2&gt;

&lt;p&gt;This project reinforced a principle I keep coming back to: &lt;strong&gt;AI is most useful when it is given a clear responsibility inside a well-defined workflow.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Gemma does not need to understand the entire business. It needs to extract a small set of fields from a customer's order.&lt;/p&gt;

&lt;p&gt;The application does not need to trust the model with financial decisions. It can validate the extracted data, apply explicit pricing rules, and ask the owner to confirm the result.&lt;/p&gt;

&lt;p&gt;And the shop does not need a complex cloud-based architecture just to organise its orders and produce sales reports.&lt;/p&gt;

&lt;p&gt;The technical challenge was not simply getting a model to respond. It was integrating the model into a workflow that remains understandable, controllable, and useful when the model makes a mistake or is unavailable.&lt;/p&gt;

&lt;p&gt;That is also why I enjoyed building this for Asep. It connects software development with a real business problem rather than adding AI to an application just because AI is fashionable.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prize Categories
&lt;/h2&gt;

&lt;p&gt;I am submitting this project for consideration in the &lt;strong&gt;Best Use of Gemma&lt;/strong&gt; category because Gemma 3 is the core model used to interpret natural-language orders.&lt;/p&gt;

&lt;p&gt;The model is not a decorative chatbot attached to an otherwise unrelated application. Its structured extraction is what connects free-form order descriptions to the application's validation and pricing workflow.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;Alisha Cetak started with a straightforward problem: order details were written by hand, prices were kept separately, and preparing sales recaps required additional work.&lt;/p&gt;

&lt;p&gt;The result is a small, local-first order assistant that connects natural-language input to structured records, deterministic pricing, receipts, and sales reports.&lt;/p&gt;

&lt;p&gt;It is not a perfect system, and I am not presenting five test orders as proof of production reliability. The model is slow on low-end hardware, voice input has limitations, and the application still needs more real-world evaluation.&lt;/p&gt;

&lt;p&gt;But it has reached the point where its intended user can try it in his own shop and tell me whether it helps.&lt;/p&gt;

&lt;p&gt;For me, that is the value of building for a friend: starting with a problem that matters to someone, choosing technology that fits the constraints, and being honest about what works and what still needs improvement.&lt;/p&gt;

&lt;p&gt;Open innovation made it possible to experiment with a locally running model, avoid per-request inference fees, and keep typed order parsing on the shop's own computer.&lt;/p&gt;

&lt;p&gt;Sometimes a useful AI project does not need to be a large autonomous agent. It can be a small, carefully scoped component that makes an ordinary business task a little easier.&lt;/p&gt;

&lt;p&gt;Thanks for reading! I'd love to hear how you'd approach reliable local order extraction or genuinely offline voice input for a small business.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>hf26challenge</category>
      <category>hacktoberfest</category>
      <category>weekendchallenge</category>
    </item>
    <item>
      <title>Industry Notes for 2026: Why I’m Choosing to Build for SMEs Instead of Chasing a Corporate Engineering Career</title>
      <dc:creator>Joni Ilman Pahmi</dc:creator>
      <pubDate>Sat, 03 Oct 2026 23:24:12 +0000</pubDate>
      <link>https://dev.to/joni_ilman12/industry-notes-for-2026-why-im-choosing-to-build-for-smes-instead-of-chasing-a-corporate-2bdb</link>
      <guid>https://dev.to/joni_ilman12/industry-notes-for-2026-why-im-choosing-to-build-for-smes-instead-of-chasing-a-corporate-2bdb</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqphmuel8as84cpdl1sbd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqphmuel8as84cpdl1sbd.png" alt="Industry Notes for 2026: Why I’m Choosing to Build for SMEs Instead of Chasing a Corporate Engineering Career" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Inspired by &lt;a href="https://youtu.be/TSTX8eZ3zP4" rel="noopener noreferrer"&gt;Theo’s discussion on VoidFnC&lt;/a&gt; about the realities of being a software engineer in 2026.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The software industry is changing rapidly. AI tools are becoming more capable, code can be generated faster than ever, and building an application is increasingly accessible to people who previously had little or no programming experience.&lt;/p&gt;

&lt;p&gt;At first glance, this sounds like progress. And in many ways, it is.&lt;/p&gt;

&lt;p&gt;But there is another side to this transformation: the expectations placed on software engineers are changing, too.&lt;/p&gt;

&lt;p&gt;Recently, I watched a video by Theo, a software engineer and creator behind the YouTube channel VoidFnC, who discusses his experience in the industry spanning more than eight years. His video, &lt;em&gt;“I Hate Being a Programmer in 2026”&lt;/em&gt; or &lt;em&gt;"gue benci jadi programmer (di tahun 2026)"&lt;/em&gt; in Indonesian Speech, raised several concerns about the direction of software engineering.&lt;/p&gt;

&lt;p&gt;I found his observations worth thinking about, particularly when considering my own direction as a developer.&lt;/p&gt;

&lt;p&gt;This article is not an attempt to present Theo’s opinions as universally proven facts. It is my interpretation of the issues he raised, combined with my own perspective on software development, independent work, and the small and medium-sized enterprises (SMEs) I want to support.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. AI Is Changing More Than the Way We Write Code
&lt;/h2&gt;

&lt;p&gt;One of Theo’s central arguments is that AI hype is no longer confined to developers discussing frameworks, programming languages, or development tools.&lt;/p&gt;

&lt;p&gt;It has spread to product managers, designers, business owners, executives, and other people who influence software projects.&lt;/p&gt;

&lt;p&gt;Previously, unrealistic expectations about a new framework or programming language might have remained mostly within engineering teams. Today, AI-generated demonstrations and claims about rapid application development can influence business decisions directly.&lt;/p&gt;

&lt;p&gt;Someone sees an AI tool produce a working prototype in minutes and concludes that a production-ready application should take only a fraction of the time it used to.&lt;/p&gt;

&lt;p&gt;The problem is that a prototype and a production application are not the same thing.&lt;/p&gt;

&lt;p&gt;A prototype may demonstrate that an idea is possible. A production system must also deal with authentication, authorisation, data integrity, security, error handling, deployment, monitoring, maintenance, and unexpected user behaviour.&lt;/p&gt;

&lt;p&gt;The code that appears in a demonstration is only one part of the complete system.&lt;/p&gt;

&lt;p&gt;When decision-makers underestimate these differences, the resulting expectations can become unrealistic before the engineering team even begins working.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The issue is not that non-technical people should stay away from software. It is that decisions about engineering work should be informed by the actual complexity and risks involved.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;AI can help us build faster. It does not automatically make every deadline reasonable.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. More Code Does Not Automatically Mean More Productivity
&lt;/h2&gt;

&lt;p&gt;Another important point in Theo’s discussion is the difference between producing more code and delivering more value.&lt;/p&gt;

&lt;p&gt;AI can generate functions, tests, components, database queries, and entire features. It can also produce a large pull request in a relatively short amount of time.&lt;/p&gt;

&lt;p&gt;However, someone still needs to determine whether that code solves the right problem, fits the existing architecture, handles edge cases, and behaves correctly under real conditions.&lt;/p&gt;

&lt;p&gt;Writing code has never been the only difficult part of software engineering.&lt;/p&gt;

&lt;p&gt;Understanding requirements, making architectural decisions, reviewing changes, testing behaviour, maintaining existing systems, and diagnosing production failures can consume considerable time.&lt;/p&gt;

&lt;p&gt;AI may reduce the time needed for implementation while increasing the amount of code that needs to be understood and reviewed.&lt;/p&gt;

&lt;p&gt;If a developer produces changes faster than a team can reasonably review them, the apparent productivity improvement may create a different bottleneck.&lt;/p&gt;

&lt;p&gt;The situation becomes more concerning when expectations increase because AI is available, but the time allocated for testing, review, and maintenance remains unchanged.&lt;/p&gt;

&lt;p&gt;And when something breaks in production, the responsibility does not necessarily disappear just because AI generated the code.&lt;/p&gt;

&lt;p&gt;The engineer is still expected to understand the system, investigate the failure, and help restore it.&lt;/p&gt;

&lt;p&gt;This is why I believe AI-assisted development should be evaluated by the quality and usefulness of the resulting software, not simply by how quickly code appears on the screen.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. The Modern Engineer Is Expected to Do More Than Engineering
&lt;/h2&gt;

&lt;p&gt;Theo also discusses how the expectations placed on engineers continue to expand.&lt;/p&gt;

&lt;p&gt;In addition to writing software, engineers may be expected to understand product strategy, user experience, business requirements, infrastructure, security, compliance, and operational concerns.&lt;/p&gt;

&lt;p&gt;There is nothing inherently wrong with understanding these areas. In fact, a broader understanding can make an engineer considerably more effective.&lt;/p&gt;

&lt;p&gt;The difficulty arises when the expected range of responsibilities grows while the time available to learn, practise, and develop expertise becomes shorter.&lt;/p&gt;

&lt;p&gt;Engineers are increasingly encouraged to take ownership of an entire product or system rather than focusing on implementation alone.&lt;/p&gt;

&lt;p&gt;That can be valuable, especially in small teams. However, there is a difference between encouraging people to develop broader skills and expecting one person to compensate for every missing role in an organisation.&lt;/p&gt;

&lt;p&gt;AI can help individuals work across unfamiliar areas, but assistance does not automatically replace expertise, sound judgement, or accountability.&lt;/p&gt;

&lt;p&gt;The challenge is finding a sustainable balance between versatility and unrealistic expectations.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. What Happens When the Junior-Level Learning Path Disappears?
&lt;/h2&gt;

&lt;p&gt;Perhaps the most concerning part of Theo’s discussion is the potential impact of AI on junior developers.&lt;/p&gt;

&lt;p&gt;Traditionally, junior engineers gain experience through relatively small tasks: fixing bugs, improving existing features, writing tests, handling simple requirements, and learning how an established codebase works.&lt;/p&gt;

&lt;p&gt;These tasks are not merely inexpensive work for a company. They are also opportunities to develop professional judgement.&lt;/p&gt;

&lt;p&gt;Over time, developers learn how to investigate unfamiliar systems, recognise fragile code, communicate technical trade-offs, and understand the consequences of their decisions.&lt;/p&gt;

&lt;p&gt;AI creates a potential disruption to this process.&lt;/p&gt;

&lt;p&gt;If a senior engineer with AI assistance can complete tasks that previously went to junior developers, a company may decide that hiring additional juniors is less attractive.&lt;/p&gt;

&lt;p&gt;From an individual company’s short-term perspective, that decision might appear economically reasonable.&lt;/p&gt;

&lt;p&gt;Across the industry, however, the consequences could be more complicated.&lt;/p&gt;

&lt;p&gt;If fewer juniors are hired and fewer people receive opportunities to learn through real engineering work, where will the next generation of experienced engineers come from?&lt;/p&gt;

&lt;p&gt;Senior engineers do not appear fully formed. They become senior by accumulating experience, making mistakes, receiving feedback, and gradually taking on greater responsibility.&lt;/p&gt;

&lt;p&gt;AI might accelerate some parts of that journey, but it cannot guarantee that the industry will continue providing enough opportunities for people to develop the judgement required to maintain complex systems.&lt;/p&gt;

&lt;p&gt;This is a structural concern rather than an argument that AI should not be used.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Two Different Directions: Product Engineering and Systems Engineering
&lt;/h2&gt;

&lt;p&gt;Theo also describes two broad patterns of engineering work that may become increasingly relevant.&lt;/p&gt;

&lt;p&gt;These are useful conceptual categories, not necessarily formal job titles.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Product-oriented engineering&lt;/strong&gt; focuses on identifying problems, validating ideas, building minimum viable products, and iterating quickly based on user feedback.&lt;/p&gt;

&lt;p&gt;The goal is to discover whether a solution is useful before investing heavily in it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Systems-oriented engineering&lt;/strong&gt; focuses on improving systems that have already demonstrated value. This may involve reliability, performance, scalability, architecture, operational efficiency, and the careful management of complexity.&lt;/p&gt;

&lt;p&gt;The distinction matters because building the first version of a product and operating a successful product at scale are different challenges.&lt;/p&gt;

&lt;p&gt;A small business validating a new service may not need the same architecture as a platform serving millions of users. Conversely, a system with demanding reliability requirements cannot be treated like a disposable prototype.&lt;/p&gt;

&lt;p&gt;AI may be useful in both areas, but the engineering decisions remain different.&lt;/p&gt;

&lt;p&gt;For me, this distinction is a reminder that there is no single development workflow or architectural approach that makes sense for every business.&lt;/p&gt;

&lt;p&gt;The right solution depends on the problem, the risks, the available resources, and the stage of the product.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Theo Is Not Simply Saying That Nobody Should Become a Programmer
&lt;/h2&gt;

&lt;p&gt;It is important not to misinterpret the message.&lt;/p&gt;

&lt;p&gt;Theo acknowledges that he uses AI himself and recognises that he is part of the broader ecosystem influencing how people think about software development.&lt;/p&gt;

&lt;p&gt;His criticism is not simply that AI is bad or that developers should return to writing everything manually.&lt;/p&gt;

&lt;p&gt;The deeper concern is the way the industry responds to AI.&lt;/p&gt;

&lt;p&gt;When demonstrations of rapid development become promises of dramatically increased productivity, organisations may raise expectations without adequately accounting for testing, review, maintenance, and the complexity of real systems.&lt;/p&gt;

&lt;p&gt;The benefits of AI may be real, while the expectations built around those benefits can still become unreasonable.&lt;/p&gt;

&lt;p&gt;Theo’s conclusion is not a straightforward instruction to avoid programming. It is closer to recognising that the profession is changing and that engineers must decide how they want to adapt to that change.&lt;/p&gt;

&lt;p&gt;I agree that this is a difficult question, particularly for people who are still trying to establish themselves in the industry.&lt;/p&gt;

&lt;p&gt;But I also think there is another question worth asking:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Do we all need to pursue the same version of a software engineering career?&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  7. My Perspective: I Would Rather Help SMEs Solve Real Problems
&lt;/h2&gt;

&lt;p&gt;After considering these points, I find myself increasingly interested in building software and digital solutions for small and medium-sized enterprises rather than making a corporate engineering career my primary goal.&lt;/p&gt;

&lt;p&gt;This does not mean that I believe all large companies are bad places to work. Nor does it mean that independent work is automatically better.&lt;/p&gt;

&lt;p&gt;There are excellent engineering teams in large organisations, with healthy collaboration, realistic expectations, good mentoring, and strong technical practices. There are also poorly managed companies where hierarchy, office politics, and excessive workloads make otherwise interesting work difficult.&lt;/p&gt;

&lt;p&gt;Independent work has its own problems, including unpredictable income, difficult clients, unclear requirements, and the need to manage sales and operations in addition to development.&lt;/p&gt;

&lt;p&gt;Neither path is free of trade-offs.&lt;/p&gt;

&lt;p&gt;What matters to me is the environment in which I can do useful work, make decisions responsibly, and maintain a reasonable degree of control over how that work is delivered.&lt;/p&gt;

&lt;h3&gt;
  
  
  Working with SMEs offers a different kind of relationship
&lt;/h3&gt;

&lt;p&gt;Small businesses often have practical problems that do not require unnecessarily complicated solutions.&lt;/p&gt;

&lt;p&gt;A WooCommerce store may have a slow checkout process. A business may be spending money on advertising without understanding which campaigns produce actual customers. A team may be managing repetitive administrative tasks manually because nobody has built a suitable internal tool.&lt;/p&gt;

&lt;p&gt;These are not necessarily glamorous engineering challenges. They can nevertheless have a direct effect on a business.&lt;/p&gt;

&lt;p&gt;My interest is in identifying these problems and building solutions that are appropriate for the business's actual needs and resources.&lt;/p&gt;

&lt;p&gt;Sometimes that might mean improving an existing WordPress installation rather than replacing it.&lt;/p&gt;

&lt;p&gt;Sometimes it might mean simplifying a checkout flow, fixing analytics, automating a repetitive task, or building a small application.&lt;/p&gt;

&lt;p&gt;And sometimes the best technical decision might be not to build anything new at all.&lt;/p&gt;

&lt;p&gt;For an SME, spending money on a sophisticated architecture that solves no meaningful business problem is not a sign of engineering excellence.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Good engineering should be measured partly by whether it solves the right problem at a cost the business can sustain.&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  The difference is not that SMEs are always easier
&lt;/h3&gt;

&lt;p&gt;I do not want to romanticise independent work or suggest that every small business owner is easy to work with.&lt;/p&gt;

&lt;p&gt;SMEs can have unrealistic expectations, unclear priorities, limited budgets, and clients who constantly change their requirements.&lt;/p&gt;

&lt;p&gt;The difference I am looking for is the possibility of having a more direct relationship between the person who needs a solution and the person who builds it.&lt;/p&gt;

&lt;p&gt;In an ideal client relationship, the business explains its problem, we discuss the available options, agree on a scope and budget, and decide whether working together makes sense.&lt;/p&gt;

&lt;p&gt;If the expectations are realistic and the collaboration is healthy, we proceed.&lt;/p&gt;

&lt;p&gt;If the expectations are unreasonable, the scope cannot be agreed upon, or the working relationship is clearly incompatible, I can decline the project.&lt;/p&gt;

&lt;p&gt;My informal rule is simple: if the collaboration makes sense, let's build something useful. If it does not, there is no need to force it.&lt;/p&gt;

&lt;p&gt;Of course, this freedom is not absolute. Independent developers still need income, and turning down work can have financial consequences. Finding good clients is itself a skill that requires time to develop.&lt;/p&gt;

&lt;p&gt;Nevertheless, I value having more control over which problems I accept and which working relationships I pursue.&lt;/p&gt;

&lt;h3&gt;
  
  
  Corporate hierarchy is a different constraint
&lt;/h3&gt;

&lt;p&gt;In a company, engineers operate within an organisational structure.&lt;/p&gt;

&lt;p&gt;Managers determine priorities, leadership allocates resources, and organisational hierarchies influence which decisions can be challenged or changed.&lt;/p&gt;

&lt;p&gt;A healthy company can use this structure effectively. Experienced leaders can provide direction, remove obstacles, support junior employees, and help teams make better decisions.&lt;/p&gt;

&lt;p&gt;The problem arises when authority becomes a substitute for sound reasoning.&lt;/p&gt;

&lt;p&gt;A deadline may be unrealistic, but challenging it could be interpreted as a lack of commitment. A technical concern may be dismissed because it comes from someone with less seniority. A team may be expected to deliver more without receiving the time or resources needed to do so.&lt;/p&gt;

&lt;p&gt;In such an environment, the engineer's ability to make technically responsible decisions can be limited by organisational dynamics.&lt;/p&gt;

&lt;p&gt;This is the aspect that makes me cautious about pursuing a corporate engineering career as my primary objective.&lt;/p&gt;

&lt;p&gt;I do not want to spend my working life trying to satisfy expectations that are disconnected from the actual work, particularly when those expectations are reinforced by hierarchy rather than constructive collaboration.&lt;/p&gt;

&lt;p&gt;That does not mean every company operates this way. It means that the quality of the working environment matters just as much as the job title.&lt;/p&gt;

&lt;p&gt;If I ever join a company, I would want to evaluate how it treats engineers, handles disagreements, sets deadlines, and responds when things go wrong—not simply its reputation or size.&lt;/p&gt;

&lt;h2&gt;
  
  
  8. AI Should Help Us Deliver Better Solutions, Not Just More Work
&lt;/h2&gt;

&lt;p&gt;My position on AI is practical.&lt;/p&gt;

&lt;p&gt;I use AI to help build software, explore approaches, understand unfamiliar concepts, and accelerate implementation. I do not believe using AI makes the work illegitimate.&lt;/p&gt;

&lt;p&gt;However, generating code is not the same as taking responsibility for a finished application.&lt;/p&gt;

&lt;p&gt;A developer still needs to understand the requirements, evaluate the proposed implementation, test the result, recognise uncertainty, and be honest about what they can support.&lt;/p&gt;

&lt;p&gt;For an independent developer serving SMEs, AI can be particularly useful because time and resources are limited.&lt;/p&gt;

&lt;p&gt;It may help one person accomplish work that would otherwise require considerably more manual effort. That can make certain solutions more accessible to businesses with modest budgets.&lt;/p&gt;

&lt;p&gt;But the objective should not be to accept an unlimited amount of work simply because AI makes implementation faster.&lt;/p&gt;

&lt;p&gt;If AI saves two hours on a task, those hours can be used for testing, better communication, documentation, learning, or simply keeping the project within a sustainable schedule.&lt;/p&gt;

&lt;p&gt;The benefit should not automatically become an excuse to double the workload.&lt;/p&gt;

&lt;p&gt;I also have concerns about exaggerated AI marketing that suggests anyone can become an experienced engineer almost overnight or that an AI-generated demonstration proves a person is ready to manage complex production systems.&lt;/p&gt;

&lt;p&gt;AI can lower barriers to building software. It does not eliminate the need to learn, exercise judgement, or understand the consequences of technical decisions.&lt;/p&gt;

&lt;p&gt;We should be able to acknowledge both its genuine benefits and its limitations.&lt;/p&gt;

&lt;h2&gt;
  
  
  9. This Is a Career Preference, Not a Declaration That Corporate Engineering Is Dead
&lt;/h2&gt;

&lt;p&gt;I want to make one thing clear: I am not claiming that becoming an engineer at a large company is a bad decision.&lt;/p&gt;

&lt;p&gt;For many developers, a well-managed engineering organisation can provide excellent mentorship, exposure to complex systems, collaboration with experienced colleagues, stable income, and opportunities that would be difficult to obtain independently.&lt;/p&gt;

&lt;p&gt;Those benefits matter.&lt;/p&gt;

&lt;p&gt;My preference is simply to prioritise a different path for now.&lt;/p&gt;

&lt;p&gt;Rather than making a corporate engineering title the ultimate measure of success, I want to focus on using software to solve real problems for businesses that need help with digitalisation.&lt;/p&gt;

&lt;p&gt;I can still learn from open-source projects, study system design, improve my testing practices, build applications, and collaborate with other developers.&lt;/p&gt;

&lt;p&gt;I can also continue developing my own projects while learning what it takes to turn software into something useful and sustainable.&lt;/p&gt;

&lt;p&gt;None of those activities requires me to pretend that I have experience I do not possess. Equally, not having worked at a large technology company does not mean that the skills I have developed through building software are worthless.&lt;/p&gt;

&lt;p&gt;The important thing is to be honest about my experience, recognise my limitations, and continue improving through real work.&lt;/p&gt;

&lt;p&gt;Perhaps I will eventually find a company whose engineering culture suits me. If that opportunity appears, I can evaluate it on its merits.&lt;/p&gt;

&lt;p&gt;For now, I would rather build a career around the problems I want to solve than spend too much energy trying to prove that I belong to a particular category of engineer.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;Theo's discussion made me think more carefully about the relationship between AI, engineering expectations, and the future of the profession.&lt;/p&gt;

&lt;p&gt;The most important lesson I took from it is not that programming is no longer worth pursuing.&lt;/p&gt;

&lt;p&gt;It is that the environment in which we build software matters.&lt;/p&gt;

&lt;p&gt;AI can make implementation faster, but faster implementation does not automatically create better products, healthier teams, or more sustainable working conditions.&lt;/p&gt;

&lt;p&gt;Companies still need realistic expectations. Engineers still need opportunities to learn. Software still needs to be tested, maintained, and operated responsibly.&lt;/p&gt;

&lt;p&gt;And developers do not all have to pursue the same career path.&lt;/p&gt;

&lt;p&gt;For me, building solutions for SMEs is an appealing direction because it brings software development closer to practical business problems and gives me the opportunity to choose projects and working relationships more deliberately.&lt;/p&gt;

&lt;p&gt;There will still be difficult clients, financial uncertainty, and plenty of technical challenges. I am not expecting an easy path.&lt;/p&gt;

&lt;p&gt;I simply want to build useful things, help businesses make better use of technology, and develop a sustainable way to keep doing work that I genuinely enjoy.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Perhaps the goal is not to become the kind of engineer the industry happens to reward at a particular moment. Perhaps it is to become a developer who can consistently turn real problems into useful, maintainable solutions.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;And if AI can help me do that more effectively, I intend to use it—without forgetting that the responsibility for the work remains mine.&lt;/p&gt;




&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;This article is a personal reflection inspired by Theo's discussion on VoidFnC. The observations attributed to him are my interpretation of the video's themes, not a claim that every point represents a universally established industry fact. My own conclusions about working with SMEs reflect my preferences and priorities, rather than a claim that independent work is inherently better than employment.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>discuss</category>
      <category>ai</category>
      <category>career</category>
      <category>software</category>
    </item>
    <item>
      <title>Why Convention over Configuration Still Matters in 2026?</title>
      <dc:creator>Joni Ilman Pahmi</dc:creator>
      <pubDate>Thu, 01 Oct 2026 23:31:53 +0000</pubDate>
      <link>https://dev.to/joni_ilman12/why-convention-over-configuration-still-matters-in-2026-346g</link>
      <guid>https://dev.to/joni_ilman12/why-convention-over-configuration-still-matters-in-2026-346g</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F6j4bki1hk6o2pjpsulis.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F6j4bki1hk6o2pjpsulis.png" alt="Convention over Configuration Still Matters in 2026" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Software development is full of decisions.&lt;/p&gt;

&lt;p&gt;Where should a file live? How should a route be registered? Which configuration file connects a model to a database table? Where should API endpoints be defined? Which tools need to be wired together before the application can even start?&lt;/p&gt;

&lt;p&gt;Not all of these decisions create business value.&lt;/p&gt;

&lt;p&gt;This is where &lt;strong&gt;Convention over Configuration (CoC)&lt;/strong&gt; becomes useful.&lt;/p&gt;

&lt;p&gt;Convention over Configuration is a software design approach that reduces the amount of configuration developers need to write by establishing sensible, predictable defaults. Instead of explicitly describing every relationship between components, the framework assumes a standard structure and lets developers override that behaviour when their application needs something different.&lt;/p&gt;

&lt;p&gt;The idea became particularly well known through Ruby on Rails and its “convention over configuration” philosophy.&lt;/p&gt;

&lt;p&gt;The important part is not that configuration disappears.&lt;/p&gt;

&lt;p&gt;The important part is that developers are no longer required to configure things that already follow an obvious convention.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Problem with Too Much Configuration
&lt;/h2&gt;

&lt;p&gt;Imagine creating a new page.&lt;/p&gt;

&lt;p&gt;In a heavily configuration-driven architecture, adding that page might involve creating the component itself, registering a route, updating another configuration file, and possibly modifying additional metadata.&lt;/p&gt;

&lt;p&gt;The page is new. The route is new.But the relationship between them is already obvious. A framework can reasonably infer:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;This file represents a page, therefore it should become a route.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That removes a decision without removing control. The same idea can apply to APIs, database models, application structure, testing, and many other parts of a project.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Faster Development
&lt;/h2&gt;

&lt;p&gt;The most obvious benefit of conventions is that developers write less infrastructure code. Suppose a framework knows that files inside a particular directory represent application pages. Creating a new page becomes as simple as creating a file.&lt;/p&gt;

&lt;p&gt;Solid-Vue follows this approach with file-based routing. A file such as:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;src/pages/about.vue
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;automatically becomes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/about
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Nested directories and dynamic filenames follow the same convention.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;src/pages/
├── index.vue
├── about.vue
└── users/
    └── [id].vue
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This produces routes without maintaining a large manual routing configuration. The project structure becomes part of the routing system itself. That may look like a small convenience.&lt;/p&gt;

&lt;p&gt;Across hundreds of routes and multiple developers, however, removing repeated configuration becomes a meaningful productivity improvement.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Less Boilerplate and Less Ceremony
&lt;/h2&gt;

&lt;p&gt;Configuration has a cost.&lt;/p&gt;

&lt;p&gt;Even when each configuration change takes only a few minutes, developers still have to remember where it belongs, how it is structured, and which other configuration files must be updated.&lt;/p&gt;

&lt;p&gt;That creates cognitive overhead.&lt;/p&gt;

&lt;p&gt;Convention-based frameworks move common decisions into the framework itself.&lt;/p&gt;

&lt;p&gt;Solid-Vue applies this principle beyond frontend routing.&lt;/p&gt;

&lt;p&gt;For example, API handlers can live inside:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;src/server/api/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The framework scans this directory and derives routes from the file structure.&lt;/p&gt;

&lt;p&gt;A file such as:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;src/server/api/products/[id].ts
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;can represent a dynamic API endpoint without requiring a separate route registration file. The developer writes the endpoint. The framework handles the repetitive wiring.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. A Predictable Project Structure
&lt;/h2&gt;

&lt;p&gt;Conventions also make unfamiliar projects easier to understand.&lt;/p&gt;

&lt;p&gt;A predictable structure means developers spend less time asking:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Where does this belong?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Solid-Vue establishes several conventional locations:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;src/
├── components/
├── pages/
├── layouts/
├── stores/
└── server/
    └── api/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Some of these directories are conventions rather than strict requirements, while &lt;code&gt;pages&lt;/code&gt; and &lt;code&gt;server/api&lt;/code&gt; are actively scanned by the framework.&lt;/p&gt;

&lt;p&gt;This distinction matters.&lt;/p&gt;

&lt;p&gt;Good conventions should provide structure without turning the framework into a prison.&lt;/p&gt;

&lt;p&gt;Developers should know where things normally go, while still being able to organise their own application when necessary.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Convention Does Not Mean No Configuration
&lt;/h2&gt;

&lt;p&gt;One of the biggest misunderstandings about Convention over Configuration is that it means configuration is bad.&lt;/p&gt;

&lt;p&gt;It does not.&lt;/p&gt;

&lt;p&gt;Configuration becomes valuable when the default behaviour is no longer appropriate.&lt;/p&gt;

&lt;p&gt;For example, suppose the convention says:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;src/pages/about.vue → /about
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That is useful because most applications do not need to explain that relationship manually.&lt;/p&gt;

&lt;p&gt;But when an application requires something unusual, explicit configuration should still be available.&lt;/p&gt;

&lt;p&gt;This is where a good framework should provide an escape hatch.&lt;/p&gt;

&lt;p&gt;Solid-Vue describes this philosophy directly:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Reduce configuration, not capability.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Its configuration layer provides sensible defaults while keeping the underlying Vue, Vite, Vue Router, Pinia, and H3 APIs accessible.&lt;/p&gt;

&lt;p&gt;That distinction is important.&lt;/p&gt;

&lt;p&gt;The goal is not to hide the underlying ecosystem.&lt;/p&gt;

&lt;p&gt;The goal is to avoid making developers configure things that can already be reasonably inferred.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Conventions Make Frameworks Easier to Learn
&lt;/h2&gt;

&lt;p&gt;Convention also creates a shared mental model.&lt;/p&gt;

&lt;p&gt;When every project invents its own architecture, developers must learn the architecture before they can effectively work on the application.&lt;/p&gt;

&lt;p&gt;When a framework establishes common conventions, knowledge becomes transferable.&lt;/p&gt;

&lt;p&gt;A developer who already understands the framework can open another project and immediately recognise familiar patterns.&lt;/p&gt;

&lt;p&gt;This does not eliminate the learning curve.&lt;/p&gt;

&lt;p&gt;In fact, conventions can introduce their own form of complexity: developers need to understand what the framework assumes and how those assumptions work.&lt;/p&gt;

&lt;p&gt;The difference is that the complexity is learned once and then reused across projects.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Less Configuration Can Mean Less Configuration Churn
&lt;/h2&gt;

&lt;p&gt;Large configuration files often become another part of application maintenance.&lt;/p&gt;

&lt;p&gt;Every new feature may require another entry.&lt;/p&gt;

&lt;p&gt;Every renamed component may require another update.&lt;/p&gt;

&lt;p&gt;Every new API endpoint may require another registration.&lt;/p&gt;

&lt;p&gt;With convention-based systems, some of these relationships are derived directly from the source structure instead.&lt;/p&gt;

&lt;p&gt;That can reduce repetitive configuration changes and, as a consequence, reduce one potential source of configuration drift and merge conflicts.&lt;/p&gt;

&lt;p&gt;It is not a guarantee that merge conflicts disappear.&lt;/p&gt;

&lt;p&gt;It simply means there are fewer places where developers need to manually maintain the same information.&lt;/p&gt;

&lt;p&gt;The source code becomes the source of truth.&lt;/p&gt;

&lt;h2&gt;
  
  
  Convention vs Configuration
&lt;/h2&gt;

&lt;p&gt;Convention and configuration are not opposing philosophies where one must completely replace the other.&lt;/p&gt;

&lt;p&gt;They are better understood as a balance.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Approach&lt;/th&gt;
&lt;th&gt;Strength&lt;/th&gt;
&lt;th&gt;Trade-off&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Convention&lt;/td&gt;
&lt;td&gt;Fast setup, predictable structure, less boilerplate&lt;/td&gt;
&lt;td&gt;Framework rules can feel “magical”&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Configuration&lt;/td&gt;
&lt;td&gt;Explicit control and visibility&lt;/td&gt;
&lt;td&gt;More boilerplate and maintenance&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Hybrid&lt;/td&gt;
&lt;td&gt;Sensible defaults with explicit escape hatches&lt;/td&gt;
&lt;td&gt;Requires good framework design&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Pure convention can become frustrating when developers cannot understand or override what the framework is doing.&lt;/p&gt;

&lt;p&gt;Pure configuration can become exhausting when developers have to describe every relationship manually.&lt;/p&gt;

&lt;p&gt;The useful middle ground is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Use conventions for the common path. Use configuration for the exceptional path.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Why This Matters for Small and Growing Applications
&lt;/h2&gt;

&lt;p&gt;This becomes especially relevant for small teams and growing businesses.&lt;/p&gt;

&lt;p&gt;Most applications do not need every architectural decision to become a project of its own.&lt;/p&gt;

&lt;p&gt;A team should be able to create a page, add an API endpoint, manage application state, and deploy an application without repeatedly designing infrastructure around those actions.&lt;/p&gt;

&lt;p&gt;This is one of the reasons Solid-Vue is built around existing Vue ecosystem tools instead of replacing them.&lt;/p&gt;

&lt;p&gt;Vue remains Vue.&lt;/p&gt;

&lt;p&gt;Vite remains Vite.&lt;/p&gt;

&lt;p&gt;Vue Router remains accessible.&lt;/p&gt;

&lt;p&gt;Pinia remains accessible.&lt;/p&gt;

&lt;p&gt;H3 remains accessible.&lt;/p&gt;

&lt;p&gt;Solid-Vue simply establishes conventions and defaults around them so developers spend less time wiring the ecosystem together.&lt;/p&gt;

&lt;p&gt;That philosophy can be seen throughout the framework: file-based pages, file-based server routes, pre-wired Pinia, conventional project structure, CLI-based project creation, and automated build/deployment workflows.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Real Value of Convention over Configuration
&lt;/h2&gt;

&lt;p&gt;Convention over Configuration is not really about writing fewer lines of code.&lt;/p&gt;

&lt;p&gt;It is about making fewer unnecessary decisions.&lt;/p&gt;

&lt;p&gt;A developer's time is valuable.&lt;/p&gt;

&lt;p&gt;Instead of repeatedly deciding:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;where routes should be registered,&lt;/li&gt;
&lt;li&gt;how API files should be connected,&lt;/li&gt;
&lt;li&gt;how common tools should be wired,&lt;/li&gt;
&lt;li&gt;or which configuration file needs another entry,&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;the framework can provide a predictable answer.&lt;/p&gt;

&lt;p&gt;That lets developers spend more of their attention on the part that actually differentiates the application: the business logic, user experience, and product itself.&lt;/p&gt;

&lt;p&gt;Good conventions should therefore feel almost boring.&lt;/p&gt;

&lt;p&gt;You create the file.&lt;/p&gt;

&lt;p&gt;You follow the structure.&lt;/p&gt;

&lt;p&gt;The framework understands what you mean.&lt;/p&gt;

&lt;p&gt;And when the default is no longer enough, configuration is still there.&lt;/p&gt;

&lt;p&gt;That is the real idea behind Convention over Configuration:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;less configuration where convention is enough, without sacrificing control when convention is not enough.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>typescript</category>
    </item>
    <item>
      <title>Solid-Vue Adds Per-Page Layouts and Its First UI Kit Add-on: Octans UI</title>
      <dc:creator>Joni Ilman Pahmi</dc:creator>
      <pubDate>Thu, 01 Oct 2026 09:20:44 +0000</pubDate>
      <link>https://dev.to/solid-vue/solid-vue-adds-per-page-layouts-and-its-first-ui-kit-add-on-octans-ui-4b57</link>
      <guid>https://dev.to/solid-vue/solid-vue-adds-per-page-layouts-and-its-first-ui-kit-add-on-octans-ui-4b57</guid>
      <description>&lt;p&gt;Solid-Vue is getting another small but important step toward making application structure easier to manage.&lt;/p&gt;

&lt;p&gt;This release introduces two additions:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Per-page layouts&lt;/strong&gt;, powered by Vue Router's &lt;code&gt;definePage()&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Octans UI add-on&lt;/strong&gt;, our first integration with a UI component library.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;They solve different problems, but they share the same goal: giving Solid-Vue applications more structure without making developers build and configure everything from scratch.&lt;/p&gt;

&lt;h2&gt;
  
  
  Per-Page Layouts
&lt;/h2&gt;

&lt;p&gt;Not every page in an application should look the same.&lt;/p&gt;

&lt;p&gt;A dashboard might need a persistent sidebar and navigation. An authentication page might need a simple centred card. A public page might use an entirely different shell.&lt;/p&gt;

&lt;p&gt;Previously, developers had to decide how to structure those layouts themselves. Solid-Vue can now handle that part with a simple convention.&lt;/p&gt;

&lt;p&gt;Create layout components inside &lt;code&gt;src/layouts&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight vue"&gt;&lt;code&gt;&lt;span class="c"&gt;&amp;lt;!-- src/layouts/dashboard.vue --&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="k"&gt;template&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"dashboard-shell"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;nav&amp;gt;&lt;/span&gt;
      &lt;span class="c"&gt;&amp;lt;!-- Dashboard navigation --&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/nav&amp;gt;&lt;/span&gt;

    &lt;span class="nt"&gt;&amp;lt;main&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;slot&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/main&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="k"&gt;template&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can also keep a default layout:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight vue"&gt;&lt;code&gt;&lt;span class="c"&gt;&amp;lt;!-- src/layouts/default.vue --&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="k"&gt;template&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;main&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"default-layout"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;slot&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/main&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="k"&gt;template&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then wrap your application's router once in &lt;code&gt;App.vue&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight vue"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="k"&gt;script&lt;/span&gt; &lt;span class="na"&gt;setup&lt;/span&gt; &lt;span class="na"&gt;lang=&lt;/span&gt;&lt;span class="s"&gt;"ts"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;SolidVueLayout&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;solid-vue/client&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="k"&gt;script&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="k"&gt;template&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;SolidVueLayout&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;RouterView&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/SolidVueLayout&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="k"&gt;template&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Individual pages can then request the layout they need:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight vue"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="k"&gt;script&lt;/span&gt; &lt;span class="na"&gt;setup&lt;/span&gt; &lt;span class="na"&gt;lang=&lt;/span&gt;&lt;span class="s"&gt;"ts"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nf"&gt;definePage&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;meta&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;layout&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;dashboard&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="k"&gt;script&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="k"&gt;template&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;h1&amp;gt;&lt;/span&gt;Dashboard&lt;span class="nt"&gt;&amp;lt;/h1&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="k"&gt;template&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That's it.&lt;/p&gt;

&lt;p&gt;Pages that don't specify a layout automatically use &lt;code&gt;src/layouts/default.vue&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;This means layout selection stays close to the page itself instead of requiring another routing configuration file.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why &lt;code&gt;definePage()&lt;/code&gt;?
&lt;/h3&gt;

&lt;p&gt;One important detail here is that &lt;code&gt;definePage()&lt;/code&gt; isn't a Solid-Vue-specific API.&lt;/p&gt;

&lt;p&gt;It comes from the Vue Router ecosystem and is already familiar to developers using file-based routing with Vue Router tooling.&lt;/p&gt;

&lt;p&gt;Solid-Vue simply uses the page metadata to connect the route to the corresponding layout.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight vue"&gt;&lt;code&gt;definePage({
  meta: {
    layout: 'auth',
  },
})
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;maps naturally to:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;src/layouts/auth.vue
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The convention keeps the amount of configuration small while still allowing applications to grow beyond a single application shell.&lt;/p&gt;

&lt;h2&gt;
  
  
  Layouts Are About More Than Visuals
&lt;/h2&gt;

&lt;p&gt;A layout isn't necessarily just a collection of CSS classes.&lt;/p&gt;

&lt;p&gt;It can represent an application's structural boundary.&lt;/p&gt;

&lt;p&gt;For example, a typical application might eventually have:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;src/
├── layouts/
│   ├── default.vue
│   ├── auth.vue
│   └── dashboard.vue
│
├── pages/
│   ├── index.vue
│   ├── login.vue
│   ├── register.vue
│   └── dashboard/
│       ├── index.vue
│       └── settings.vue
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The pages remain focused on their own content, while layouts handle the surrounding application structure.&lt;/p&gt;

&lt;p&gt;That separation becomes particularly useful when an application has several sections with different navigation, headers, or visual shells.&lt;/p&gt;

&lt;h2&gt;
  
  
  Our First UI Kit Add-on: Octans UI
&lt;/h2&gt;

&lt;p&gt;The second addition in this release is a new Solid-Vue add-on for &lt;strong&gt;Octans UI&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Install it with:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx solid-vue add octans-ui
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is the first time one of our add-ons integrates a UI component library rather than simply adding a development utility or configuration.&lt;/p&gt;

&lt;p&gt;The goal is the same as with the rest of the Solid-Vue add-on system: reduce the amount of repetitive setup required when starting a project.&lt;/p&gt;

&lt;h3&gt;
  
  
  What Does the Add-on Do?
&lt;/h3&gt;

&lt;p&gt;Octans UI requires a small amount of application-level setup.&lt;/p&gt;

&lt;p&gt;The Solid-Vue add-on takes care of that wiring for you.&lt;/p&gt;

&lt;p&gt;In particular, it:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Installs the required Octans UI package.&lt;/li&gt;
&lt;li&gt;Adds the &lt;code&gt;UiProvider&lt;/code&gt; integration to &lt;code&gt;App.vue&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Registers the Octans UI plugin in &lt;code&gt;main.ts&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Leaves the application ready to import and use Octans UI components.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight vue"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="k"&gt;script&lt;/span&gt; &lt;span class="na"&gt;setup&lt;/span&gt; &lt;span class="na"&gt;lang=&lt;/span&gt;&lt;span class="s"&gt;"ts"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Button&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Card&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@octans/ui&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="k"&gt;script&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="k"&gt;template&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;Card&lt;/span&gt; &lt;span class="na"&gt;title=&lt;/span&gt;&lt;span class="s"&gt;"Hello"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;Button&lt;/span&gt; &lt;span class="na"&gt;primary&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
      Click me
    &lt;span class="nt"&gt;&amp;lt;/Button&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/Card&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="k"&gt;template&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The important part isn't that installing a UI library is difficult.&lt;/p&gt;

&lt;p&gt;It isn't.&lt;/p&gt;

&lt;p&gt;The point is that these small integration steps are exactly the kind of setup that tends to get repeated across projects.&lt;/p&gt;

&lt;p&gt;Solid-Vue's add-on system gives us a place to automate them.&lt;/p&gt;

&lt;h2&gt;
  
  
  We Don't Want the CLI to Guess
&lt;/h2&gt;

&lt;p&gt;There is another detail we're particularly careful about.&lt;/p&gt;

&lt;p&gt;A CLI that modifies an existing project needs to know when it can safely make an automatic change — and when it can't.&lt;/p&gt;

&lt;p&gt;For example, the add-on can normally update &lt;code&gt;App.vue&lt;/code&gt; and &lt;code&gt;main.ts&lt;/code&gt; when they follow the expected structure.&lt;/p&gt;

&lt;p&gt;But developers are free to customise those files.&lt;/p&gt;

&lt;p&gt;If Solid-Vue can't confidently determine where an integration should be added, the add-on doesn't try to make a risky modification.&lt;/p&gt;

&lt;p&gt;Instead, it reports what needs to be added manually.&lt;/p&gt;

&lt;p&gt;That's intentional.&lt;/p&gt;

&lt;p&gt;We'd rather give you a clear instruction than silently produce a broken application.&lt;/p&gt;

&lt;h2&gt;
  
  
  Using Layouts and Octans UI Together
&lt;/h2&gt;

&lt;p&gt;These two features were also tested together.&lt;/p&gt;

&lt;p&gt;A typical application can have a layout responsible for the application shell while Octans UI provides the components used inside it.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Application
│
├── SolidVueLayout
│   │
│   ├── Dashboard Layout
│   │   ├── Navigation
│   │   ├── Header
│   │   └── RouterView
│   │       │
│   │       └── Octans UI components
│   │
│   └── Other Layouts
│
└── Vue Router
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The layout controls the surrounding structure.&lt;/p&gt;

&lt;p&gt;The router controls which page is displayed.&lt;/p&gt;

&lt;p&gt;Octans UI provides reusable interface components.&lt;/p&gt;

&lt;p&gt;Each part has a relatively small responsibility, without requiring a large application architecture just to get started.&lt;/p&gt;

&lt;p&gt;We tested this combination in both development and production builds, including a layout wrapping the UI provider and router.&lt;/p&gt;

&lt;p&gt;The result is the same workflow you'd expect from a normal Solid-Vue application.&lt;/p&gt;

&lt;h2&gt;
  
  
  Getting Started
&lt;/h2&gt;

&lt;p&gt;If you're starting a new project, create one with:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm create solid-vue@latest my-app
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cd &lt;/span&gt;my-app
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And add Octans UI:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx solid-vue add octans-ui
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can then create your layouts under:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;src/layouts
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and select them from individual pages with:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight vue"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;&lt;/span&gt;&lt;span class="k"&gt;script&lt;/span&gt; &lt;span class="na"&gt;setup&lt;/span&gt; &lt;span class="na"&gt;lang=&lt;/span&gt;&lt;span class="s"&gt;"ts"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nf"&gt;definePage&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;meta&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;layout&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;dashboard&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="k"&gt;script&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  What's Next?
&lt;/h2&gt;

&lt;p&gt;We're keeping Solid-Vue's approach deliberately incremental.&lt;/p&gt;

&lt;p&gt;Rather than adding every possible feature to the framework, we're looking for the repetitive pieces that developers commonly need when building small and growing applications.&lt;/p&gt;

&lt;p&gt;Layouts are one of those pieces.&lt;/p&gt;

&lt;p&gt;UI library integration is another.&lt;/p&gt;

&lt;p&gt;The add-on system gives us room to experiment with more integrations without making every Solid-Vue project depend on everything.&lt;/p&gt;

&lt;p&gt;And this is only the beginning of that approach.&lt;/p&gt;

&lt;h2&gt;
  
  
  Try It
&lt;/h2&gt;

&lt;p&gt;Create a new Solid-Vue application:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm create solid-vue@latest my-app
&lt;span class="nb"&gt;cd &lt;/span&gt;my-app
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then add Octans UI:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx solid-vue add octans-ui
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For more information, see the documentation:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://docs.solid-vue.tech//guide/routing" rel="noopener noreferrer"&gt;Routing — Layouts&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://docs.solid-vue.tech//guide/addons" rel="noopener noreferrer"&gt;Add-ons&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Solid-Vue is still in early access, so we'd love to hear what feels useful, what feels rough, and what you'd like to see next.&lt;/p&gt;

&lt;p&gt;Try it, build something small, and let us know what you think.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;See:&lt;/strong&gt; &lt;a href="https://docs.solid-vue.tech/blog/solid-vue-adds-per-page-layouts-and-its-first-ui-kits-add-on-octans-ui" rel="noopener noreferrer"&gt;Solid-Vue Adds Per-Page Layouts and Its First UI Kit Add-on: Octans UI&lt;/a&gt;&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>webdev</category>
      <category>opensource</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Why I Built Solid-Vue JS: File-Based API Routing for Vue + Vite</title>
      <dc:creator>Joni Ilman Pahmi</dc:creator>
      <pubDate>Wed, 30 Sep 2026 03:31:45 +0000</pubDate>
      <link>https://dev.to/joni_ilman12/why-i-built-solid-vue-js-file-based-api-routing-for-vue-vite-4if4</link>
      <guid>https://dev.to/joni_ilman12/why-i-built-solid-vue-js-file-based-api-routing-for-vue-vite-4if4</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;Quick note: &lt;strong&gt;Solid-Vue JS is not SolidJS.&lt;/strong&gt; It's a Vue + Vite framework. Yes, the names are close, and I'm sorry for the confusion! 🙂&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  The itch
&lt;/h2&gt;

&lt;p&gt;Vue + Vite is a fantastic frontend setup. But the moment a project needs even a small API (a form handler, a webhook, a tiny CRUD), I found myself standing up a separate server or pulling in a much bigger framework than the project needed.&lt;/p&gt;

&lt;p&gt;The idea started with a small project: I wanted to build a mini ERP for a friend's cilok goang shop using Vue on the frontend and a vanilla JavaScript backend.&lt;/p&gt;

&lt;p&gt;I started with plain Vue + Vite, expecting it to be straightforward. Instead, I kept running into the usual setup friction — version conflicts, Vite configuration issues, routes returning 404s, and all the little pieces that need to be wired together manually. I eventually tried Nuxt because so much of that structure is already built in, but that came with its own friction too, including issues while setting up shadcn-vue and a project scaffold that felt surprisingly slow for such a small project.&lt;/p&gt;

&lt;p&gt;That experience made me think there should be a middle path: keep Vue + Vite as the foundation, but provide enough conventions and tooling that I don't have to rebuild the same project structure every time.&lt;/p&gt;

&lt;p&gt;I wanted a middle path: keep Vue + Vite as the foundation, and add just enough structure for the backend side to live in the same project.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Solid-Vue JS is
&lt;/h2&gt;

&lt;p&gt;Solid-Vue JS is a meta-framework built around a custom Vite plugin. Its core idea is &lt;strong&gt;file-based API routing on top of &lt;a href="https://h3.unjs.io" rel="noopener noreferrer"&gt;h3&lt;/a&gt;&lt;/strong&gt;: you create a file, and it becomes an API endpoint.&lt;/p&gt;

&lt;p&gt;It ships as three npm packages:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;solid-vue&lt;/code&gt;: the core framework&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;create-solid-vue&lt;/code&gt;: project scaffolding&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;solid-vue-cli&lt;/code&gt;: in-project commands for add-ons&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Getting started
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm create solid-vue@latest my-app
&lt;span class="nb"&gt;cd &lt;/span&gt;my-app
npm &lt;span class="nb"&gt;install
&lt;/span&gt;npm run dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  File-based API routes
&lt;/h2&gt;

&lt;p&gt;Solid-Vue JS uses conventions to keep application structure predictable. Two of these — pages and server/api — are scanned automatically by the framework. The rest are suggested patterns for organising your own code.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;├── src/
│   ├── App.vue
│   ├── main.ts
│   ├── components/
│   ├── pages/           # file-based routing
│   ├── layouts/         # page layouts — see Routing
│   ├── stores/
│   └── server/
│       └── api/         # file-based routing
├── public/              # Static assets, served as-is
├── index.html
└── vite.config.ts
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Add-ons from the CLI
&lt;/h2&gt;

&lt;p&gt;Instead of hand-wiring config every time, add-ons install and configure themselves:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx solid-vue add tailwind
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Right now the add-ons are Tailwind CSS, Lucide icons (&lt;code&gt;lucide-vue-next&lt;/code&gt;), and Tabler icons (&lt;code&gt;@tabler/icons-vue&lt;/code&gt;).&lt;/p&gt;

&lt;h2&gt;
  
  
  Deploying
&lt;/h2&gt;

&lt;p&gt;I've tested a real project end-to-end: it builds cleanly and deploys to &lt;strong&gt;Cloudflare Workers&lt;/strong&gt; with &lt;code&gt;wrangler&lt;/code&gt;. There is no Cloudflare-specific configuration required by Solid-Vue JS — deployment is handled with a single command. The only prerequisite is authenticating Wrangler with your Cloudflare account first with &lt;code&gt;npx wrangler login&lt;/code&gt;. If you done with Wrangler Auth, you can deploy your project to Cloudflare Worker with one command: &lt;code&gt;npm run deploy -- --target=cloudflare-worker&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where it stands
&lt;/h2&gt;

&lt;p&gt;Solid-Vue JS is &lt;strong&gt;early access / beta&lt;/strong&gt;. The core works, the packages are on npm, and the docs are live, but I expect rough edges, and that's exactly why I'm posting this.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🌐 Landing page: &lt;a href="https://solid-vue.tech" rel="noopener noreferrer"&gt;https://solid-vue.tech&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;📚 Docs: &lt;a href="https://docs.solid-vue.tech" rel="noopener noreferrer"&gt;https://docs.solid-vue.tech&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;💻 GitHub: &lt;a href="https://github.com/solid-vue/solid-vue/" rel="noopener noreferrer"&gt;https://github.com/solid-vue/solid-vue/&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Some ideas I'm exploring for later (no promises or timelines): REST connectors for other backends and integrations with services like Firebase and Supabase.&lt;/p&gt;

&lt;h2&gt;
  
  
  I'd love your feedback
&lt;/h2&gt;

&lt;p&gt;If you try it, I want to know:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;What broke or confused you in the first 10 minutes?&lt;/li&gt;
&lt;li&gt;What's the one feature that would make you actually use it?&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Drop a comment below. I read and reply to every one. Thanks for reading! 🙏&lt;/p&gt;

</description>
      <category>vite</category>
      <category>vue</category>
      <category>webdev</category>
      <category>javascript</category>
    </item>
    <item>
      <title>What Is the Simplest Frontend Framework for a Full-Stack Developer in 2026?</title>
      <dc:creator>Joni Ilman Pahmi</dc:creator>
      <pubDate>Tue, 29 Sep 2026 09:38:17 +0000</pubDate>
      <link>https://dev.to/solid-vue/what-is-the-simplest-frontend-framework-for-a-full-stack-developer-in-2026-2kbo</link>
      <guid>https://dev.to/solid-vue/what-is-the-simplest-frontend-framework-for-a-full-stack-developer-in-2026-2kbo</guid>
      <description>&lt;p&gt;If you already know JavaScript, HTML, CSS, Node.js, and some backend development, choosing a frontend framework in 2026 can feel strangely difficult.&lt;/p&gt;

&lt;p&gt;The syntax is rarely the hardest part.&lt;/p&gt;

&lt;p&gt;You also have to think about routing, state management, API integration, project structure, deployment, documentation, ecosystem, community, and—if you're looking for work—the size of the job market.&lt;/p&gt;

&lt;p&gt;So a very practical question appears:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Which frontend framework is the simplest to learn while still being practical for full-stack applications?&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The problem is that "simple" can mean different things.&lt;/p&gt;

&lt;p&gt;It can mean fewer lines of code.&lt;br&gt;
It can mean fewer concepts.&lt;br&gt;
It can mean less configuration.&lt;br&gt;
It can mean faster development.&lt;br&gt;
Or it can simply mean that the architecture makes sense to you.&lt;/p&gt;

&lt;p&gt;Those are not always the same thing.&lt;/p&gt;

&lt;p&gt;This article compares React with Vite, Next.js, Vue, Svelte, and a more opinionated Vue + Vite approach from the perspective of a developer who already understands JavaScript and backend development.&lt;/p&gt;
&lt;h2&gt;
  
  
  What Does "Simple" Actually Mean?
&lt;/h2&gt;

&lt;p&gt;For a full-stack developer, simplicity is not just about component syntax.&lt;/p&gt;

&lt;p&gt;A framework might be considered simple when you can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;get a project running quickly;&lt;/li&gt;
&lt;li&gt;understand the project structure without learning dozens of conventions;&lt;/li&gt;
&lt;li&gt;add routing without a lot of configuration;&lt;/li&gt;
&lt;li&gt;connect the frontend to an API without fighting the framework;&lt;/li&gt;
&lt;li&gt;manage application state with a predictable solution;&lt;/li&gt;
&lt;li&gt;deploy without understanding a large platform-specific abstraction;&lt;/li&gt;
&lt;li&gt;come back to the project six months later and still understand it.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That last point is often overlooked.&lt;/p&gt;

&lt;p&gt;A framework can be easy to start with but difficult to maintain.&lt;/p&gt;

&lt;p&gt;Another framework can provide a huge number of features out of the box but require more concepts before you feel comfortable.&lt;/p&gt;

&lt;p&gt;So instead of asking:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Which framework is the best?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;A more useful question is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Which level of abstraction matches the application I'm building?&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That changes the entire discussion.&lt;/p&gt;
&lt;h2&gt;
  
  
  React + Vite
&lt;/h2&gt;

&lt;p&gt;React remains a familiar choice for frontend development, while Vite provides a straightforward development environment for React applications.&lt;/p&gt;

&lt;p&gt;For developers who already know React, this combination can have a very small immediate learning curve.&lt;/p&gt;

&lt;p&gt;You already understand components, state, props, events, asynchronous code, and the general React development model.&lt;/p&gt;

&lt;p&gt;The trade-off appears when you move from components to the application as a whole.&lt;/p&gt;

&lt;p&gt;React itself is a UI library rather than an all-in-one application framework. Depending on your project, you may need to make additional decisions about routing, state management, forms, data fetching, validation, and other application concerns.&lt;/p&gt;

&lt;p&gt;That's not necessarily a bad thing.&lt;/p&gt;

&lt;p&gt;Experienced developers may actually prefer this flexibility because they can choose exactly what they need.&lt;/p&gt;

&lt;p&gt;But if your goal is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"I want a straightforward application workflow with sensible defaults."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;then every additional decision becomes part of the learning curve.&lt;/p&gt;

&lt;p&gt;So the interesting distinction is:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;React can be simple at the component level while the surrounding application architecture remains your responsibility.&lt;/strong&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Next.js
&lt;/h2&gt;

&lt;p&gt;Next.js provides a broader application framework around React.&lt;/p&gt;

&lt;p&gt;It brings conventions and features for things such as routing, server-side capabilities, rendering strategies, and deployment-oriented workflows.&lt;/p&gt;

&lt;p&gt;That can reduce the amount of infrastructure you have to assemble manually.&lt;/p&gt;

&lt;p&gt;But convenience has another side.&lt;/p&gt;

&lt;p&gt;You're not only learning React.&lt;/p&gt;

&lt;p&gt;You're also learning the Next.js way of handling routing, rendering, server functionality, data access, caching, and project organisation.&lt;/p&gt;

&lt;p&gt;For developers who want a full-stack React framework, that can be exactly what they're looking for.&lt;/p&gt;

&lt;p&gt;But for someone whose main goal is learning frontend development as quickly as possible, those additional concepts are worth considering.&lt;/p&gt;

&lt;p&gt;This creates an important distinction:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;More built-in capability can reduce manual wiring, but it can also increase the framework mental model.&lt;/strong&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Vue
&lt;/h2&gt;

&lt;p&gt;Vue takes a slightly different approach to the learning experience.&lt;/p&gt;

&lt;p&gt;Its component model is approachable for developers who already understand HTML, CSS, and JavaScript, while the official ecosystem provides established solutions for common application concerns.&lt;/p&gt;

&lt;p&gt;That gives Vue an interesting middle ground.&lt;/p&gt;

&lt;p&gt;You can start with a relatively small application and gradually introduce routing, state management, and other capabilities as the project grows.&lt;/p&gt;

&lt;p&gt;You don't necessarily need to adopt a complete application platform on day one.&lt;/p&gt;

&lt;p&gt;For small applications, that incremental approach can be useful.&lt;/p&gt;

&lt;p&gt;It allows the developer to learn the framework itself first, then add more pieces when the application actually needs them.&lt;/p&gt;

&lt;p&gt;In other words:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Vue can provide structure without forcing the entire application architecture on you immediately.&lt;/strong&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Svelte
&lt;/h2&gt;

&lt;p&gt;Svelte is another option that often comes up when simplicity is the main objective.&lt;/p&gt;

&lt;p&gt;Its component syntax can feel concise, and its compiler-oriented approach moves some work into the build process rather than relying on a large runtime abstraction.&lt;/p&gt;

&lt;p&gt;That can make the development experience feel different from React or Vue.&lt;/p&gt;

&lt;p&gt;However, fewer lines of code do not automatically mean a smaller learning curve.&lt;/p&gt;

&lt;p&gt;A developer coming from React still needs to understand Svelte's component model, conventions, and ecosystem.&lt;/p&gt;

&lt;p&gt;So Svelte is worth evaluating on its own terms rather than simply assuming:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;fewer lines = simpler framework.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Sometimes the mental model matters more than the amount of code you write.&lt;/p&gt;
&lt;h2&gt;
  
  
  Full-Stack Developers Have a Different Problem
&lt;/h2&gt;

&lt;p&gt;A full-stack developer already understands concepts such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;HTTP;&lt;/li&gt;
&lt;li&gt;APIs;&lt;/li&gt;
&lt;li&gt;authentication;&lt;/li&gt;
&lt;li&gt;databases;&lt;/li&gt;
&lt;li&gt;server-side validation;&lt;/li&gt;
&lt;li&gt;application architecture.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That means the frontend framework does not exist in isolation.&lt;/p&gt;

&lt;p&gt;It has to fit into an existing mental model.&lt;/p&gt;

&lt;p&gt;There are generally two ways to structure the application.&lt;/p&gt;

&lt;p&gt;The first is to keep the frontend and backend separate:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Browser
   |
   v
React / Vue / Svelte
   |
   v
REST / GraphQL API
   |
   v
Node / Laravel / Other backend
   |
   v
Database
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The second is to use a framework that combines frontend and server capabilities:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Browser
   |
   v
Full-stack framework
   |
   +---- UI
   |
   +---- Server / API
   |
   +---- Data access
   |
   v
Database
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Neither architecture is automatically simpler.&lt;/p&gt;

&lt;p&gt;The important question is whether the framework's conventions actually reduce the amount of work required for your particular application.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Hidden Cost of "Simple"
&lt;/h2&gt;

&lt;p&gt;Every abstraction has a learning cost.&lt;/p&gt;

&lt;p&gt;A framework might give you routing, server functions, data fetching, caching, rendering strategies, and deployment conventions.&lt;/p&gt;

&lt;p&gt;Those capabilities can save time later.&lt;/p&gt;

&lt;p&gt;But every one of those features also creates another concept you need to understand.&lt;/p&gt;

&lt;p&gt;This creates a trade-off:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;More built-in capability
        |
        v
Less manual wiring
        |
        v
More framework concepts
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And the opposite direction looks like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Less built-in capability
        |
        v
More manual choices
        |
        v
Smaller framework mental model
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Neither side is universally correct.&lt;/p&gt;

&lt;p&gt;The sweet spot depends on the project.&lt;/p&gt;

&lt;h2&gt;
  
  
  A Small Business Application Is Not a Large Platform
&lt;/h2&gt;

&lt;p&gt;Consider a typical small-business application.&lt;/p&gt;

&lt;p&gt;It might need:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;authentication;&lt;/li&gt;
&lt;li&gt;a dashboard;&lt;/li&gt;
&lt;li&gt;CRUD operations;&lt;/li&gt;
&lt;li&gt;forms;&lt;/li&gt;
&lt;li&gt;an API;&lt;/li&gt;
&lt;li&gt;database access;&lt;/li&gt;
&lt;li&gt;reports;&lt;/li&gt;
&lt;li&gt;PDF or spreadsheet exports;&lt;/li&gt;
&lt;li&gt;a few charts.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That's already a real application.&lt;/p&gt;

&lt;p&gt;But it does not necessarily require the architecture of a large distributed platform.&lt;/p&gt;

&lt;p&gt;Sometimes a predictable set of conventions is more useful than a large collection of infrastructure designed for problems the application does not currently have.&lt;/p&gt;

&lt;p&gt;This is where lightweight application architecture becomes interesting.&lt;/p&gt;

&lt;p&gt;The goal isn't to remove capabilities.&lt;/p&gt;

&lt;p&gt;The goal is to avoid making developers configure capabilities that their application doesn't actually need yet.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where a Lightweight Vue + Vite Approach Fits
&lt;/h2&gt;

&lt;p&gt;This is also the idea behind &lt;strong&gt;Solid-Vue&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Solid-Vue is an early-access Vue + Vite application framework focused on small and growing applications.&lt;/p&gt;

&lt;p&gt;The basic idea is straightforward:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Keep Vue and Vite as the foundation, then provide sensible defaults and integrated pieces for common application development tasks.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;For example, a project can bring together:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Vue;&lt;/li&gt;
&lt;li&gt;Vite;&lt;/li&gt;
&lt;li&gt;file-based routing;&lt;/li&gt;
&lt;li&gt;Pinia;&lt;/li&gt;
&lt;li&gt;a server layer.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The point is not to replace Vue.&lt;/p&gt;

&lt;p&gt;The point is to reduce the amount of orchestration work around Vue.&lt;/p&gt;

&lt;p&gt;Instead of repeatedly deciding how to connect the common pieces together, the framework provides a starting structure for developers who want a more opinionated workflow.&lt;/p&gt;

&lt;p&gt;For a full-stack developer building business applications, that can be a useful distinction.&lt;/p&gt;

&lt;p&gt;At the same time, Solid-Vue is still early-access.&lt;/p&gt;

&lt;p&gt;That means there is less ecosystem maturity than established technologies such as React, Next.js, Vue, or Svelte.&lt;/p&gt;

&lt;p&gt;That's an important trade-off, especially if your priority is ecosystem size, tutorials, community support, or hiring opportunities.&lt;/p&gt;

&lt;h2&gt;
  
  
  What About Jobs and Community?
&lt;/h2&gt;

&lt;p&gt;Learning difficulty is only one variable.&lt;/p&gt;

&lt;p&gt;If your goal is employment, you should also consider the technologies actually requested by employers in the market where you want to work.&lt;/p&gt;

&lt;p&gt;A smaller framework might be pleasant to learn while having fewer job listings, tutorials, or developers available to help.&lt;/p&gt;

&lt;p&gt;A larger ecosystem can provide more resources and potentially more employment opportunities.&lt;/p&gt;

&lt;p&gt;At the same time, job availability depends on many other factors, including country, company, seniority, and your overall skill set.&lt;/p&gt;

&lt;p&gt;So choosing a framework based only on the word &lt;strong&gt;"simple"&lt;/strong&gt; can be misleading.&lt;/p&gt;

&lt;p&gt;A practical way to think about it is to separate your goals.&lt;/p&gt;

&lt;p&gt;If your priority is employment, investigate the technologies employers are actually asking for.&lt;/p&gt;

&lt;p&gt;If your priority is learning frontend fundamentals, choose a framework whose programming model you can understand and practise consistently.&lt;/p&gt;

&lt;p&gt;If your priority is building small full-stack applications, evaluate how much application wiring the framework requires for the kinds of projects you actually expect to build.&lt;/p&gt;

&lt;p&gt;Different priorities can lead to different choices.&lt;/p&gt;

&lt;h2&gt;
  
  
  Should You Stay With React or Switch?
&lt;/h2&gt;

&lt;p&gt;If you already know React and have built several projects, switching is not automatically necessary.&lt;/p&gt;

&lt;p&gt;Your existing knowledge still transfers.&lt;/p&gt;

&lt;p&gt;Components, state, props, events, asynchronous operations, browser behaviour, JavaScript, and application architecture are not concepts that disappear when you change frameworks.&lt;/p&gt;

&lt;p&gt;In fact, you don't have to turn framework selection into a permanent decision.&lt;/p&gt;

&lt;p&gt;A better experiment is to build the same small application using two different frameworks.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Customer Management
       |
       +-- Search
       +-- Add customer
       +-- Edit customer
       +-- Delete customer
       +-- API
       +-- Database
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Build it with the framework you already know.&lt;/p&gt;

&lt;p&gt;Then build the same application with Vue or Svelte.&lt;/p&gt;

&lt;p&gt;Now compare the development experience.&lt;/p&gt;

&lt;p&gt;Don't only count lines of code.&lt;/p&gt;

&lt;p&gt;Ask:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How long did the first working version take?&lt;/li&gt;
&lt;li&gt;How many dependencies did you add?&lt;/li&gt;
&lt;li&gt;How many configuration decisions did you make?&lt;/li&gt;
&lt;li&gt;How often did you need the documentation?&lt;/li&gt;
&lt;li&gt;How easy was routing?&lt;/li&gt;
&lt;li&gt;How easy was API integration?&lt;/li&gt;
&lt;li&gt;How easy was state management?&lt;/li&gt;
&lt;li&gt;Could you explain the architecture to another developer?&lt;/li&gt;
&lt;li&gt;Would you still understand the project six months later?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Those answers tell you much more than a generic claim that one framework is "easier".&lt;/p&gt;

&lt;h2&gt;
  
  
  So, Which One Is the Simplest?
&lt;/h2&gt;

&lt;p&gt;There isn't one framework that is objectively the simplest for every developer.&lt;/p&gt;

&lt;p&gt;For someone already comfortable with React, React + Vite may have the smallest immediate learning cost.&lt;/p&gt;

&lt;p&gt;Next.js provides a more integrated full-stack React experience, but that also introduces additional framework concepts.&lt;/p&gt;

&lt;p&gt;Vue offers an approachable component model and an ecosystem where application capabilities can be introduced progressively.&lt;/p&gt;

&lt;p&gt;Svelte provides a distinct and concise development model, but still requires learning its own ecosystem and conventions.&lt;/p&gt;

&lt;p&gt;A lightweight Vue + Vite framework such as Solid-Vue takes another approach: add more conventions around Vue while keeping the underlying stack relatively familiar.&lt;/p&gt;

&lt;p&gt;So the more useful question isn't:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Which framework is objectively easiest?"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It's this:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;"Which framework gives me the least unnecessary complexity for the applications I actually want to build?"&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;For a full-stack developer, that's a much more practical question.&lt;/p&gt;

&lt;p&gt;And when you're still unsure, there's a simple way to find out:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Build one small application with two candidates.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The development experience will probably tell you more than another twenty framework comparison articles.&lt;/p&gt;

</description>
      <category>opensource</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>typescript</category>
    </item>
    <item>
      <title>Why Small Businesses Rarely Need Heavy JavaScript Frameworks??</title>
      <dc:creator>Joni Ilman Pahmi</dc:creator>
      <pubDate>Sun, 06 Sep 2026 06:44:59 +0000</pubDate>
      <link>https://dev.to/joni_ilman12/why-small-businesses-rarely-need-heavy-javascript-frameworks-5512</link>
      <guid>https://dev.to/joni_ilman12/why-small-businesses-rarely-need-heavy-javascript-frameworks-5512</guid>
      <description>&lt;p&gt;Small and medium-sized enterprises (SMEs/SMBs) rarely need heavy enterprise JavaScript frameworks for their business websites.&lt;/p&gt;

&lt;p&gt;Frameworks such as Angular, React, or complex meta-frameworks such as Next.js are incredibly capable. They are designed to solve serious problems: complex application state, large data flows, sophisticated user interfaces, and development at significant team scale.&lt;/p&gt;

&lt;p&gt;But a typical small-business website has a very different job.&lt;/p&gt;

&lt;p&gt;It needs to load quickly, communicate clearly, generate leads, support business operations, and remain reliable for years.&lt;/p&gt;

&lt;p&gt;In other words, the priorities are usually &lt;strong&gt;speed, clarity, and reliability&lt;/strong&gt;—not massive multi-team scaling.&lt;/p&gt;

&lt;p&gt;This difference is easy to overlook, especially when modern JavaScript tooling makes it tempting to reach for the most powerful stack available.&lt;/p&gt;

&lt;p&gt;That can create what developers sometimes call a &lt;strong&gt;"complexity tax."&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Heavy Frameworks Can Be Overkill for SMB Websites
&lt;/h2&gt;

&lt;p&gt;The problem isn't that enterprise frameworks are bad. The problem is using enterprise-level engineering solutions for problems that don't require them.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Factor&lt;/th&gt;
&lt;th&gt;Enterprise JavaScript Applications&lt;/th&gt;
&lt;th&gt;Typical SMB Websites&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Primary goal&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Highly dynamic application state and heavy data pipelines&lt;/td&gt;
&lt;td&gt;Fast loading, clear business information, and simple lead capture&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;SEO &amp;amp; performance&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Often involves significant client-side JavaScript and hydration complexity&lt;/td&gt;
&lt;td&gt;Prefer fast, server-rendered HTML that search engines can easily understand&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Development cost&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Can require specialized developers familiar with complex state, build, and deployment systems&lt;/td&gt;
&lt;td&gt;Lower upfront cost, simpler code, and faster time-to-market&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Maintenance&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Frequent dependency, tooling, and framework updates&lt;/td&gt;
&lt;td&gt;Long-term stability and predictable maintenance&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;This doesn't mean an SMB should never use React, Angular, Next.js, or another modern framework.&lt;/p&gt;

&lt;p&gt;If the website is actually an application, the calculation changes.&lt;/p&gt;

&lt;p&gt;The point is to match the engineering solution to the business problem.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. The Hype Cycle vs. Business ROI
&lt;/h2&gt;

&lt;p&gt;The JavaScript ecosystem moves incredibly fast.&lt;/p&gt;

&lt;p&gt;New bundlers appear. State-management approaches change. Frameworks introduce new rendering models. Build tools evolve. Dependencies are replaced.&lt;/p&gt;

&lt;p&gt;For a large enterprise, keeping up with these changes can make sense. A large engineering organization may have dedicated teams, established architecture strategies, and the budget to continuously invest in its technology stack.&lt;/p&gt;

&lt;p&gt;For a small business, the economics can be very different.&lt;/p&gt;

&lt;p&gt;A typical SMB doesn't want to pay a developer every month simply to keep a brochure website's dependency tree healthy.&lt;/p&gt;

&lt;p&gt;They want the website to keep working.&lt;/p&gt;

&lt;p&gt;If a business website contains mostly:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Company information&lt;/li&gt;
&lt;li&gt;Services&lt;/li&gt;
&lt;li&gt;Contact details&lt;/li&gt;
&lt;li&gt;Blog content&lt;/li&gt;
&lt;li&gt;Testimonials&lt;/li&gt;
&lt;li&gt;Product information&lt;/li&gt;
&lt;li&gt;A contact or quotation form&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;then constantly chasing the newest JavaScript architecture may provide very little business value.&lt;/p&gt;

&lt;p&gt;The question shouldn't be:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"What is the most modern framework we can use?"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It should be:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"What is the simplest technology that reliably solves this business problem?"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That shift in perspective can save both development time and long-term maintenance costs.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Browser Standards Have Leveled Up
&lt;/h2&gt;

&lt;p&gt;Part of the reason JavaScript frameworks became so popular was that browsers historically lacked many convenient primitives for building sophisticated interfaces.&lt;/p&gt;

&lt;p&gt;Developers needed libraries to standardize component behavior, asynchronous communication, interactions, and UI patterns.&lt;/p&gt;

&lt;p&gt;Modern browsers are much more capable.&lt;/p&gt;

&lt;p&gt;Many tasks that previously required substantial libraries can now be handled with native web platform features.&lt;/p&gt;

&lt;h2&gt;
  
  
  Native Componentization
&lt;/h2&gt;

&lt;p&gt;Web Components provide native mechanisms for reusable custom elements and encapsulated UI behavior.&lt;/p&gt;

&lt;p&gt;They aren't a replacement for every component framework, but they demonstrate how much component-oriented functionality is now available directly in the platform.&lt;/p&gt;

&lt;h2&gt;
  
  
  Clean Asynchronous Actions
&lt;/h2&gt;

&lt;p&gt;The &lt;code&gt;fetch()&lt;/code&gt; API provides a straightforward native way to communicate with servers asynchronously.&lt;/p&gt;

&lt;p&gt;For many simple forms, API calls, and progressive enhancements, you don't necessarily need a large client-side data layer.&lt;/p&gt;

&lt;h2&gt;
  
  
  Rich UIs Without Massive JavaScript Bundles
&lt;/h2&gt;

&lt;p&gt;Modern CSS has also become dramatically more capable.&lt;/p&gt;

&lt;p&gt;Grid, Flexbox, transitions, animations, container queries, and other platform features can handle a surprising amount of UI work without introducing a large JavaScript dependency chain.&lt;/p&gt;

&lt;p&gt;And when JavaScript is necessary, a small amount of vanilla JavaScript—or a lightweight library—can often be enough.&lt;/p&gt;

&lt;p&gt;The browser itself has become a much better development platform.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Applications vs. Websites
&lt;/h2&gt;

&lt;p&gt;This is probably the most important distinction.&lt;/p&gt;

&lt;p&gt;Consider something like Gmail, an analytics dashboard, an ERP system, or a complex SaaS product.&lt;/p&gt;

&lt;p&gt;These are applications.&lt;/p&gt;

&lt;p&gt;They have:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Complex state&lt;/li&gt;
&lt;li&gt;Frequent user interaction&lt;/li&gt;
&lt;li&gt;Authentication&lt;/li&gt;
&lt;li&gt;Rich client-side workflows&lt;/li&gt;
&lt;li&gt;Large amounts of dynamic data&lt;/li&gt;
&lt;li&gt;Sophisticated UI behavior&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A serious application framework can provide enormous value here.&lt;/p&gt;

&lt;p&gt;Now consider:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A local service provider&lt;/li&gt;
&lt;li&gt;A law firm&lt;/li&gt;
&lt;li&gt;A consulting business&lt;/li&gt;
&lt;li&gt;A restaurant&lt;/li&gt;
&lt;li&gt;A marketing agency&lt;/li&gt;
&lt;li&gt;A company brochure website&lt;/li&gt;
&lt;li&gt;A simple e-commerce storefront&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;These are primarily websites.&lt;/p&gt;

&lt;p&gt;Their job is often to:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Explain what the business does.&lt;/li&gt;
&lt;li&gt;Build trust.&lt;/li&gt;
&lt;li&gt;Help visitors find information.&lt;/li&gt;
&lt;li&gt;Generate a call, message, booking, or inquiry.&lt;/li&gt;
&lt;li&gt;Rank well in search engines.&lt;/li&gt;
&lt;li&gt;Load quickly on a wide range of devices.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Adding a large client-side application architecture to render mostly static business information can introduce engineering overhead without creating proportional business value.&lt;/p&gt;

&lt;p&gt;The technology should serve the website—not become the product.&lt;/p&gt;

&lt;h2&gt;
  
  
  So, What Should SMBs Use Instead?
&lt;/h2&gt;

&lt;p&gt;There isn't one universal answer.&lt;/p&gt;

&lt;p&gt;The right stack depends on the business and the website's actual requirements.&lt;/p&gt;

&lt;p&gt;But several approaches are often worth considering.&lt;/p&gt;

&lt;h2&gt;
  
  
  Lightweight CMS Platforms
&lt;/h2&gt;

&lt;p&gt;A lightweight CMS can be a great fit when business owners need to update their own content.&lt;/p&gt;

&lt;p&gt;For example, changing:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Service descriptions&lt;/li&gt;
&lt;li&gt;Prices&lt;/li&gt;
&lt;li&gt;Opening hours&lt;/li&gt;
&lt;li&gt;Team information&lt;/li&gt;
&lt;li&gt;Blog posts&lt;/li&gt;
&lt;li&gt;Product details&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;shouldn't always require a developer.&lt;/p&gt;

&lt;h2&gt;
  
  
  Vanilla HTML, CSS, and Minimal JavaScript
&lt;/h2&gt;

&lt;p&gt;For relatively simple websites, the traditional web platform remains extremely powerful.&lt;/p&gt;

&lt;p&gt;A small HTML/CSS/JS application can be:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Fast&lt;/li&gt;
&lt;li&gt;Secure&lt;/li&gt;
&lt;li&gt;Easy to understand&lt;/li&gt;
&lt;li&gt;Cheap to host&lt;/li&gt;
&lt;li&gt;Easy to maintain&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And there is something valuable about having fewer moving parts.&lt;/p&gt;

&lt;h2&gt;
  
  
  Lightweight UI Libraries
&lt;/h2&gt;

&lt;p&gt;Sometimes a website genuinely needs interactivity.&lt;/p&gt;

&lt;p&gt;That doesn't automatically mean it needs a full application framework.&lt;/p&gt;

&lt;p&gt;For smaller interactive requirements, tools such as &lt;strong&gt;Alpine.js&lt;/strong&gt; or &lt;strong&gt;Lit&lt;/strong&gt; can provide useful reactive behavior without requiring an entire enterprise-style frontend architecture.&lt;/p&gt;

&lt;p&gt;The goal isn't to avoid JavaScript.&lt;/p&gt;

&lt;p&gt;The goal is to use &lt;strong&gt;the amount of JavaScript the problem actually requires&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  It's Not About "Frameworks vs. No Frameworks"
&lt;/h2&gt;

&lt;p&gt;This discussion can easily become tribal.&lt;/p&gt;

&lt;p&gt;That's not the point.&lt;/p&gt;

&lt;p&gt;A framework isn't inherently bad.&lt;/p&gt;

&lt;p&gt;React, Angular, Vue, Next.js, and similar tools exist because they solve real problems.&lt;/p&gt;

&lt;p&gt;The mistake is assuming that every website has those problems.&lt;/p&gt;

&lt;p&gt;A useful rule is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Choose architecture based on complexity, not popularity.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;If you're building a SaaS dashboard with thousands of concurrent users and complex client-side state, use the tools that make that problem manageable.&lt;/p&gt;

&lt;p&gt;If you're building a five-page website for a local business, ask whether you actually need the same architecture.&lt;/p&gt;

&lt;p&gt;Sometimes the best engineering decision is not adding another abstraction.&lt;/p&gt;

&lt;p&gt;Sometimes it's removing one.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where I'm Taking This Idea: Solid-Vue
&lt;/h2&gt;

&lt;p&gt;This line of thinking is also part of why I'm currently developing &lt;strong&gt;Solid-Vue&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Solid-Vue is an experimental, early-access project focused on making Vue-based business applications and websites simpler to build without turning every project into a large framework-heavy architecture.&lt;/p&gt;

&lt;p&gt;The idea is not to replace Vue or compete with every existing meta-framework.&lt;/p&gt;

&lt;p&gt;Instead, I'm exploring a smaller, more opinionated approach around the things a typical business project actually needs: Vue, Vite, file-based routing, Pinia, and a lightweight server layer.&lt;/p&gt;

&lt;p&gt;It's still &lt;strong&gt;early access and experimental&lt;/strong&gt;, so the architecture is evolving and the project is definitely not production-ready for every use case yet.&lt;/p&gt;

&lt;p&gt;You can follow the project here:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Website:&lt;/strong&gt; &lt;a href="https://solid-vue.tech/" rel="noopener noreferrer"&gt;https://solid-vue.tech/&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;GitHub:&lt;/strong&gt; &lt;a href="https://github.com/solid-vue/solid-vue" rel="noopener noreferrer"&gt;https://github.com/solid-vue/solid-vue&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I'd love to hear what other developers think about this approach—especially where you draw the line between a "website" and an "application", and how much JavaScript architecture you consider reasonable for a small business project.&lt;/p&gt;




&lt;h2&gt;
  
  
  References
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href="https://www.linkedin.com/posts/ankit-kshirsagar-530278137_7-benefits-of-js-frameworks-for-enterprise-scale-activity-7397623586880032768-l0B2" rel="noopener noreferrer"&gt;7 Benefits of JS Frameworks for Enterprise Scale — LinkedIn&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://monsoondigital.net/insights/javascript-frameworks-are-for-apps-not-business-websites/" rel="noopener noreferrer"&gt;JavaScript Frameworks Are for Apps, Not Business Websites — Monsoon Digital&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://medium.com/@resti.guay/the-hidden-million-dollar-cost-why-modern-javascript-frameworks-are-bankrupting-enterprise-575db08a4663" rel="noopener noreferrer"&gt;The Hidden Million-Dollar Cost: Why Modern JavaScript Frameworks Are Bankrupting Enterprise — Medium&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/holasoymalva/why-the-latest-javascript-frameworks-are-a-waste-of-time-52pc"&gt;Why the Latest JavaScript Frameworks Are a Waste of Time — DEV Community&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/starbist/with-or-without-the-js-framework-2k58"&gt;With or Without the JS Framework? — DEV Community&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.richhudson.net/blog/why-i-skip-frameworks-when-building-small-business-websites" rel="noopener noreferrer"&gt;Why I Skip Frameworks When Building Small Business Websites&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.quora.com/Why-isn-t-JavaScript-used-for-enterprise-development-Why-is-Java-the-main-language-for-Enterprise-development" rel="noopener noreferrer"&gt;Why Isn't JavaScript Used for Enterprise Development? — Quora&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://medium.com/@mernstackdevbykevin/javascript-frameworks-are-quietly-losing-their-grip-30642cd57680" rel="noopener noreferrer"&gt;JavaScript Frameworks Are Quietly Losing Their Grip — Medium&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>webdev</category>
      <category>smb</category>
      <category>javascript</category>
      <category>vue</category>
    </item>
    <item>
      <title>Solid-Vue JS | The Minimalist Vue + Vite Web Frameworks (No relation to SolidJS or SolidStart at all)</title>
      <dc:creator>Joni Ilman Pahmi</dc:creator>
      <pubDate>Sat, 05 Sep 2026 00:12:00 +0000</pubDate>
      <link>https://dev.to/joni_ilman12/solid-vue-the-minimalist-vue-vite-web-frameworks-no-relation-to-solidjs-or-solidstart-at-all-l9e</link>
      <guid>https://dev.to/joni_ilman12/solid-vue-the-minimalist-vue-vite-web-frameworks-no-relation-to-solidjs-or-solidstart-at-all-l9e</guid>
      <description>&lt;p&gt;Solid-Vue JS is a lightweight Vue + Vite framework for small and growing businesses. File-based routing, a built-in server layer powered by h3, and zero extra config to wire together.&lt;/p&gt;

&lt;h2&gt;
  
  
  Features
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;File-based routing — every file in src/pages becomes a route automatically, via unplugin-vue-router.&lt;/li&gt;
&lt;li&gt;A server, built in — src/server/api holds your API endpoints, served through h3 alongside your frontend. One dev server, one deploy.&lt;/li&gt;
&lt;li&gt;Vite underneath — instant startup and near-instant HMR.&lt;/li&gt;
&lt;li&gt;State management ready — Pinia is wired in out of the box.&lt;/li&gt;
&lt;li&gt;Extensible via add-ons — install Tailwind CSS, icon sets, form validation, i18n, and more with the companion solid-vue-cli.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Quick start
&lt;/h2&gt;

&lt;p&gt;Don't install this package directly — scaffold a new project instead:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm create solid-vue@latest my-app
&lt;span class="nb"&gt;cd &lt;/span&gt;my-app
npm &lt;span class="nb"&gt;install
&lt;/span&gt;npm run dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Usage
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;&lt;code&gt;vite.config.ts&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;defineConfig&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;vite&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;solidVue&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;solid-vue&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nf"&gt;defineConfig&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;plugins&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="nf"&gt;solidVue&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;mode&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;spa&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;&lt;code&gt;src/main.ts&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createSolidApp&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;solid-vue/client&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./App.vue&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;router&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;createSolidApp&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;App&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="nx"&gt;router&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;isReady&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;app&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;mount&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;#app&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;&lt;code&gt;src/server/api/hello.ts&lt;/code&gt;&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;defineEventHandler&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;solid-vue/server&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nf"&gt;defineEventHandler&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;message&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello from Solid-Vue!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Plugin options
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nf"&gt;solidVue&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;mode&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;spa&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;        &lt;span class="c1"&gt;// 'spa' | 'ssr' | 'ssg' — default: 'spa'&lt;/span&gt;
  &lt;span class="na"&gt;apiPrefix&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/api&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;  &lt;span class="c1"&gt;// prefix for file-based API routes — default: '/api'&lt;/span&gt;
  &lt;span class="na"&gt;optimizeCWV&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;  &lt;span class="c1"&gt;// inject Core Web Vitals meta/preconnect tags — default: true&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Package exports
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Entry&lt;/th&gt;
&lt;th&gt;Use&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;solid-vue&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;The Vite plugin (&lt;code&gt;solidVue&lt;/code&gt;), used in &lt;code&gt;vite.config.ts&lt;/code&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;solid-vue/client&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;createSolidApp()&lt;/code&gt; — bootstraps Vue, Vue Router, and Pinia&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;solid-vue/server&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Re-exported h3 utilities (&lt;code&gt;defineEventHandler&lt;/code&gt;, &lt;code&gt;readBody&lt;/code&gt;, &lt;code&gt;useSession&lt;/code&gt;, etc.) for your API routes&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Add-ons
&lt;/h2&gt;

&lt;p&gt;Add optional integrations to an existing project with the CLI:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx solid-vue add tailwind
npx solid-vue add pinia
npx solid-vue add vitest
npx solid-vue add auth
npx solid-vue add i18n
npx solid-vue add lint
npx solid-vue add tabler
npx solid-vue add lucide
npx solid-vue add ofetch
npx solid-vue add unhead
npx solid-vue add vee-validate
npx solid-vue add vueuse
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Requirements
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Node.js 22+&lt;/li&gt;
&lt;li&gt;Vue ^3.4, Vue Router ^4, Pinia ^2, Vite ^8, &lt;code&gt;@vitejs/plugin-vue&lt;/code&gt; ^6 (installed as peer dependencies)&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  License
&lt;/h2&gt;

&lt;p&gt;MIT&lt;/p&gt;

&lt;h2&gt;
  
  
  Join Early Access Programme
&lt;/h2&gt;

&lt;p&gt;Solid-Vue JS is currently in its early access phase. We're early, and there's plenty still to build — but we'd love for you to try it and tell us what's missing. We'd be absolutely chuffed if you could test it out and share your thoughts.&lt;/p&gt;

&lt;p&gt;You can give your review, feedback and contributing on our project by following link:&lt;br&gt;
Our Page: &lt;a href="https://solid-vue.tech/" rel="noopener noreferrer"&gt;https://solid-vue.tech/&lt;/a&gt;&lt;br&gt;
Doc Page: &lt;a href="https://docs.solid-vue.tech/guide/getting-started" rel="noopener noreferrer"&gt;https://docs.solid-vue.tech/guide/getting-started&lt;/a&gt;&lt;br&gt;
Blog Page: &lt;a href="https://docs.solid-vue.tech/blog/" rel="noopener noreferrer"&gt;https://docs.solid-vue.tech/blog/&lt;/a&gt;&lt;br&gt;
NPMJS: &lt;a href="https://www.npmjs.com/%7Ejoniilmanfahmi00-collab" rel="noopener noreferrer"&gt;https://www.npmjs.com/~joniilmanfahmi00-collab&lt;/a&gt;&lt;br&gt;
GitHub: &lt;a href="https://github.com/solid-vue/solid-vue" rel="noopener noreferrer"&gt;https://github.com/solid-vue/solid-vue&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>showdev</category>
      <category>vue</category>
      <category>fullstack</category>
    </item>
  </channel>
</rss>
