{"id":3703,"date":"2023-08-22T15:18:04","date_gmt":"2023-08-22T13:18:04","guid":{"rendered":"https:\/\/rock-the-prototype.com\/?p=3703"},"modified":"2023-08-25T17:11:19","modified_gmt":"2023-08-25T15:11:19","slug":"webapp-prototyping-with-nuxt-js-vue-js","status":"publish","type":"post","link":"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/","title":{"rendered":"WebApp Prototyping with Nuxt.js &amp; Vue.js"},"content":{"rendered":"<p><\/p><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\"><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1144px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-1\"><p>In this article, we dive deep into the world of WebApp <a href=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/prototyping\/\" target=\"_blank\" title=\"What is prototyping? Prototyping is both a process and a strategy for realizing ideas as quickly as possible.\" class=\"encyclopedia\">prototyping<\/a> and reveal the crucial steps to implement our MVP &ldquo;<a href=\"https:\/\/rock-the-prototype.com\/en\/programming-languages-frameworks\/nuxt\/\" target=\"_blank\" title=\"Nuxt.js is a framework for building Vue.js applications. Nuxt.js is a web-app-framework for building Vue.js applications. The Nuxt framework helps software developers take advantage of a modern web app concept with the features built into it.\" class=\"encyclopedia\">Nuxt<\/a> the Prototype&rdquo;. &#127760;&#128161;<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhaltsverzeichnis<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#From_WebApp_Design_to_Programming_Implementation_to_Deployment_of_the_Web-App\" >From WebApp Design to Programming &amp; Implementation to Deployment of the Web-App<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#Rock_the_Prototype_Community_on_Discord\" >Rock the Prototype Community on Discord<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#Click_here_for_the_latest_podcast_episode\" >Click here for the latest podcast episode:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#How_to_develop_an_innovative_web_app_with_the_Nuxt_Framework\" >How to develop an innovative web app with the Nuxt Framework<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#Project_setup_and_Nuxt-Project-Boilerplate\" >Project setup and Nuxt-Project-Boilerplate<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#Use_a_GitHub_repository_to_version_the_WebApp\" >Use a GitHub repository to version the WebApp<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#Prototype_a_WebApp_with_Nuxt\" >Prototype a WebApp with Nuxt:<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#Phase_1_Preparation\" >Phase 1: Preparation<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#Step_11_%E2%80%93_Actual_state_description\" >Step 1.1 &#8211; Actual state description<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#Step_12_%E2%80%93Groud_planning\" >Step 1.2 &#8211;Groud planning<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#Step_13_-Define_goals\" >Step 1.3 -Define goals<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#Our_goals_for_the_first_iteration_are\" >Our goals for the first iteration are:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#Phase_2_Specification\" >Phase 2: Specification<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#21_Prototype_Specify_MVP\" >2.1 Prototype = Specify MVP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#22_Effort_estimation\" >2.2 Effort estimation<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#Project_management_time_planning_in_Jira\" >Project management + time planning in Jira<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#Phase_3_Implement_WebApp_Prototype\" >Phase 3: Implement WebApp Prototype<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"From_WebApp_Design_to_Programming_Implementation_to_Deployment_of_the_Web-App\"><\/span>From WebApp Design to Programming &amp; Implementation to Deployment of the Web-App<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>From the design phase to <a href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/programming\/\" target=\"_blank\" title=\"What is programming? When programming, a programmer creates a software program that can run on a machine. The code is created in one of the formally defined computer languages - which are countless, such as Java, PHP, C++ or C#, Perl and many many more.\" class=\"encyclopedia\">programming<\/a> and deployment, we&rsquo;ll take you on an exciting journey as we bring our prototype to life and get first glimpses of our innovative WebApp. &#128640;&#128187;<\/p>\n<p>We&rsquo;ll offer you valuable input on topics like:<\/p>\n<p>&#9989; Important architecture decisions and technology choices.<\/p>\n<p>&#9989; Successfully designing agile software development in practice<\/p>\n<p>&#9989; Interoperability as a decisive criterion in technology selection<\/p>\n<p>&#9989; Insights into the development of our MVP with the Nuxt <a href=\"https:\/\/rock-the-prototype.com\/en\/programming-languages-frameworks\/framework\/\" target=\"_blank\" title=\"A framework is a set of guidelines or rules that provides a structure for the organization and development of code in a particular programming language or platform. The framework serves as a basis or blueprint on which to build when developing software applications.\" class=\"encyclopedia\">Framework<\/a><\/p>\n<p>&#9989; Feature boxing as agile time management<\/p>\n<p>&#9989; Effective use of Jira and Confluence as collaboration tools<\/p>\n<p>&#9989; Transparency and accessibility of knowledge<\/p>\n<p>&#9989; Establishing a healthy error culture in an organization<\/p>\n<p>Learn how we use the Nuxt project boilerplate to build and design our WebApp prototype. We&rsquo;ll show you in an easy-to-understand, step-by-step manner how we realize our MVP and create an agile development process.<\/p>\n\n<h3><span class=\"ez-toc-section\" id=\"Rock_the_Prototype_Community_on_Discord\"><\/span><strong>Rock the Prototype Community<\/strong> on <strong>Discord<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>We look forward to welcoming you to our <a href=\"https:\/\/bit.ly\/46CUolJ\" target=\"_blank\" rel=\"noopener\"><strong>Rock the Prototype Community<\/strong><\/a> on <a href=\"https:\/\/bit.ly\/46CUolJ\" target=\"_blank\" rel=\"noopener\"><strong>Discord<\/strong><\/a>, where you can share your ideas and questions with us. Your participation is important to us, because we want to work together on our &ldquo;Nuxt the Prototype&rdquo; and develop a great WebApp! &#128170;&#128188;<\/p>\n<p>Don&rsquo;t miss our latest Rock the Prototype podcast episode and learn how to make your WebApp magic with the Nuxt Framework! &#127775;&#128640;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Click_here_for_the_latest_podcast_episode\"><\/span>Click here for the latest podcast episode:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p class=\"p1\"><strong>Apple&nbsp;Podcasts:<\/strong> <a href=\"https:\/\/apple.co\/47KjfVj\" target=\"_blank\" rel=\"noopener\">https:\/\/apple.co\/47KjfVj<\/a><\/p>\n<p class=\"p1\"><strong>Spotify Podcast:<\/strong> <a href=\"https:\/\/spoti.fi\/3Ece7vF\" target=\"_blank\" rel=\"noopener\">https:\/\/spoti.fi\/3Ece7vF<\/a><\/p>\n<p>Stay tuned for more exciting developments in our project and thank you for being part of our community! &#128588; &#127881;<\/p>\n<\/div><a class=\"fusion-modal-text-link\" data-toggle=\"modal\" data-target=\".fusion-modal.Rock the Prototype Podcast Folge 6 - WebApp Prototyping mit Nuxt.js &amp; Vue.js\" href=\"#\"><script class=\"podigee-podcast-player\" src=\"https:\/\/player.podigee-cdn.net\/podcast-player\/javascripts\/podigee-podcast-player.js\" data-configuration=\"https:\/\/rock-the-prototype.podigee.io\/7-new-episode\/embed?context=external\"><\/script><\/a><div class=\"fusion-text fusion-text-2\"><p>In the last episode, we took an in-depth look at the technology choice for our WebApp. In the process, we highlighted the pros and cons of React with Next.js and <a href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/vue-js\/\" target=\"_blank\" title=\"Vue.js is a web framework created by software developer Evan You for fast and robust web apps.\" class=\"encyclopedia\">Vue.js<\/a> with Nuxt. It became clear that both technologies have strong arguments in their favor, but that data protection and the avoidance of vendor lock-in can also be decisive factors.<\/p>\n<p>Today we focus on the practical implementation of our MVP &ldquo;Nuxt the Prototype&rdquo;. How do we start our prototyping and how do we make the development process agile and successful? These are the questions to which we will provide answers in this episode.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_develop_an_innovative_web_app_with_the_Nuxt_Framework\"><\/span>How to develop an innovative web app with the Nuxt Framework<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Our goal is to develop an <strong>innovative <a href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/web-app\/\" target=\"_blank\" title=\"What is a web app? A web app is an interactive web application. The interactivity of a web application is one of the most important features that users expect from websites.\" class=\"encyclopedia\">web app<\/a><\/strong> that meets your needs and desires. That&rsquo;s why we always offer you a clear insight into our joint project.<\/p>\n<p>It is important to me to <strong>involve you transparently in the web development<\/strong>, so that you as listeners have the unique chance to actively participate in the development process.<\/p>\n<p><strong>Your ideas, questions and suggestions are welcome!<\/strong><\/p>\n<p>Of course, you are also welcome to join us passively from the second row. Want to <a href=\"https:\/\/rock-the-prototype.com\/programmieren-lernen\/programmieren-lernen-in-5-schritten\/\" target=\"_blank\" rel=\"noopener\"><strong>learn to code<\/strong><\/a>, learn more about <a href=\"https:\/\/rock-the-prototype.com\/software-architektur\/design-pattern\/\" target=\"_blank\" rel=\"noopener\"><strong>software patterns<\/strong><\/a>, or learn more about UX of WebApps? But if you really want to learn something, you have to move to the front row and be allowed to participate directly.<\/p>\n<p>Take this unique chance and <strong>connect with us now<\/strong> directly via our <a href=\"https:\/\/bit.ly\/46CUolJ\" target=\"_blank\" rel=\"noopener\">Discord server.<\/a><\/p>\n<p>In today&rsquo;s episode, we take you step by step through the process of implementing our <strong>MVPs &ldquo;Nuxt the Prototype&rdquo;.<\/strong> We want to show you what <strong>agile prototyping looks like in practice<\/strong> and how we go about it.<\/p>\n<p>It starts with a clear look at the current state and rough planning. These steps are critical to setting our goals for the first iteration. This is not just about technical implementation, but also about having a clear vision for our project.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Project_setup_and_Nuxt-Project-Boilerplate\"><\/span>Project setup and Nuxt-Project-Boilerplate<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The <strong> first step<\/strong> is the p<strong>roject setup<\/strong> and the <strong>usage of the Nuxt-Project-Boilerplate<\/strong>. In the process, we create a project folder and initialize a Git repository. With the command &ldquo;npx nuxi@latest init NuxtThePrototype&rdquo; we use the Nuxt project boilerplate to build the basic structure of our WebApp. This already sets up many basic files and configurations, saving us time and effort.<\/p>\n<div id=\"attachment_3698\" style=\"width: 2570px\" class=\"wp-caption alignnone\"><img decoding=\"async\" aria-describedby=\"caption-attachment-3698\" class=\"size-full wp-image-3697\" src=\"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2023\/08\/WebApp-Nuxt-Boilerplate-Template-fuer-WebApps.png\" alt=\"WebApp Nuxt Boilerplate Template for WebApps\" width=\"2560\" height=\"1582\" srcset=\"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2023\/08\/WebApp-Nuxt-Boilerplate-Template-fuer-WebApps-200x124.png 200w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2023\/08\/WebApp-Nuxt-Boilerplate-Template-fuer-WebApps-300x185.png 300w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2023\/08\/WebApp-Nuxt-Boilerplate-Template-fuer-WebApps-400x247.png 400w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2023\/08\/WebApp-Nuxt-Boilerplate-Template-fuer-WebApps-600x371.png 600w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2023\/08\/WebApp-Nuxt-Boilerplate-Template-fuer-WebApps-768x475.png 768w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2023\/08\/WebApp-Nuxt-Boilerplate-Template-fuer-WebApps-800x494.png 800w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2023\/08\/WebApp-Nuxt-Boilerplate-Template-fuer-WebApps-1024x633.png 1024w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2023\/08\/WebApp-Nuxt-Boilerplate-Template-fuer-WebApps-1200x742.png 1200w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2023\/08\/WebApp-Nuxt-Boilerplate-Template-fuer-WebApps-1536x949.png 1536w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2023\/08\/WebApp-Nuxt-Boilerplate-Template-fuer-WebApps.png 2560w\" sizes=\"(max-width: 2560px) 100vw, 2560px\"><p id=\"caption-attachment-3698\" class=\"wp-caption-text\">WebApp Nuxt Boilerplate Template for WebApps<\/p><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Use_a_GitHub_repository_to_version_the_WebApp\"><\/span>Use a GitHub repository to version the WebApp<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Another important point is the integration of our project into a <a href=\"https:\/\/rock-the-prototype.com\/en\/software-development\/github\/\" target=\"_blank\" title=\"What is GitHub? GitHub is a cloud-based platform for versioning software based on Git versioning. GitHub online repositories are very popular and therefore widely used. GitHub is a version control system\" class=\"encyclopedia\">GitHub<\/a> repository. This allows us to have <strong>effective version management<\/strong> and <strong>collaborative development<\/strong>.<\/p>\n<p>After the project setup is complete, we move on to the actual implementation of our MVP. For this we use the functionalities of the Nuxt framework to design and program our WebApp.<\/p>\n<p>The important thing here is to keep our goals in mind for the first iteration. We want to ensure that our MVP is executable and suitable for further modification. To do this, we rely on agile methods such as feature boxing to make the development process structured and efficient.<\/p>\n<p>The implementation of the MVP also includes the use of <strong>Jira<\/strong> and <strong>Confluence<\/strong> as <strong>collaboration tools<\/strong>. These help us to organize the development process, manage tasks and make information transparently accessible.<\/p>\n<p>At the end of this phase, we are about to deploy our MVP. This involves getting our WebApp onto a server and making it available for use. For this, we use Nuxt&rsquo;s features, such as <strong>server-side rendering<\/strong> and <strong>code splitting<\/strong>, to ensure optimal performance and user experience.<\/p>\n<p>Our sixth podcast episode thus offers you a <strong>comprehensive insight<\/strong> into the <strong>practical process of prototyping<\/strong> and implementing an MVP. We&rsquo;ll take you on our journey as we develop &ldquo;Nuxt the Prototype&rdquo; and show you how to successfully <strong>prototype WebApps<\/strong> on your own.<\/p>\n<\/div><div class=\"fusion-video fusion-youtube\" style=\"--awb-max-width:800px;--awb-max-height:450px;--awb-align-self:center;--awb-width:100%;--awb-margin-bottom:30px;\"><div class=\"video-shortcode\"><priv-fac-lite-youtube class=\"fusion-hidden lty-load\" data-privacy-type=\"youtube\" videoid=\"kkHaqfB6Zoo\" params=\"wmode=transparent&amp;autoplay=1&amp;enablejsapi=1\" title=\"YouTube video player 1\" data-button-label=\"Play Video\" width=\"800\" height=\"450\" data-thumbnail-size=\"auto\" data-no-cookie=\"on\"><\/priv-fac-lite-youtube><div class=\"fusion-privacy-placeholder\" style=\"width:800px; height:450px;\" data-privacy-type=\"youtube\"><div class=\"fusion-privacy-placeholder-content\"><div class=\"fusion-privacy-label\">For privacy reasons YouTube needs your permission to be loaded. For more details, please see our <a class=\"privacy-policy-link\" href=\"https:\/\/rock-the-prototype.com\/datenschutzerklaerung\/\" rel=\"privacy-policy\">Datenschutzerkl&auml;rung<\/a>.<\/div><button data-privacy-type=\"youtube\" class=\"fusion-button button-default fusion-button-default-size button fusion-privacy-consent\">I Accept<\/button><\/div><\/div><\/div><\/div><div class=\"fusion-text fusion-text-3\"><h2><span class=\"ez-toc-section\" id=\"Prototype_a_WebApp_with_Nuxt\"><\/span>Prototype a WebApp with Nuxt:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p class=\"p1\">Our <strong>web app prototyping<\/strong> starts with the first phase, preparation.<\/p>\n<h3 class=\"p3\"><span class=\"ez-toc-section\" id=\"Phase_1_Preparation\"><\/span><b>Phase 1: Preparation<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p class=\"p1\">With phase 1 we make all the necessary preparations.<\/p>\n<h4 class=\"p4\"><b>Step 1.1 &ndash; Actual state description<\/b><\/h4>\n<p class=\"p1\">Our prototyping starts with a description of the current state. We looked in depth at WebApp technologies, evaluated technologies, and made our technology selection with Nuxt.<\/p>\n<h4 class=\"p4\"><b>Step 1.2 &ndash;<span class=\"Apple-converted-space\">Groud planning<\/span> <\/b><\/h4>\n<p class=\"p1\">This is followed by the second step in the first phase, the rough planning for our first iteration.<\/p>\n<p class=\"p1\">Our gob planning includes the project setup with setting up the Nuxt project boilerplate, a template for our WebApp.<\/p>\n<h4 class=\"p4\"><span class=\"ez-toc-section\" id=\"Step_13_-Define_goals\"><\/span><b><span class=\"Apple-converted-space\">Step 1.3 -Define goals<\/span><\/b><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p class=\"p1\">In the third step in Phase 1, we define the goals for our first prototype.<\/p>\n<p class=\"p1\">Based on our rough planning, we define the goals for our first iteration prototyping.<\/p>\n<p class=\"p1\">With our first iteration stage, we focus on setting up our development environment.<br>\nWe will use the Nuxt project boilerplate and use it to set up the basic structure for our WebApp.<\/p>\n<h3 class=\"p1\"><span class=\"ez-toc-section\" id=\"Our_goals_for_the_first_iteration_are\"><\/span>Our goals for the first iteration are:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul class=\"ul1\">\n<li class=\"li1\">We have set up our development environment<\/li>\n<li class=\"li1\">Project setup: Creation of a project folder and initialization of a Git repository.<\/li>\n<li class=\"li1\">the MVP uses the Nuxt boiler template<\/li>\n<li class=\"li1\">the MVP is executable<\/li>\n<li class=\"li1\">our MVP is suitable for further modification<\/li>\n<li class=\"li1\">we are familiar with the basic structure of the Nuxt framework<\/li>\n<li class=\"li1\">we use GitHub and have deployed our Nuxt the Prototype to the GitHub repository<\/li>\n<\/ul>\n<h3 class=\"p3\"><span class=\"ez-toc-section\" id=\"Phase_2_Specification\"><\/span><b>Phase 2: Specification<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p class=\"p1\">Now we need to specify our prototype as an MVP. For this purpose, we define software functions with a specified scope of services.<\/p>\n<h4 class=\"p4\"><span class=\"ez-toc-section\" id=\"21_Prototype_Specify_MVP\"><\/span><b>2.1 Prototype = Specify MVP<\/b><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p class=\"p1\">Phase 2 &ndash; Step 1 Specify MVP<\/p>\n<p class=\"p1\">For our Nuxt boilerplate-based MVP, this is still easy because its feature set is fully provided. This is especially convenient for us. This MVP is already executable without any code modification.<\/p>\n<p class=\"p1\">We will focus in this first iteration on getting familiar with the Nuxt architecture and getting our development environment and project management working smoothly.<\/p>\n<p class=\"p1\">Phase 2 &ndash; Step 2 the<\/p>\n<h4 class=\"p4\"><span class=\"ez-toc-section\" id=\"22_Effort_estimation\"><\/span><b>2.2 Effort estimation<\/b><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p class=\"p1\">We also perform effort estimation and define acceptance criteria during the specification phase. Based on this prototyping specification we define a target date to finish our iteration.<\/p>\n<p class=\"p1\">So we follow the strategy of feature boxing and do not use fixed time intervals, but only maximum time constraints.<\/p>\n<p class=\"p1\">Feature Driven defined requirements are always fine-granular and thus can be evaluated at any time with regard to the associated effort. Also, in feature boxing, we will organize our tasks into feature groups in a meaningful way, and thus deliver professionally meaningful units and features to our users with each new MVP <a href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/release\/\" target=\"_blank\" title=\"A release is a defined software version of an application. A software release is therefore a software version defined for users with a defined range of functions and maturity level. An initial software release generally represents the first generation of a new or improved software application.\" class=\"encyclopedia\">release<\/a>.<\/p>\n<p class=\"p1\">This means that there are never any cutbacks at the expense of the predefined functionality on our planned release dates. In addition, it is always possible to see exactly whether we are on schedule, have exceeded our schedule or are falling behind our schedule.<\/p>\n<p class=\"p1\">In feature boxing, we also commit to the fact that if features are more time-consuming to implement &ndash; other than planned &ndash; we will postpone our implementation date.<\/p>\n<p class=\"p1\">So Feature Boxing is agile time management driven by features.<\/p>\n<p class=\"p1\">I allowed myself one workday, or 8 man-hours, for our prototyping goals for the first iteration. In addition, I have made two Rock the Prototype video tutorials that accompany this podcast episode and explain to you at any time not only step by step what to do to initialize the Nuxt boilerplate, but also gives the technical background and context to it. The video creation is complex and cost me more hours of work. However, such video tutorials are very helpful in any project and serve as project documentation.<\/p>\n<h3 class=\"p1\"><span class=\"ez-toc-section\" id=\"Project_management_time_planning_in_Jira\"><\/span><b>Project management + time planning in Jira<\/b><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p class=\"p1\">Another part of our rough planning is the project management with the calculation of expenses.<\/p>\n<p class=\"p1\">Even if these small tasks are still easily manageable, it makes sense to define these tasks in an easily understandable and well-structured way as individual Jira tasks and to document them using the collaboration tool Confluence.<\/p>\n<p class=\"p1\">Why?<\/p>\n<p class=\"p1\">We then know at any time &ndash; even months later &ndash; exactly how we proceeded. But not only that. Via Jira, we can now directly start practicing effort estimation and make Jira Tasks easy to understand for others.<\/p>\n<p class=\"p1\">But there is another invaluable benefit.<\/p>\n<p class=\"p1\">In addition to a detailed effort estimate, we make it easier for other teams and virtually any stakeholder to understand our activities. Not only newcomers in our organization, but every team member can easily acquire knowledge independently at any time. Finally, it is important that knowledge is always transparent and easily accessible. Finally, it is important that knowledge is always transparent and easily accessible.<\/p>\n<p class=\"p1\">There is a third solid argument for this precise approach Errors &ndash; for example in configuration or assumptions, estimates, etc. &ndash; can be traced at any time through this transparent way of working. This promotes a healthy error culture in your organization!<\/p>\n<p class=\"p1\">Thus, the basic setup and use of these indispensable collaboration tools is already part of our first iteration stage.<\/p>\n<\/div><div class=\"fusion-video fusion-youtube\" style=\"--awb-max-width:800px;--awb-max-height:450px;--awb-align-self:center;--awb-width:100%;--awb-margin-bottom:30px;\"><div class=\"video-shortcode\"><priv-fac-lite-youtube class=\"fusion-hidden lty-load\" data-privacy-type=\"youtube\" videoid=\"IEnIpI5plKs\" params=\"wmode=transparent&amp;autoplay=1&amp;enablejsapi=1\" title=\"YouTube video player 2\" data-button-label=\"Play Video\" width=\"800\" height=\"450\" data-thumbnail-size=\"auto\" data-no-cookie=\"on\"><\/priv-fac-lite-youtube><div class=\"fusion-privacy-placeholder\" style=\"width:800px; height:450px;\" data-privacy-type=\"youtube\"><div class=\"fusion-privacy-placeholder-content\"><div class=\"fusion-privacy-label\">For privacy reasons YouTube needs your permission to be loaded. For more details, please see our <a class=\"privacy-policy-link\" href=\"https:\/\/rock-the-prototype.com\/datenschutzerklaerung\/\" rel=\"privacy-policy\">Datenschutzerkl&auml;rung<\/a>.<\/div><button data-privacy-type=\"youtube\" class=\"fusion-button button-default fusion-button-default-size button fusion-privacy-consent\">I Accept<\/button><\/div><\/div><\/div><\/div><div class=\"fusion-text fusion-text-4\"><h2 class=\"p1\"><span class=\"ez-toc-section\" id=\"Phase_3_Implement_WebApp_Prototype\"><\/span><b>Phase 3: Implement WebApp Prototype<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p class=\"p3\">We implement the MVP of our WebApp.<\/p>\n<p class=\"p3\">First, we create a project folder and initialize a Git repository for our local development environment This ensures that we version our project in a git-based way from the beginning.<\/p>\n<p class=\"p3\">This also includes making all the necessary preparations within our project so that based on the Nuxt framework, we complete the first MVP &ldquo;Nuxt the Prototype&rdquo; by the end of our first iteration stage. We also need to resolve all dependencies within the Nuxt framework and import appropriate libraries and put tools into operation in our development environment.<\/p>\n<p class=\"p3\">This includes appropriate package managers to organize these dependencies in terms of version levels and software libraries.<\/p>\n<p class=\"p3\">Then we use the NPM package executor, or npx for short. Use the handy npx tool to execute node packages and npm package binaries. NPX comes in handy as a tool whenever we want to execute commands included in a package without actually installing the package itself.<\/p>\n<p class=\"p3\">You can also follow this step by step by watching our YouTube tutorial.<\/p>\n<p class=\"p3\">With these implementation steps, the Nuxt project template saves us the time-consuming task of creating the basic structure of a Nuxt project and already provides a predefined folder structure, configurations, and basic files for our WebApp. With all these activities, we are already in the middle of our practical part. This is how our functional MVP is created via the Nuxt project boilerplate. This saves us a lot of time and effort in creating the basic structure of our Nuxt project.<\/p>\n<p class=\"p3\">Our deployment this time is limited to our GitHub remote repository. You can find the link in the show notes<\/p>\n<p class=\"p3\">The directories .nuxt and node_modules were not transferred to the public GitHub repo. Why?<\/p>\n<p class=\"p3\">There are good reasons:<\/p>\n<ul class=\"ul1\">\n<li class=\"li3\"><b>Unnecessary upload:<\/b> The &ldquo;node_modules&rdquo; directories contain all the external dependencies of our Nuxt the Prototype project, which we can restore at any time by running a command through our package manager npm. All dependencies are listed in package.<a href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/json\/\" target=\"_blank\" title=\"What is JSON? JSON, the JavaScript Object Notation, is a lightweight and flexible data format that is ideal for cross-platform data exchange. It is easy to read, easy to write and is supported by almost all modern programming languages. Thanks to its lean structure, JSON enables efficient data transfer and is indispensable for web applications and APIs.\" class=\"encyclopedia\">json<\/a>.. Therefore, it is unnecessary to store them in the repository and upload them. They would only unnecessarily bloat our repository and make uploading and cloning slower.<\/li>\n<li class=\"li3\"><b>Confidential Information<\/b>: Please always be careful not to provide any sensitive information such as credentials or tokens in a repository. Always be aware that data that is not intended for the public has no place in a repository.<\/li>\n<li class=\"li3\"><b>Consistency and repeatability:<\/b> By ignoring &ldquo;node_modules&rdquo; we can ensure that all developers in the project install the same dependencies. By doing this, we promote consistency and repeatability in our development environment.<\/li>\n<\/ul>\n<p class=\"p3\">Similarly, the &ldquo;.nuxt&rdquo; directory is generated by Nuxt.js. It contains temporary files and artifacts that don&rsquo;t need to be included in the repository, as they can be restored by running the build process in-place.<\/p>\n<p class=\"p3\">And by in-place, it means something like your local development environment or a deployment environment like staging or the production environment.<\/p>\n<p class=\"p3\">So the provided GitHub repo always contains everything you need to actively work on our project. All required dependencies can be restored with the command &ldquo;npm install&rdquo;. You can find the link to our GitHub repo in the show notes where you can also find the links to our YouTube tutorials.<\/p>\n<p class=\"p3\">With these practical tips and a solid understanding of the Nuxt framework, you&rsquo;ll be well prepared to join us in building our WebApp.<\/p>\n<p class=\"p3\">I hope you found today&rsquo;s article informative about developing a WebApp with the Nuxt Framework. Stay tuned, because in upcoming podcast episodes we will of course continue with the development of our WebApp.<\/p>\n<p class=\"p3\">Via our Discord server you have the possibility to contact us at any time, ask questions and get actively involved and contribute to the development.<\/p>\n<p class=\"p3\">You can find all information in the Shownotes and on our website at http:\/\/www.rock-the-prototype.com .<\/p>\n<p class=\"p3\">Whether you&rsquo;re a more experienced developer or just diving into the world of programming, Rock the Prototype is the place for you.<\/p>\n<p class=\"p3\">So, subscribe to our podcast now and let&rsquo;s rock software development &amp; prototyping together!<\/p>\n<p class=\"p3\">If you have any questions or need more information, don&rsquo;t hesitate to contact me.<\/p>\n<p class=\"p3\">Thanks for your interest and see you on the next episode of the Rock the Prototype Podcast!<\/p>\n<p class=\"p3\">Your Sascha Block<\/p>\n<\/div><a class=\"fusion-modal-text-link\" data-toggle=\"modal\" data-target=\".fusion-modal.Rock the Prototype Podcast Folge 6 - WebApp Prototyping mit Nuxt.js &amp; Vue.js\" href=\"#\"><script class=\"podigee-podcast-player\" src=\"https:\/\/player.podigee-cdn.net\/podcast-player\/javascripts\/podigee-podcast-player.js\" data-configuration=\"https:\/\/rock-the-prototype.podigee.io\/7-new-episode\/embed?context=external\"><\/script><\/a><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-2 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\"><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1144px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-1 fusion_builder_column_1_3 1_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:33.333333333333%;--awb-margin-top-large:0px;--awb-spacing-right-large:5.76%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:5.76%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-1 fusion-sep-none fusion-title-text fusion-title-size-two\" style=\"--awb-margin-top-small:30px;--awb-margin-right-small:0px;--awb-margin-bottom-small:20px;--awb-margin-left-small:0px;\"><h2 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;--fontSize:30;line-height:1.1;\">About the Author:<\/h2><\/div><div class=\"fusion-image-element\" style=\"--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-1 hover-type-none\"><img decoding=\"async\" width=\"1920\" height=\"1920\" title=\"Sascha Block &ndash; Rock the Prototype\" src=\"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2019\/09\/Sascha_Block.jpg\" alt class=\"img-responsive wp-image-3342\" srcset=\"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2019\/09\/Sascha_Block-200x200.jpg 200w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2019\/09\/Sascha_Block-400x400.jpg 400w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2019\/09\/Sascha_Block-600x600.jpg 600w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2019\/09\/Sascha_Block-800x800.jpg 800w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2019\/09\/Sascha_Block-1200x1200.jpg 1200w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2019\/09\/Sascha_Block.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, (max-width: 640px) 100vw, 400px\"><\/span><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-2 fusion_builder_column_2_3 2_3 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:66.666666666667%;--awb-margin-top-large:0px;--awb-spacing-right-large:2.88%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:2.88%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-2 fusion-sep-none fusion-title-text fusion-title-size-three\" style=\"--awb-margin-top-small:30px;--awb-margin-right-small:0px;--awb-margin-bottom-small:20px;--awb-margin-left-small:0px;\"><h3 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;--fontSize:26;line-height:1.2;\">Sascha Block<\/h3><\/div><div class=\"fusion-text fusion-text-5\"><p>I am <a href=\"https:\/\/www.linkedin.com\/in\/sascha-block-5785b9126\/\">Sascha Block<\/a> &ndash; IT architect in Hamburg and the initiator of Rock the Prototype. I want to make prototyping learnable and experiential. With the motivation to prototype ideas and share knowledge around software prototyping, software architecture and programming, I created the format and the open source initiative Rock the Prototype.<\/p>\n<\/div><div><a class=\"fusion-button button-flat fusion-button-default-size button-custom fusion-button-default button-1 fusion-button-default-span fusion-button-default-type\" style=\"--button_accent_color:#ffffff;--button_accent_hover_color:#00ffff;--button_border_hover_color:#4ab4ff;--button_gradient_top_color:var(--awb-color3);--button_gradient_bottom_color:var(--awb-color3);--button_gradient_top_color_hover:var(--awb-color2);--button_gradient_bottom_color_hover:var(--awb-color2);\" target=\"_self\" href=\"https:\/\/rock-the-prototype.com\/programmieren-lernen\/javascript-die-perfekte-programmiersprache-um-programmieren-zu-lernen\/\"><span class=\"fusion-button-text awb-button__text awb-button__text--default\">JavaScript the perfect programming language to learn programming<\/span><\/a><\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;width:100%;\"><\/div><ul style=\"--awb-size:18px;--awb-line-height:30.6px;--awb-icon-width:30.6px;--awb-icon-height:30.6px;--awb-icon-margin:12.6px;--awb-content-margin:43.2px;\" class=\"fusion-checklist fusion-checklist-1 fusion-checklist-default type-icons\"><li class=\"fusion-li-item\" style=\"\"><span class=\"icon-wrapper circle-no\"><i class=\"fusion-li-icon fa-link fas\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-li-item-content\">\n<p><a href=\"https:\/\/rock-the-prototype.com\/en\/\">rock-the-prototype.com<\/a><\/p>\n<\/div><\/li><\/ul><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this article, we dive deep into the world of WebApp prototyping and reveal the critical steps to implementing our MVP &#8220;Nuxt the Prototype&#8221;. &#x1f310;&#x1f4a1;<\/p>\n<p>From the design phase to &#x1f4bb; programming and deployment &#8211; we&#8217;ll take you on an exciting journey as we bring our prototype to life and get first glimpses of our innovative WebApp. &#x1f680;<\/p>\n","protected":false},"author":1,"featured_media":3689,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[1258,1167,1168,1141],"tags":[1171,1172,1144,1176,1169,1296,1189,1142,1146,1262,1291,1292],"class_list":["post-3703","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-learn-programming","category-programming-languages-frameworks","category-prototyping-en","category-software-development","tag-app-en","tag-apps-en","tag-design-pattern-en","tag-frameworks-en","tag-javascript-en","tag-mvp-en","tag-nuxt-en","tag-programming","tag-software-design-en","tag-web-apps-en","tag-webapp-en","tag-webapps-en"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>WebApp Prototyping with Nuxt.js &amp; Vue.js<\/title>\n<meta name=\"description\" content=\"Web App Prototyping with Nuxt \u2705 Code WebApp Prototype \u2705 Learn to code web apps now \u2705 JavaScript \u2705 Easy to understand \u2705\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WebApp Prototyping with Nuxt.js &amp; Vue.js\" \/>\n<meta property=\"og:description\" content=\"Web App Prototyping with Nuxt \u2705 Code WebApp Prototype \u2705 Learn to code web apps now \u2705 JavaScript \u2705 Easy to understand \u2705\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Rock the Prototype - Softwareentwicklung &amp; Prototyping\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-22T13:18:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-25T15:11:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2023\/08\/WebApp-Prototyping-with-Nuxt-1024x638.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"638\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Sascha Block\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@rocktheprototyp\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sascha Block\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/prototyping-en\\\/webapp-prototyping-with-nuxt-js-vue-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/prototyping-en\\\/webapp-prototyping-with-nuxt-js-vue-js\\\/\"},\"author\":{\"name\":\"Sascha Block\",\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/#\\\/schema\\\/person\\\/fdb2f98edec62327712c2d26d981c081\"},\"headline\":\"WebApp Prototyping with Nuxt.js &amp; Vue.js\",\"datePublished\":\"2023-08-22T13:18:04+00:00\",\"dateModified\":\"2023-08-25T15:11:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/prototyping-en\\\/webapp-prototyping-with-nuxt-js-vue-js\\\/\"},\"wordCount\":5282,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/prototyping-en\\\/webapp-prototyping-with-nuxt-js-vue-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rock-the-prototype.com\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/WebApp-Prototyping-with-Nuxt.png\",\"keywords\":[\"App\",\"Apps\",\"Design Pattern\",\"Frameworks\",\"JavaScript\",\"MVP\",\"Nuxt\",\"Programming\",\"Software Design\",\"Web Apps\",\"WebApp\",\"WebApps\"],\"articleSection\":[\"Learn programming\",\"Programming Languages &amp; Frameworks\",\"Prototyping\",\"Software development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/prototyping-en\\\/webapp-prototyping-with-nuxt-js-vue-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/prototyping-en\\\/webapp-prototyping-with-nuxt-js-vue-js\\\/\",\"url\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/prototyping-en\\\/webapp-prototyping-with-nuxt-js-vue-js\\\/\",\"name\":\"WebApp Prototyping with Nuxt.js &amp; Vue.js\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/prototyping-en\\\/webapp-prototyping-with-nuxt-js-vue-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/prototyping-en\\\/webapp-prototyping-with-nuxt-js-vue-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rock-the-prototype.com\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/WebApp-Prototyping-with-Nuxt.png\",\"datePublished\":\"2023-08-22T13:18:04+00:00\",\"dateModified\":\"2023-08-25T15:11:19+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/#\\\/schema\\\/person\\\/fdb2f98edec62327712c2d26d981c081\"},\"description\":\"Web App Prototyping with Nuxt \u2705 Code WebApp Prototype \u2705 Learn to code web apps now \u2705 JavaScript \u2705 Easy to understand \u2705\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/prototyping-en\\\/webapp-prototyping-with-nuxt-js-vue-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/prototyping-en\\\/webapp-prototyping-with-nuxt-js-vue-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/prototyping-en\\\/webapp-prototyping-with-nuxt-js-vue-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rock-the-prototype.com\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/WebApp-Prototyping-with-Nuxt.png\",\"contentUrl\":\"https:\\\/\\\/rock-the-prototype.com\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/WebApp-Prototyping-with-Nuxt.png\",\"width\":3422,\"height\":2132,\"caption\":\"WebApp Prototyping - WebApps mit Nuxt\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/prototyping-en\\\/webapp-prototyping-with-nuxt-js-vue-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/rock-the-prototype\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WebApp Prototyping with Nuxt.js &amp; Vue.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/\",\"name\":\"Rock the Prototype - Softwareentwicklung &amp; Prototyping\",\"description\":\"Prototyping: Software Prototypen, Software entwickeln &amp; Programmieren im Team\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/#\\\/schema\\\/person\\\/fdb2f98edec62327712c2d26d981c081\",\"name\":\"Sascha Block\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/967c419542686b085600443beafb2e55ad1ef6532a0ad9b96d244cb24fd8c117?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/967c419542686b085600443beafb2e55ad1ef6532a0ad9b96d244cb24fd8c117?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/967c419542686b085600443beafb2e55ad1ef6532a0ad9b96d244cb24fd8c117?s=96&d=mm&r=g\",\"caption\":\"Sascha Block\"},\"description\":\"Ich bin Sascha Block \u2013 IT-Architekt in Hamburg und der Initiator von Rock the Prototype. Ich m\u00f6chte Prototyping erlernbar und erfahrbar machen. Mit der Motivation Ideen prototypisch zu verwirklichen und Wissen rund um Software-Prototyping, Softwarearchitektur und Softwareentwicklung zu teilen, habe ich das Format und die Open-Source Initiative Rock the Prototype geschaffen.\",\"sameAs\":[\"https:\\\/\\\/rock-the-prototype.com\",\"https:\\\/\\\/www.instagram.com\\\/rock_the_prototype\\\/\",\"https:\\\/\\\/x.com\\\/rocktheprototyp\",\"https:\\\/\\\/www.youtube.com\\\/@Rock-the-Prototype\\\/\"],\"url\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/author\\\/administrator-2\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WebApp Prototyping with Nuxt.js &amp; Vue.js","description":"Web App Prototyping with Nuxt \u2705 Code WebApp Prototype \u2705 Learn to code web apps now \u2705 JavaScript \u2705 Easy to understand \u2705","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:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/","og_locale":"en_US","og_type":"article","og_title":"WebApp Prototyping with Nuxt.js &amp; Vue.js","og_description":"Web App Prototyping with Nuxt \u2705 Code WebApp Prototype \u2705 Learn to code web apps now \u2705 JavaScript \u2705 Easy to understand \u2705","og_url":"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/","og_site_name":"Rock the Prototype - Softwareentwicklung &amp; Prototyping","article_published_time":"2023-08-22T13:18:04+00:00","article_modified_time":"2023-08-25T15:11:19+00:00","og_image":[{"width":1024,"height":638,"url":"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2023\/08\/WebApp-Prototyping-with-Nuxt-1024x638.png","type":"image\/png"}],"author":"Sascha Block","twitter_card":"summary_large_image","twitter_creator":"@rocktheprototyp","twitter_misc":{"Written by":"Sascha Block","Est. reading time":"21 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#article","isPartOf":{"@id":"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/"},"author":{"name":"Sascha Block","@id":"https:\/\/rock-the-prototype.com\/en\/#\/schema\/person\/fdb2f98edec62327712c2d26d981c081"},"headline":"WebApp Prototyping with Nuxt.js &amp; Vue.js","datePublished":"2023-08-22T13:18:04+00:00","dateModified":"2023-08-25T15:11:19+00:00","mainEntityOfPage":{"@id":"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/"},"wordCount":5282,"commentCount":0,"image":{"@id":"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2023\/08\/WebApp-Prototyping-with-Nuxt.png","keywords":["App","Apps","Design Pattern","Frameworks","JavaScript","MVP","Nuxt","Programming","Software Design","Web Apps","WebApp","WebApps"],"articleSection":["Learn programming","Programming Languages &amp; Frameworks","Prototyping","Software development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/","url":"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/","name":"WebApp Prototyping with Nuxt.js &amp; Vue.js","isPartOf":{"@id":"https:\/\/rock-the-prototype.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#primaryimage"},"image":{"@id":"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2023\/08\/WebApp-Prototyping-with-Nuxt.png","datePublished":"2023-08-22T13:18:04+00:00","dateModified":"2023-08-25T15:11:19+00:00","author":{"@id":"https:\/\/rock-the-prototype.com\/en\/#\/schema\/person\/fdb2f98edec62327712c2d26d981c081"},"description":"Web App Prototyping with Nuxt \u2705 Code WebApp Prototype \u2705 Learn to code web apps now \u2705 JavaScript \u2705 Easy to understand \u2705","breadcrumb":{"@id":"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#primaryimage","url":"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2023\/08\/WebApp-Prototyping-with-Nuxt.png","contentUrl":"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2023\/08\/WebApp-Prototyping-with-Nuxt.png","width":3422,"height":2132,"caption":"WebApp Prototyping - WebApps mit Nuxt"},{"@type":"BreadcrumbList","@id":"https:\/\/rock-the-prototype.com\/en\/prototyping-en\/webapp-prototyping-with-nuxt-js-vue-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/rock-the-prototype.com\/en\/rock-the-prototype\/"},{"@type":"ListItem","position":2,"name":"WebApp Prototyping with Nuxt.js &amp; Vue.js"}]},{"@type":"WebSite","@id":"https:\/\/rock-the-prototype.com\/en\/#website","url":"https:\/\/rock-the-prototype.com\/en\/","name":"Rock the Prototype - Softwareentwicklung &amp; Prototyping","description":"Prototyping: Software Prototypen, Software entwickeln &amp; Programmieren im Team","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rock-the-prototype.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rock-the-prototype.com\/en\/#\/schema\/person\/fdb2f98edec62327712c2d26d981c081","name":"Sascha Block","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/967c419542686b085600443beafb2e55ad1ef6532a0ad9b96d244cb24fd8c117?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/967c419542686b085600443beafb2e55ad1ef6532a0ad9b96d244cb24fd8c117?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/967c419542686b085600443beafb2e55ad1ef6532a0ad9b96d244cb24fd8c117?s=96&d=mm&r=g","caption":"Sascha Block"},"description":"Ich bin Sascha Block \u2013 IT-Architekt in Hamburg und der Initiator von Rock the Prototype. Ich m\u00f6chte Prototyping erlernbar und erfahrbar machen. Mit der Motivation Ideen prototypisch zu verwirklichen und Wissen rund um Software-Prototyping, Softwarearchitektur und Softwareentwicklung zu teilen, habe ich das Format und die Open-Source Initiative Rock the Prototype geschaffen.","sameAs":["https:\/\/rock-the-prototype.com","https:\/\/www.instagram.com\/rock_the_prototype\/","https:\/\/x.com\/rocktheprototyp","https:\/\/www.youtube.com\/@Rock-the-Prototype\/"],"url":"https:\/\/rock-the-prototype.com\/en\/author\/administrator-2\/"}]}},"_links":{"self":[{"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/posts\/3703","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/comments?post=3703"}],"version-history":[{"count":9,"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/posts\/3703\/revisions"}],"predecessor-version":[{"id":3713,"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/posts\/3703\/revisions\/3713"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/media\/3689"}],"wp:attachment":[{"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/media?parent=3703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/categories?post=3703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/tags?post=3703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}