Creating a Vue 3 and TypeScript project using the Vue CLI

Vue logo

Vue 3 is here for a while now and you might be wanting to start working with it. For a lot of people, including me, it may seem a little daunting at first.

Luckily, it’s actually very easy to set up and with the newly created CLI it‘s now even more pleasing to use.

Vue CLI requirements

There are not a lot of requirements to get started (otherwise I shouldn’t have said it was easy).

  • Node.js version 8.9 or above (10 or higher recommended though)
  • Terminal

Installing Vue CLI

In order to get started, we’re going to need the new Vue CLI to be installed. As we’re going to install this globally, you will only have to perform this once.

In the terminal, run the following command:

npm install -g @vue/cli

If you run into a permission error while installing, then you may have to perform the install command with sudo in front of it. This will ask for your password.

This command will run for a few seconds and then everything should be in order automatically. After it’s completed, you can check your version by using the command:

vue --version
// Expected output should be something like @vue/cli 4.5.12

Expected output should be something like @vue/cli 4.5.12.

Creating a Vue 3 project using the CLI

Now for the interesting part; actually creating a Vue 3 project. To start the project creation script, use the following command:

vue create your-project-name

This may be a bit obvious, but you have to replace the your-project-name part with the project name you actually want.

The name you have chosen will also be the directory name of where the app will be and also the application’s name in the to be created package.json.

Picking a preset

The CLI will now ask you for a default preset. In this case we will use the option Manually select features which you can select by using the arrow keys and pressing Enter.

Vue CLI v4.5.12
? Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
❯ Manually select features

Selecting features

As is to be expected, we will have to select the features we actually want in our project. It will look like the following and I’ve selected the options I recommend for a website.

You can select the options using the arrow keys and select/deselect them using the spacebar.

Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Choose Vue version
◯ Babel
◉ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◯ Vuex
◉ CSS Pre-processors
❯◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing

If you’re planning on building something like a business application or app, testing is an important part of development and should be added. In that case, make sure you check the Unit Testing and E2E Testing features.

Once you’ve made your selection, press Enter to move on to the next step.

Selecting feature options

According to the features you’ve selected the CLI will ask you for additional settings.

It will ask each of the below questions one by one. You can either select an option with the arrow keys and pressing Enter or by choosing y or n, depending on the question.

Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, TS, Router, CSS Pre-proce
ssors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

It may ask you if you want to use yarn or npm as the package manager. If it does, select the npm option.

Actually creating the project

The CLI will now create the project, create the necessary configuration files and download all the required npm packages. This will take a short while after which it should show you the following:

🎉  Successfully created project your-project-name.
👉 Get started with the following commands:
$ cd your-project-name
$ npm run serve

Running the project

We’re nearly there! In the above terminal part, the steps to take are already described so let’s perform them.

First, go to the newly creating project directory by using the command:

cd your-project-name

After this only one command needs to be performed. This will start up a local development server using webpack and get you started. Once it is ready it will show you something like the following:

DONE  Compiled successfully in 2767ms                                           3:01:22 PMApp running at:
- Local: http://localhost:8080/
- Network: http://192.168.192.225:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
No issues found.

Go to the demo page

As described in the terminal information, you can go to http://localhost:8080 in your browser where you will see the Vue demo page with links to pages with information about the selected features.

The Vue 3 and TypeScript demo page
The Vue 3 and TypeScript demo page
Vue 3 and TypeScript demo page

Conclusion

That’s it! You’ve now successfully created a Vue 3 app using the Vue CLI. You can now start creating and editing the content that you want.

Happy coding!

https://michaelv.eu. Ex-Java developer turned Javascript / Typescript and Vue developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store