{"id":1567,"date":"2026-08-19T21:59:26","date_gmt":"2026-08-19T21:59:26","guid":{"rendered":"https:\/\/www.projectimmerse.com\/blog\/?p=1567"},"modified":"2026-08-19T22:06:29","modified_gmt":"2026-08-19T22:06:29","slug":"getting-started-with-vue-3-from-npm-create-vue-to-understanding-script-setup","status":"publish","type":"post","link":"https:\/\/www.projectimmerse.com\/blog\/getting-started-with-vue-3-from-npm-create-vue-to-understanding-script-setup\/","title":{"rendered":"Getting Started with Vue 3: From npm create vue to Understanding script setup"},"content":{"rendered":"\n
\"Getting<\/a>
Getting started with Vue 3, from creating a new project to understanding script setup.<\/figcaption><\/figure>\n\n\n\n

If you’re brand new to Vue and just ran your first npm create vue@latest<\/code> command, congratulations \u2014 you’ve officially joined the club of developers staring at a terminal wondering what half the prompts mean. Don’t worry, that’s normal. Vue’s scaffolding tool asks a lot of questions for something that’s supposed to be “quick start.”<\/p>\n\n\n\n

In this post, we’ll walk through two things: how to actually get a new Vue project up and running, and what’s going on inside that mysterious <script setup><\/code> block once you open your first component file.<\/p>\n\n\n\n\n\n\n\n

Scaffolding a New Vue Project<\/h2>\n\n\n\n

Vue’s official scaffolding tool is called create-vue<\/code>, and you kick it off with:<\/p>\n\n\n

\nnpm create vue@latest\n<\/pre><\/div>\n\n\n
This tells npm: “go fetch the latest version of the Vue project generator and run it.” If you ever need a specific version instead of whatever is newest, just swap latest<\/code> for the version number:<\/p>\n\n\n
\nnpm create vue@3.17.0\n<\/pre><\/div>\n\n\n
Pinning a version like this is handy if you’re following a tutorial (like this one!) and want your setup to match exactly, rather than getting surprised by a newer version that changed the prompts on you.<\/p>\n\n\n\n
The Project Name Prompt<\/h3>\n\n\n\n
The first thing the tool asks is:<\/p>\n\n\n
\nProject name (target directory):\n<\/pre><\/div>\n\n\n
This is asking where to put your new project. If you type a name, it creates a new folder with that name. If you’re already sitting inside the folder you want to use, you can just type a single period (.<\/code>) to mean “right here.”<\/p>\n\n\n\n
If that folder already has files in it, you’ll get a follow-up question:<\/p>\n\n\n
\nCurrent directory is not empty. Remove existing files and continue?\n<\/pre><\/div>\n\n\n
Answering “Yes” wipes out whatever’s currently in that folder and starts fresh. Answer carefully here \u2014 this step is basically npm asking “are you sure?” before it deletes things, so don’t be the person who says yes without checking first.<\/p>\n\n\n\n
The Package Name Prompt (and Why It Rejects You)<\/h3>\n\n\n\n
Next up:<\/p>\n\n\n
\nPackage name:\n<\/pre><\/div>\n\n\n
This one trips up a lot of beginners, mostly because the error message it throws \u2014 Invalid package.json name<\/code> \u2014 doesn’t explain what actually went wrong. Here’s the deal: this value becomes the name<\/code> field inside your project’s package.json<\/code> file, and npm package names have some strict formatting rules. They’re picky in a way that feels oddly personal:<\/p>\n\n\n\n