vue gotchas #1: creating a vue.js app using vite

https://unsplash.com/photos/hpjSkU2UYSU?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink

Nowadays there are many ways to create a web application. Today we will look at a tool named Vite which helps a lot in web application development majorly by its flexibility PLUS speed.

Why Vite?

In general, the official homepage of vite has mentioned the following:

• instant server start (speed up the development with responsive app / page reload feature)
• lightning fast HMR (hot module replacement — the heart of why it speeds up the development)
• support for various framework and resources. Out-of-the-box support for TypeScript, JSX, CSS, frameworks like vue, react and even vanilla JS and more
• optmized build — this is where the flexibility comes in when you need to customize the production build of your web app, many thanks to Rollup js.

In short vite is a tool to enhance our development experience and increase productivity.

installation of vite

The pre-requisite is that we would need to have node.js installed on our development machine (no matter it is a Windows or Mac or Linux workstation)

The next pre-requisite is we would need a node package manager, either npm or yarn.

Once the above are ready, we can start to create our vite web application.

creating the web app skeleton

To create a web application through vite is pretty straight forward:

npm create vite

or

yarn create vite

an interactive dialog / CLI would start the project generation. Please key in a project name here (take an example: my-first-vite-vue-app)

Next is to choose which framework to generate the web app skeleton; here we would pick “vue”

Finally, choose the variant / syntax for the web app. For simplicity, we would choose “Javascript” but feel free to pick “Typescript” or even “Nuxt” when appropriate.

Once we are done with the options, a brand new folder holding our vue web app skeleton would be produced.

starting the vite server and test drive our vue app

Before starting up the vite server and so, we would need to install all the node module dependencies required for our vue web app; hence run the following:

npm install

or

yarn install

Great~ By now the application is ready and we could start the vite server through:

npm dev

or

yarn dev

And let’s spin up a web browser and copy-n-paste the url provided: http://localhost:5173

Hooray~ We just created the vue web app using vite in seconds (maybe a minute or two)

making changes to the web app

Obviously we would be making changes during the development, so how does vite works on code changes?

Now just keep the vite server running (do not stop it by ctrl+c on the console). And we can start to make some changes on the src/App.vue file to duplicate “HelloWorld” vue component.

and the result of the webpage would be refreshed automatically yielding this:

Wow~ Vite server has refreshed the web app in no time. Plus if you did have experience with other building tools (e.g. webpack) you will notice that every code change might trigger a full or partial build on the application, in vite seems only the module involved would be compiled and replaced through its HMR functionality which is lightning fast.

closings

In this session, we have accomplished the following:

• understanding what is vite
• creating a web application project (chosen vue as framework) using vite
• successfully start up the vite server to serve our vue web app
• making code changes and experienced how vite server handles HMR

In the next (not Nuxt) gotcha, we would create a pretty vue web app using TailwindCss. Stay tuned~