{"id":7144,"date":"2026-03-25T09:16:08","date_gmt":"2026-03-25T00:16:08","guid":{"rendered":"https:\/\/dandelions.co.jp\/blog\/?p=7144"},"modified":"2026-03-25T09:16:08","modified_gmt":"2026-03-25T00:16:08","slug":"internal-study-session-report-hands-on-experience-setting-up-a-vue-3-development-environment-with-cursor","status":"publish","type":"post","link":"http:\/\/dandelions.co.jp\/blog\/blog\/2026\/03\/25\/internal-study-session-report-hands-on-experience-setting-up-a-vue-3-development-environment-with-cursor\/","title":{"rendered":"Internal Study Session Report: Hands-On Experience Setting Up a Vue 3 Development Environment with Cursor"},"content":{"rendered":"\n<p>We recently held an in-house workshop titled \u201cHands-On Experience: Setting Up a Vue 3 Development Environment with Cursor.\u201d Here\u2019s a look at how it went.<\/p>\n\n\n\n<p>The purpose of this study session was to provide hands-on experience in setting up a Vue 3 development environment using the AI editor \u201cCursor.\u201d<br>We were pleased to see a large turnout, including many non-engineers as well as engineers, making for a very lively event.<\/p>\n\n\n\n<p>Note that we are setting up the environment based on a <a href=\"https:\/\/dandelions.co.jp\/blog\/blog\/2026\/01\/21\/setting-up-a-vue-3-development-environment-on-windows-using-cursor\/\" target=\"_blank\" rel=\"noreferrer noopener\">technical blog<\/a>.<\/p>\n\n\n\n<h2>Study Session Agenda<\/h2>\n\n\n\n<ul><li>An Overview of Vue 3<\/li><li>Setting Up the Development Environment<\/li><li>Creating a Vue 3 Project<\/li><li>Startup Demo<\/li><\/ul>\n\n\n\n<h2>\u2460 Overview of Vue 3<\/h2>\n\n\n\n<p>First, I explained the position of Vue 3.<\/p>\n\n\n\n<p>Vue is a framework specialized for the \u201cV\u201d (View) component of the MVC model, and its primary role is to control the display of screens and the behavior in response to user interactions.<\/p>\n\n\n\n<ul><li>Vue: Display, Interact, Switch<\/li><li>Server-side: Protect, Decide, Remember<\/li><\/ul>\n\n\n\n<p>I explained the distinction between front-end and back-end roles using this comparison.<br>By emphasizing that \u201cVue is strictly responsible for the user interface,\u201d the content became easier for beginners to understand.<\/p>\n\n\n\n<h2>\u2461 Setting up the development environment<\/h2>\n\n\n\n<p>Next, I explained the overall picture of the tools required for development.<\/p>\n\n\n\n<ul><li>Node.js: A platform for running JavaScript<\/li><li>Vue 3 + Vue Router: How Screens Are Built<\/li><li>Cursor: A development editor with AI capabilities<\/li><\/ul>\n\n\n\n<p>After that, we actually carried out the following installation procedures.<\/p>\n\n\n\n<ul><li>Installing Node.js<\/li><li>Installing Cursor<\/li><li>Installing Recommended Plugins for Cursor<\/li><\/ul>\n\n\n\n<p>There were many instances where participants supported one another, making it a practical learning experience.<\/p>\n\n\n\n<h2>\u2462 Creating a Vue 3 Project<\/h2>\n\n\n\n<p>Once the environment is set up, use the following command to create a Vue 3 project.<\/p>\n\n\n\n<p>npm create vue@latest<\/p>\n\n\n\n<p>During this step, some participants encountered an issue where the npm command was not recognized.<br>When errors occurred, the team members supported one another, and we were able to successfully complete the project.<\/p>\n\n\n\n<h2>\u2463 Startup Demo<\/h2>\n\n\n\n<p>Finally, I started the development server using the following command and verified the screen display.<\/p>\n\n\n\n<p>npm run dev<\/p>\n\n\n\n<p>The local server has started up, and I have confirmed that the Vue welcome screen is displaying correctly in the browser.<\/p>\n\n\n\n<p>For those with extra time, we also had them try implementing Element Plus, a UI library.<br>By combining Vue with UI components, I believe they were able to get a sense of what screen development is like.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"450\" src=\"http:\/\/dandelions.co.jp\/blog\/wp\/wp-content\/uploads\/2026\/03\/cursor_study-2.png\" alt=\"\" class=\"wp-image-7084\" srcset=\"http:\/\/dandelions.co.jp\/blog\/wp\/wp-content\/uploads\/2026\/03\/cursor_study-2.png 800w, http:\/\/dandelions.co.jp\/blog\/wp\/wp-content\/uploads\/2026\/03\/cursor_study-2-300x169.png 300w, http:\/\/dandelions.co.jp\/blog\/wp\/wp-content\/uploads\/2026\/03\/cursor_study-2-768x432.png 768w\" sizes=\"(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<p>In this study session,<\/p>\n\n\n\n<ul><li>Understanding the Role of Vue 3<\/li><li>Setting Up a Development Environment Using Cursor<\/li><li>Creating and Running a Vue Project<\/li><\/ul>\n\n\n\n<p>We have completed all of the above steps.<\/p>\n\n\n\n<p>We plan to continue hosting development workshops focused on Cursor.<br>Stay tuned for our next article!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We recently held an in-house workshop titled \u201cHands-On Experience: Setting Up a Vue 3 Development Environment  &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/dandelions.co.jp\/blog\/blog\/2026\/03\/25\/internal-study-session-report-hands-on-experience-setting-up-a-vue-3-development-environment-with-cursor\/\" class=\"more-link\"><span class=\"screen-reader-text\">&#8220;Internal Study Session Report: Hands-On Experience Setting Up a Vue 3 Development Environment with Cursor&#8221; \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[49,15],"tags":[50,18],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paR9rw-1Re","_links":{"self":[{"href":"http:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/posts\/7144"}],"collection":[{"href":"http:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/comments?post=7144"}],"version-history":[{"count":1,"href":"http:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/posts\/7144\/revisions"}],"predecessor-version":[{"id":7145,"href":"http:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/posts\/7144\/revisions\/7145"}],"wp:attachment":[{"href":"http:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/media?parent=7144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/categories?post=7144"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/dandelions.co.jp\/blog\/wp-json\/wp\/v2\/tags?post=7144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}