How 'npm create vue@latest' works

Introduction

I don't think I'm the only interested in the functionality of this command as presented in the Vue quickstart documentation

npm create vue@latest

Once we execute this command, we encounter some 'magic' where we select preferences for our future Vue app. But how exactly does it work?

npm create

This command works very simply. Everyone is used to working with the npm init command, so let's look at these logs

Both of them are the same. npm create just an alias for npm init. Let's just replace create with init and we'll get

@latest is simply a pointer to the latest version of an npm package. You can try it with any package you desire

Since we now know this, we can read the documentation about npm init . Run npm help init in your terminal

As we see here, we can also use npx instead of npm init but with create- prefix:

npm init <package-spec> (same as `npx <package-spec>`)
npm init <@scope> (same as `npx <@scope>/create`)

Let's try npx for our case. And then we see

Let's return to npm init documentation

The npx and npm exec commands are very similar, but there's one difference, which you can read about here. We don't need to understand this to use create-vue

Now I'll call all the known commands and demonstrate that they all produce the same result. When we use npm create vue@latest, it's essentially the same as npm init create-vue@latest - just an alias

Now, I hope you understand the npm create functionality. Then let's get to the next point

bin

Here you can see our test project

Let's install prettier for example

npm i -D prettier

Now if you open the node_modules directory you'll notice a .bin directory and a symbolic link called prettier. What is it for? You can execute your installed executable packages from .bin repository using npm scripts and commands like npx

For example let's run npx prettier . --check

It works!

Let's open node_modules/.bin/prettier and look at the code

But what is a symbolic link exactly? It comes from programming and I often liken symbolic links to basic redirects but with greater stability. However, not every package needs a place in .bin. Packages like nodemon, webpack, gulp, eslint and create-vue are found in .bin because they need to be executed. On the other hand, packages like animate.css, swiper and express operate at the application layer, so you won't find them in .bin after installation. How does npm determine whether a package is executable or not? It's simple: by using the bin property in your package.json to specify the executable path. If your package is executable, you can set it accordingly. Let's take a look at prettier's package.json file

Here you see

"bin": "./bin/prettier.cjs"

Let's follow the path ./bin/prettier.cjs in the prettier package. Do not confuse this path with node_modules/.bin

We've seen this somewhere before, haven't we? Open .bin/prettier in the root of node_modules and you'll see the same code.

Prettier has

"bin": "./bin/prettier.cjs"

So npm creates bin repository and insert a symbolic link there that refers to the Prettier package's file inside bin/prettier.cjs. And now you understand how symbolic links work in practice :)

If you remove the .bin directory from node_modules and try to run npx prettier . It'll throw an error sh: 1: prettier: not found, regardless of whether you have the prettier package installed

create-vue

Let's remove Prettier with npm rm prettier and install npm i -D create-vue now. Inside the .bin directory, we can see the symbolic link for create-vue

Let's move to package.json in node_modules/create-vue

We see create-vue bin key that runs outfile.cjs.

"bin": {
   "create-vue": "outfile.cjs"
},

If we open it, we'll notice the same code as in node_modules/.bin/create-vue (symbolic link)

Does that mean we can simply execute create-vue from the terminal? Exactly. Just like we can execute outfile.cjs. Let's try it

While using npm init or its alias npm create provided with the package, npm executes the binary file (bin) with the name of this package during initialization

Conclusion

I'd like to point out another potential source of confusion. Vue docs provide a link only to the create-vue GitHub repository. However, if you visit that repository, you won't find an outfile.js or any direct similarity with the create-vue package we just explored. This is because GitHub primarily stores open-source code for contribution and development purposes. In contrast, npm stores the actual bundled package code that you install. So, it's important not to confuse the GitHub repository with the package as installed via npm

Now I hope I've helped you, and you can now understand and explore similar packages such as create-react-app or create svelte@latest using this guide