Creating a Vue 3 and TypeScript project using Vite

Photo by Kurt Cotoaga on Unsplash

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.

npm init vite@latest
Need to install the following packages:
create-vite@latest
Ok to proceed? (y)
# 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
? 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
vite v2.7.1 dev server running at:> Local: http://localhost:3000/
> Network: use `--host` to expose
ready 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.

--

--

Ex-Java developer turned Javascript / Typescript and Vue developer at BTC Direct Europe B.V.

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
Michael Verschoof

Ex-Java developer turned Javascript / Typescript and Vue developer at BTC Direct Europe B.V.