Creating a Vue 3 and TypeScript project using Vite

If you’ve landed on this page, you’re probably been using Vue for a while or at least thinking about using it. But you’re probably more interesting in setting up a project in Vite in order to start coding.

I’ve been using Vite since the start of 2021 for several private and work-related projects and I’m loving it! The development server takes no time to start up (average is around 250 milliseconds) and for most projects the default configuration is exactly what you need. No more messing around with a bunch of plugins for “normal” projects!

Ready to start? It’s very easy!

Vite requirements

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

Node.js version 12 or above
Terminal

Creating a Vue 3 project

If you have Node installed (which is necessary) then you also have npm available in your terminal. So we can start immediately.

In the terminal, run the following command:

npm init vite@latest

After this there’s basically only a few questions that the terminal will ask you and when completed, your project is good to go! The different questions are described in the below chapters for more information :smile:

If you’re running this for the first time, you will see the following question in your terminal:

Need to install the following packages:
create-vite@latest
Ok to proceed? (y)

Just press y and enter and it will continue.

Note that you can skip the first two steps below if you want to use Vue immediately. Depending on your npm version (which you can check in a terminal by running npm -v), use one of the below commands. Don’t forget to replace the my-vue-app part with the project name you’ve chosen.

# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm init vite@latest my-vue-app -- --template vue

Picking a project name

The first step is to pick a project name. The terminal will display a placeholder called “vite-project” as can be seen in the below example, but it disappears once you start typing your chosen name.

? Project name: › vite-project

Selecting a framework

The next step is to select the framework. As this is a Vue and TypeScript story, we’ll choose Vue using the arrow keys and press enter.

? Select a framework: › - Use arrow-keys. Return to submit.
    vanilla
❯   vue
    react
    preact
    lit
    svelte

Next step is choosing the specific variant of Vue which is the TypeScript variant in this case.

? Select a variant: › - Use arrow-keys. Return to submit.
    vue
❯   vue-ts

Actually creating the project

When you’ve pressed enter in the previous step, the project will be created almost instantly and you’re basically ready to go! Just follow the steps as described in the terminal and you’ll even have your development server running!

Scaffolding project in /home/michael/Workspace/vue-projects/medium-examples-vite...Done. Now run:  cd medium-examples-vite
  npm install
  npm run dev

Running the project

After the previous step, the commands necessary to start the development server are already described. So by running the following three commands you’ll have your development server up and running.

cd medium-examples-vite
npm install
npm run dev

Once it’s done, you’ll see the following information:

vite v2.7.1 dev server running at:> Local: http://localhost:3000/
> Network: use `--host` to exposeready in 248ms.

Go to the demo page

As described in the terminal information, you can go to http://localhost:3000 in your browser where you will see the Vue demo page with links to the documentation and some demo components.