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.
Conclusion
That’s it! You’ve now successfully created a Vue 3 and TypeScript app using Vite. You can now start creating and editing the content that you want.
Happy coding!