{"id":42009,"date":"2025-12-15T13:37:57","date_gmt":"2025-12-15T12:37:57","guid":{"rendered":"https:\/\/www.dbi-services.com\/blog\/?p=42009"},"modified":"2025-12-15T13:37:59","modified_gmt":"2025-12-15T12:37:59","slug":"ai-isnt-your-architect-real-world-issues-in-a-vue-project","status":"publish","type":"post","link":"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/","title":{"rendered":"AI Isn\u2019t Your Architect: Real-World Issues in a Vue  project"},"content":{"rendered":"\n<p>In my <a href=\"https:\/\/www.dbi-services.com\/blog\/how-effective-is-ai-on-a-development-project\/\">previous article<\/a> I generated a Rest NestJS API using AI. <br>Today, I will create a small UI to authenticate users via the API. I will use this simple case to show the limits of coding with AI and what you need to be attentive to.<\/p>\n\n\n\n<p>I will create my interface with <a href=\"https:\/\/vuejs.org\/\">Vue 3<\/a> and <a href=\"https:\/\/vuetifyjs.com\/en\/\">Vuetify<\/a> still using the <a href=\"https:\/\/github.com\/features\/copilot\">GitHub Copilot<\/a> agent on Vs Code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-initializing-the-project\">Initializing the project<\/h2>\n\n\n\n<p>I create the new Vuetify project with the npm command:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm create vuetify@latest<\/code><\/pre>\n\n\n\n<p>To avoid CORS request between the Vuetify project and the API project, I&#8217;m configuring a proxy into Vite like in <a href=\"https:\/\/www.dbi-services.com\/blog\/avoid-cors-requests-in-development-mode-with-vite\/\">my other article<\/a>.<\/p>\n\n\n\n<p>In the AI chat, I also initialize my context<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Remember:\n- You are a full-stack TypeScript developer.\n- You follow best practices in development and security.\n- You will work on this NestJS project.<\/code><\/pre>\n\n\n\n<p>To guide the AI, I&#8217;m exporting the Open API definition into a file in my project: \/api-docs\/open-api.json<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-connecting-to-api-first-issue\">Connecting to API, first issue<\/h2>\n\n\n\n<p>First, I want to connect my UI to the API, and I ask the AI the following:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Connect the application to the API. The API url path is \/api<\/code><\/pre>\n\n\n\n<p>The result is not what I expected\u2026 My goal was to generate a simple class that makes requests to API with support for JWT tokens, but by default the AI wanted to add the Axios library to the project.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"563\" src=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/AI_add_axios-1024x563.png\" alt=\"\" class=\"wp-image-42011\" srcset=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/AI_add_axios-1024x563.png 1024w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/AI_add_axios-300x165.png 300w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/AI_add_axios-768x422.png 768w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/AI_add_axios-1536x845.png 1536w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/AI_add_axios-2048x1126.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>I\u2019m not saying that Axios is a bad library, but it\u2019s far too complicated for my usage and will add too many dependencies to the project, and therefore more maintenance.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"517\" src=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Axios_npm-1-1024x517.png\" alt=\"\" class=\"wp-image-42013\" srcset=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Axios_npm-1-1024x517.png 1024w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Axios_npm-1-300x151.png 300w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Axios_npm-1-768x388.png 768w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Axios_npm-1-1536x776.png 1536w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Axios_npm-1-2048x1034.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>So I&#8217;m skipping the installation of the library and I&#8217;m stopping the AI agent.<\/p>\n\n\n\n<p>To continue and generate the desired code, I ask the AI:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>I don't want to use axios, connect the application to the API with native typescript code<\/code><\/pre>\n\n\n\n<p> With this prompt, the generated code is fine.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-authentication-service-hidden-issue\">Authentication Service, hidden issue<\/h2>\n\n\n\n<p>Without going into the details, I asked the AI to create my authentication form and the associated service:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Add a page \/login to authenticate users, Use vuetify for login form.\nAdd a service to authenticate the users using the api endpoint \/auth\/login\nThe api return jwt token.\nWhen the user is authenticated, redirect the user to \/home\nIf a user accesses \/index without authentication redirect the user to \/login<\/code><\/pre>\n\n\n\n<p>The result looks good and works:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"550\" src=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Login_Form-1-1024x550.png\" alt=\"\" class=\"wp-image-42015\" srcset=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Login_Form-1-1024x550.png 1024w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Login_Form-1-300x161.png 300w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Login_Form-1-768x412.png 768w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Login_Form-1.png 1222w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>At first glance, the code works and I can authenticate myself. But the problem comes from the code itself:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"569\" src=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Code_Storage-1024x569.png\" alt=\"\" class=\"wp-image-42016\" srcset=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Code_Storage-1024x569.png 1024w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Code_Storage-300x167.png 300w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Code_Storage-768x427.png 768w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Code_Storage-1536x854.png 1536w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Code_Storage.png 1730w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The localStorage is accessible by all scripts, thus vulnerable to XSS attacks.<\/p>\n\n\n\n<p>JWT access tokens should not be stored in persistent storage accessible by JavaScript, such as localStorage. To reduce the risk of XSS attacks, it is preferable to store the access token in a Vue service variable rather than in persistent browser storage.<\/p>\n\n\n\n<p><strong>Note:<\/strong> When stored in memory, the token will be lost at every page refresh, which requires implementing a refresh token mechanism. The refresh token should be stored in an <code>HttpOnly<\/code> cookie, allowing the access token to have a short expiration time and significantly limiting the impact of a potential attack.<\/p>\n\n\n\n<p>To solve the issue I asked the AI the following:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Don't use localStorage to store the token, it's a security issue<\/code><\/pre>\n\n\n\n<p>Using GPT5-min, it only does the work:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"569\" src=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/GPT5-mini-1024x569.png\" alt=\"\" class=\"wp-image-42017\" srcset=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/GPT5-mini-1024x569.png 1024w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/GPT5-mini-300x167.png 300w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/GPT5-mini-768x427.png 768w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/GPT5-mini-1536x853.png 1536w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/GPT5-mini-2048x1138.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>With Claude Haiku 4.5, we have a short notice:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"569\" src=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Claude-1024x569.png\" alt=\"\" class=\"wp-image-42018\" srcset=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Claude-1024x569.png 1024w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Claude-300x167.png 300w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Claude-768x427.png 768w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Claude-1536x853.png 1536w, https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/Claude-2048x1137.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-why-does-this-happen\">Why does this happen?<\/h2>\n\n\n\n<p>I tried different AI models in GitHub Copilot, but, from GPT to Claude, the result was similar. Most AIs generate code with Axios and localStorage for this use, because they replicate the most common patterns found in their training data, not the most up-to-date or secure practices. <\/p>\n\n\n\n<p>Axios is overrepresented in tutorials because it offers a simple, opinionated HTTP abstraction that is easier for an AI to reason about than the lower-level <code>fetch<\/code> API. <\/p>\n\n\n\n<p>The storage of JWT in localStorage is still widely shown online as it reflects old frontend authentication practices that prioritized simplicity over security. It keeps the token easily accessible to JavaScript and avoids the processing of cookies and refresh token rotation. Although largely discouraged today, these examples remain overrepresented in the tutorials and training data used by AI models.<\/p>\n\n\n\n<p>In short, AI prioritizes widely recognized patterns and simplicity of implementation over minimalism and real-world security considerations.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2>\n\n\n\n<p>Although AI is an incredible tool that helps us in our development work, it is important to understand the limits of this tool. With AI, the new role of developers is to imagine the code architecture, ask AI, evaluate the result and review the code. As its name indicates very well, &#8220;Copilot&#8221; is your <strong><em>co<\/em><\/strong>-pilot, you must remain the pilot.<\/p>\n\n\n\n<p>AI can write code, but it does not understand the consequences of architectural decisions.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In my previous article I generated a Rest NestJS API using AI. Today, I will create a small UI to authenticate users via the API. I will use this simple case to show the limits of coding with AI and what you need to be attentive to. I will create my interface with Vue 3 [&hellip;]<\/p>\n","protected":false},"author":72,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[368,3029],"tags":[3576,3030,3753,3751],"type_dbi":[],"class_list":["post-42009","post","type-post","status-publish","format-standard","hentry","category-development-performance","category-web","tag-ai-agent","tag-development","tag-nestjs","tag-vue3"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.2 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>AI Isn\u2019t Your Architect: Real-World Issues in a Vue project - dbi Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AI Isn\u2019t Your Architect: Real-World Issues in a Vue project\" \/>\n<meta property=\"og:description\" content=\"In my previous article I generated a Rest NestJS API using AI. Today, I will create a small UI to authenticate users via the API. I will use this simple case to show the limits of coding with AI and what you need to be attentive to. I will create my interface with Vue 3 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/\" \/>\n<meta property=\"og:site_name\" content=\"dbi Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-15T12:37:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-15T12:37:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/AI_add_axios-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1408\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Nicolas Meunier\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nicolas Meunier\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/\"},\"author\":{\"name\":\"Nicolas Meunier\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/2e08c09a2f083004587b54128684fefe\"},\"headline\":\"AI Isn\u2019t Your Architect: Real-World Issues in a Vue project\",\"datePublished\":\"2025-12-15T12:37:57+00:00\",\"dateModified\":\"2025-12-15T12:37:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/\"},\"wordCount\":675,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/AI_add_axios-1024x563.png\",\"keywords\":[\"AI Agent\",\"development\",\"NestJS\",\"Vue3\"],\"articleSection\":[\"Development &amp; Performance\",\"Web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/\",\"url\":\"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/\",\"name\":\"AI Isn\u2019t Your Architect: Real-World Issues in a Vue project - dbi Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/AI_add_axios-1024x563.png\",\"datePublished\":\"2025-12-15T12:37:57+00:00\",\"dateModified\":\"2025-12-15T12:37:59+00:00\",\"author\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/2e08c09a2f083004587b54128684fefe\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/#primaryimage\",\"url\":\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/AI_add_axios-scaled.png\",\"contentUrl\":\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/AI_add_axios-scaled.png\",\"width\":2560,\"height\":1408},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/www.dbi-services.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"AI Isn\u2019t Your Architect: Real-World Issues in a Vue project\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#website\",\"url\":\"https:\/\/www.dbi-services.com\/blog\/\",\"name\":\"dbi Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.dbi-services.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/2e08c09a2f083004587b54128684fefe\",\"name\":\"Nicolas Meunier\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/cc2139acc6c64bddf3827e2faaaa70f227faafc288457fc351a4a836813112a8?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cc2139acc6c64bddf3827e2faaaa70f227faafc288457fc351a4a836813112a8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cc2139acc6c64bddf3827e2faaaa70f227faafc288457fc351a4a836813112a8?s=96&d=mm&r=g\",\"caption\":\"Nicolas Meunier\"},\"description\":\"Nicolas Meunier has more than 20 years of experience in IT web technologies as well as in development. He is specialized in Cloud solutions such as CI\/CD. His expertise also includes Kubernetes, Docker, Jenkins-X and Azure Devops. Florence Porret (FP is IT Consultant in Cloud solutions. Prior to joining dbi services, Nicolas Meunier was developer and maintainer of a CI\/CD pipelines at CEGID in Paris. He also worked as Lead Developer at KPMG. Florence Porret (FP holds a superior technical diploma in IT development. His branch-related experience covers software and cloud platform architecture.\",\"url\":\"https:\/\/www.dbi-services.com\/blog\/author\/nicolasmeunier\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"AI Isn\u2019t Your Architect: Real-World Issues in a Vue project - dbi Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/","og_locale":"en_US","og_type":"article","og_title":"AI Isn\u2019t Your Architect: Real-World Issues in a Vue project","og_description":"In my previous article I generated a Rest NestJS API using AI. Today, I will create a small UI to authenticate users via the API. I will use this simple case to show the limits of coding with AI and what you need to be attentive to. I will create my interface with Vue 3 [&hellip;]","og_url":"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/","og_site_name":"dbi Blog","article_published_time":"2025-12-15T12:37:57+00:00","article_modified_time":"2025-12-15T12:37:59+00:00","og_image":[{"width":2560,"height":1408,"url":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/AI_add_axios-scaled.png","type":"image\/png"}],"author":"Nicolas Meunier","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Nicolas Meunier","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/#article","isPartOf":{"@id":"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/"},"author":{"name":"Nicolas Meunier","@id":"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/2e08c09a2f083004587b54128684fefe"},"headline":"AI Isn\u2019t Your Architect: Real-World Issues in a Vue project","datePublished":"2025-12-15T12:37:57+00:00","dateModified":"2025-12-15T12:37:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/"},"wordCount":675,"commentCount":0,"image":{"@id":"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/AI_add_axios-1024x563.png","keywords":["AI Agent","development","NestJS","Vue3"],"articleSection":["Development &amp; Performance","Web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/","url":"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/","name":"AI Isn\u2019t Your Architect: Real-World Issues in a Vue project - dbi Blog","isPartOf":{"@id":"https:\/\/www.dbi-services.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/#primaryimage"},"image":{"@id":"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/#primaryimage"},"thumbnailUrl":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/AI_add_axios-1024x563.png","datePublished":"2025-12-15T12:37:57+00:00","dateModified":"2025-12-15T12:37:59+00:00","author":{"@id":"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/2e08c09a2f083004587b54128684fefe"},"breadcrumb":{"@id":"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/#primaryimage","url":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/AI_add_axios-scaled.png","contentUrl":"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2025\/12\/AI_add_axios-scaled.png","width":2560,"height":1408},{"@type":"BreadcrumbList","@id":"https:\/\/www.dbi-services.com\/blog\/ai-isnt-your-architect-real-world-issues-in-a-vue-project\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.dbi-services.com\/blog\/"},{"@type":"ListItem","position":2,"name":"AI Isn\u2019t Your Architect: Real-World Issues in a Vue project"}]},{"@type":"WebSite","@id":"https:\/\/www.dbi-services.com\/blog\/#website","url":"https:\/\/www.dbi-services.com\/blog\/","name":"dbi Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.dbi-services.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.dbi-services.com\/blog\/#\/schema\/person\/2e08c09a2f083004587b54128684fefe","name":"Nicolas Meunier","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cc2139acc6c64bddf3827e2faaaa70f227faafc288457fc351a4a836813112a8?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cc2139acc6c64bddf3827e2faaaa70f227faafc288457fc351a4a836813112a8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cc2139acc6c64bddf3827e2faaaa70f227faafc288457fc351a4a836813112a8?s=96&d=mm&r=g","caption":"Nicolas Meunier"},"description":"Nicolas Meunier has more than 20 years of experience in IT web technologies as well as in development. He is specialized in Cloud solutions such as CI\/CD. His expertise also includes Kubernetes, Docker, Jenkins-X and Azure Devops. Florence Porret (FP is IT Consultant in Cloud solutions. Prior to joining dbi services, Nicolas Meunier was developer and maintainer of a CI\/CD pipelines at CEGID in Paris. He also worked as Lead Developer at KPMG. Florence Porret (FP holds a superior technical diploma in IT development. His branch-related experience covers software and cloud platform architecture.","url":"https:\/\/www.dbi-services.com\/blog\/author\/nicolasmeunier\/"}]}},"_links":{"self":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts\/42009","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/users\/72"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/comments?post=42009"}],"version-history":[{"count":7,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts\/42009\/revisions"}],"predecessor-version":[{"id":42066,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/posts\/42009\/revisions\/42066"}],"wp:attachment":[{"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/media?parent=42009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/categories?post=42009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/tags?post=42009"},{"taxonomy":"type","embeddable":true,"href":"https:\/\/www.dbi-services.com\/blog\/wp-json\/wp\/v2\/type_dbi?post=42009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}