Deploy a VueJS 3 App on Netlify using Continuous Deployment for Free
In this article, I will take you through developing a simple VueJS 3 App using the new composition API and deploying it for free on Netlify.
About the App
The App I will create will be a simple ToDo app, but it could be much more complex but the process of deploying to Netlify would be just the same.
Netlify host Apps in a way that makes it very simple for the developer. It is basically a 3 step process proving a Continuous Deployment service.
- Develop your App and push to GIT
- Create build settings on Netlify that point to our App’s GIT repo
- Deploy your App.
Netlify pulls your App from GIT (You get to choose the branch it pulls from), builds it and deploys it for you. What’s great, is that as soon as you push new changes to the GIT branch Netlify is watching, Netlify will pull, build and redeploy the new version of the app almost instantly, this is what is known as Continuous Deployment
I am assuming that you already have the following installed or setup.
- Git installed https://git-scm.com/
- An account on Github, BitBucket, or some other internet-accessible Git server
- Node.js and NPM installed https://nodejs.org/en/
- An IDE for writing your code. I use VSCode https://code.visualstudio.com/
Developing the ToDo App
Even if you already have the VueJS CLI installed, you should still follow this step to ensure you have the latest version.
Open a terminal window. You don’t have to be in any specific folder for this step. Enter the following code.
npm install -g @vue/cli
The above command will install the VueJS CLI globally, allowing you to create new VueJS applications.
Create a VueJS starter App
When we create a new VueJS app, a new folder will be created that contains all the VueJS application files and folders.
In a terminal window, navigate to where you want the application folder to be created and enter the following command
vue create vuejs_netlify
vuejs_netlify is just the name of the app we want to create. It will also be the name of the folder that the Vue CLI will create.
Selecting application presets
Manually select features and press enter.
Use your keyboards arrow keys to move up and down the list
The next screen will ask you to choose the features you want to include in this project.
Select the following features.
- Choose Vue version
Use your keyboards arrow keys to move up and down the list. Use the space bar to select/deselect features.
enter on your keyboard, when done.
Configure the features you have selected
- Pick a preset
- Where to place the config for Babel
In dedicated config files
- Save this preset?
The Vue CLI will now create your new project.
When it’s finished enter the following command in the terminal to go into the folder created by the Vue CLI
Installing tailwind CSS
I like to use tailwind CSS in my VueJS projects. It’s very easy to add tailwind to a VueJS project using the plugin system. Just enter the following command in the terminal.
vue add tailwind
When prompted, select
minimal and hit enter.
Open the app folder in your IDE
If you're using VSCode, just enter
code . in the terminal. This will open VSCode, the
. tells VSCode to open the current folder
We will look at the code in a moment, but let’s get the Vue development server up and running first and make sure the basic app created by the Vue CLI is working.
In the terminal enter the following command
npm run serve
You should see something like the screenshot below.
Navigate to the Local URL: http://localhost:8080
If you already have something else running on port 8080, Vue will choose another port.
Don’t worry if the formatting looks a bit off, this is because we have installed tailwind css, it is conflicting with some of the CSS classes that come with the default VueJS project
Create the files we need
Open VSCode, the initial project structure should look like the screenshot below.
src/components folder. Rename
To rename a file in VSCode,
right-click the fileand click
Delete everything in the ToDo.vue file and replace with the code below.
The code I have used in ToDo.vue uses the new
Composition APIavailable in VueJS 3. To learn more about the Composition API, see my article https://levelup.gitconnected.com/developing-a-full-app-using-the-vue-3-composition-api-4fd9431f2136
src/App.vue and change it to contain the code shown below.
Notice in the
template, that Vue3 now allows us to have multiple root elements. In Vue2, these two div’s would have needed to be wrapped in a single parent div.
That is the basic ToDo App complete. As you can see, the code is simple and concise. If you take a look at your browser, you can add todo’s, toggle the complete status and delete them.
Deploy the app to Netlify
Now the app is complete. Let's get it deployed to Netlify.
Add and commit our code to GIT.
In a terminal window, go into your projects folder.
When we created our project, the Vue Create command already add a local GIT repository for us. We just need to stage our files and commit them with the two commands below.
git add .
git commit -m "Initial commit"
The above commands will stage all the new and changed files and then commit them to the local repository, with the message
Initial commitOur project already has a default .gitignore file, you don’t need to change anything in here, but anything in that file will be ignored by git, i.e. node_modules, which we never want to push to GIT.
The result will look like below
Creating a GIT Repository
To use Netlify, we need to push our code to a GIT repository that is accessible through the internet. I am going to use GitHub, but you can also use BitBucket
Log in to GitHub and create a new blank repository by clicking the New button.
Create a new repository page, enter
vuejs_netlify as the repository name. Mark it as
Public and click the
Create repository button.
Git will create the repository and amongst, other details, you will see the following
The URL https://github.com/simonjcarr/vuejs_netlify.git is what will become the remote address for the local GIT repository. Let’s tell the local repository about that remote repo now.
Remember, the URL above is for my GIT hub repository and won’t work for you. Make sure to use your repository address.
In the terminal enter the following command, replacing the GIT URL with yours.
git remote add origin https://github.com/simonjcarr/vuejs_netlify.git
origin is a standard used to refer to the default upstream remote. You can have multiple remotes but each must have a unique name.
Now we can push our code to GIT with the following command.
git push origin master
The above command tells GIT to push the
master branch to the remote named
origin. The result will look like this.
Deploying code to Netlify
If you don’t already have an account with Netlify, you should visit their site now and create one. https://app.netlify.com They have a free tier, so it won’t cost you anything.
After you log in to Netlify, click the
Sites menu and then click
New site from Git
You will need to give Netlify access to your GitHub repository through OAuth2, you can do this by clicking the GitHub logo.
You will be shown a list of all your Git repositories. If like me you have a lot of them, you can use the search box to find the repo we just created, in my case
Click the repository name.
On the next page, fill in the following details
Branch to deploy
master branch, or if you a separate branches for test, pre-prod and prod select the appropriate branch.
In our case for VueJS, it is
npm run build
For VueJS the build command will publish the files to the
Once you have completed the form, hit the
Deploy site button.
You will be taken to your Apps control panel and while the site is deploying, you will see the following
After about a minute, the message will change to show the temporary URL for your site.
If you click the link, you will see your live site, deployed on Netlify. You can check out my site at the following link. The link above will not work for you, read on to find out why. The working URL is here https://gallant-shirley-a42ed3.netlify.app/
Your own domain name is optional
You can see in the screenshots above, Netlify gives you the option to point your own custom domain to your deployed App. Your own domain has its own obvious advantages. A less obvious one, but which will be become clear in the section below, is that each time you push new code to GitHub and your App is updated, the domain name Netlify provides will change.
Modifying and redeploying the application
Netlify makes it very easy to modify and redeploy your code. In fact, all we have to do is push new code to our repository and Netlify will take care of the rest automatically.
Please note my comments at the end of the last section about your
own domain name. When you push new code to GitHub and Netlify redeploys your App, the domain name provided by Netlify will change.
In your IDE, open the
Add the following code to the bottom of the template section
<div v-if="todos.length == 0">
<div class="text-2xl font-bold">Your ToDo list is empty</div></div>
ToDo.vue file should look like this
Commit the changes and push to GitHub
In the terminal run the following commands
git add .
git commit -m "Added a message when todo list is empty"
git push origin master
After about 60 seconds, refresh your Netlify Apps control panel to get the new domain name.
The updated App ( https://gallant-shirley-a42ed3.netlify.app/ )is now deployed with the updated code.
Netlify makes it very easy to deploy your Apps into production and keep them in sync with GitHub using Continuous Deployment. To make the most out of Netlify you will need to point your own Domain Name at the new app, but that is something you would do anyway for a production site.
If you like my articles please follow me and give me a clap if you liked this article.