Build a Vue.js 3 Application Tutorial

Lesson Project

If you want to follow along with the examples, you will need to create an app generated by the Vue CLI .

How to build your Vue application

Before an application can be deployed to a web server, it needs to be compiled from Vue code into HTML, CSS and Javascript that the browser can understand.

The Vue loader and other tools like Babel takes care of this process for us, all we have to do is run the build command.

tip If you’re working in VSCode, you can go to Terminal > New Terminal to open a terminal or command prompt with the project folder already selected.

npm run build

Depending on the size of your application, this may take some time. Once the compilation has finished, we’ll see the following output.

DONE  Compiled successfully in 9121ms 12:45:51

 File                                 Size              Gzipped

 dist\js\chunk-vendors.10e09d0f.js    89.61 KiB         33.45 KiB
 dist\js\app.7a7fa9a6.js              4.48 KiB          1.63 KiB
 dist\css\app.fb0c6e1c.css            0.33 KiB          0.23 KiB

 Images and other types of assets omitted.

DONE  Build complete. The dist directory is ready to be deployed.
INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

The CLI generates the compiled application in the /dist/ directory of the project’s folder. Everything inside this folder can be deployed to a web server like Netlify or Vercel .

That’s all you need to build your application. However, if you want to preview the built app, you will need to follow some extra steps.

The /dist/ directory is meant to be served by an HTTP server so it won’t work if we try to open the file directly in the browser.

We need to launch the project in a server environment so open up the /dist/ folder as a project in your editor.

tip If you’re using Visual Studio Code, go to File > New Window and then File > Open Folder . From there you can navigate to the /dist/ directory and choose Select Folder .

Visual Studio Code Live Server

If you’re working with Visual Studio Code as your editor, you can install the Live Server extension .

To use it, simply right-click on the index.html file in the Explorer pane and select Open with Live Server .

Vercel Serve

If you’re using another editor that doesn’t have a Live Server type extension, you can use an npm package like Vercel's serve .

To install the package, execute the following command.

npm install -g serve

tip The -g flag means the package will be installed globally and be available to any project. You can omit the flag if you want to install the package for the current project only.

To run the app, execute the following command.

serve -s dist

tip The -s flag will serve in Single-Page Application mode to prevent potential 404 errors with routes.