Guides & Tutorials

How to Deploy Vue 3 and Vite App in 5 Minutes

Guides & Tutorials

How to Deploy Vue 3 and Vite App in 5 Minutes

When starting a new project, you have a lot on your mind that you want to work on and build. The last thing you probably want to worry about is figuring out how to make sure your app is deployed in a reliable fashion.

In this session, I'm going to show you how you can get a brand new Vue 3 + Vite app deployed and connected with continuous integration / deployment (CI/CD) in five minutes.

Use a starter template

If you want to start with a template so that you can jump straight into coding, just click on the Deploy to Netlify button below. This will automatically setup and connect a GitHub repo with your Netlify account so that you can skip all of the configuration and start working on your Vue 3 app!

Build it from scratch

On the other hand, if you'd like to see how everything was setup from the beginning, read on for detailed instructions on how you can set it all up from the terminal yourself!

Prerequisites

Before getting started, here are some tools that you'll want to have installed on your system to make things easier:

Node.js 12 or greater (LTS recommended)
GitHub CLI
Netlify CLI

Steps to Deploy Your Vue 3 + Vite App

With the brand new powerful Vite scaffolding engine, here's how you can get up and running in a matter of seconds.

Step 1. Scaffold your project with Vite.

Open up your terminal and run the following command:

npm create vite@latest YOUR_PROJECT_NAME -- --template vue

Navigate into your project directory with the following command:

cd YOUR_PROJECT_NAME

Step 2. Setup Git integration for your project.

If you're working with a new instance of GitHub CLI, make sure to start by logging in:

gh auth login

Once you do that, it's time to initialize git in your project by running the following command:

git init

Create a new repo that's connected to your account:

gh repo create

When prompted on what kind of repo you want to create, select: Push an existing local repository to GitHub.

Follow the prompts to fill out the relevant project details.

Repository name: YOUR_PROJECT_NAME
Repository description:
Visibility: Public
This will add an "origin" git remote to your local repository. Continue? Yes

Commit your initial scaffold and push up to the main branch with the following commands:

# Add all files to staging
git add .

# Commit changes with short message on the change made
git commit -m "feature: scaffold vue 3 and vite project"

# Push changes to main branch
git push origin main

Step 3. Deploy your app

It's time to connect our new app with Netlify! If you're not logged in already, you can do so by running command below and following the prompts to authenticate the CLI:

netlify login

Next, we'll want to initialize a brand new project with Netlify using the following command:

# Initialize a new project with Netlify CLI
netlify init

Fill out the following prompts for a brand new project:

What would you like to do? Create & configure a new site
Team: YOUR_TEAM
Site name (optional): CHOOSE_UNIQUE_SITE_NAME

The following prompts should be have prefilled defaults since Netlify will automatically detect what project you have. So you can just hit enter to use the defaults.

Your build command (hugo build/yarn run build/etc): (vite build)
Directory to deploy (blank for current dir): (dist)
Netlify functions folder: (netlify/functions)
No netlify.toml detected. Would you like to create one with these build settings? (Yes)

With that, we're just one step away from finishing the deployment! Because we're using Vue 3 in SPA mode, this means that we'll need to update the netlify.toml file by uncommenting the redirects block.

The resulting netlify.toml should look like the following:

# example netlify.toml
[build]
  command = "vite build"
  functions = "netlify/functions"
  publish = "dist"

## Uncomment to use this redirect for Single Page Applications
## Not needed for static site generators.
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Now we just need to commit our change and push it up to our repo with the following commands:

# Add all files to staging
git add .

# Commit changes with short message on the change made
git commit -m "config: add netlify deploy files"

# Push changes to main branch
git push origin main

And because we've hooked up Netlify to our GitHub repo, this means Netlify will automatically pick up the changes and deploy our app!

Step 4. Celebrate!

To check on the fruits of our labor, let's run the following command:

netlify open:site

This will open up the website that has been deployed!

And if you want to check on the status of your site and see what other great features you can play with, you can directly open up the dashboard for your app by running:

netlify open

Final Thoughts

And just like that, your Vue 3 and Vite project is now configured with continuous integration and deployment! 🎉 This means that whenever you push changes to your main branch, Netlify will automatically kick off a new build and deploy it so everyone can see your changes without you lifting a single finger. 🙌

For additional resources on how you can continue to further leverage Netlify to build out more robust apps, be sure to check out the following resources:

I look forward to seeing what awesome projects y'all build with Vue 3, Vite and Netlify!