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!
Before getting started, here are some tools that you'll want to have installed on your system to make things easier:
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:
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:
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:
- Repository description:
- This will add an "origin" git remote to your local repository. Continue?
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:
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
- Site name (optional):
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):
- Directory to deploy (blank for current dir):
- Netlify functions folder:
- No netlify.toml detected. Would you like to create one with these build settings?
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
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:
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:
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!