Deploy a VueJS 3 App on Netlify using Continuous Deployment for Free

About the App

About Netlify

  1. Develop your App and push to GIT
  2. Create build settings on Netlify that point to our App’s GIT repo
  3. Deploy your App.

Prerequisites

Developing the ToDo App

Installing VueJS

npm install -g @vue/cli

Create a VueJS starter App

vue create vuejs_netlify
  • Choose Vue version
  • Babel
  • Pick a preset
    Choose 3.x (Preview)
  • Where to place the config for Babel
    Chooses In dedicated config files
  • Save this preset?
    Choose N
cd vuejs_netlify

Installing tailwind CSS

vue add tailwind

Open the app folder in your IDE

npm run serve

Create the files we need

App Summary

Deploy the app to Netlify

Add and commit our code to GIT.

git add .
git commit -m "Initial commit"

Creating a GIT Repository

git remote add origin https://github.com/simonjcarr/vuejs_netlify.git
git push origin master

Deploying code to Netlify

Modifying and redeploying the application

<div v-if="todos.length == 0">
<div class="text-2xl font-bold">Your ToDo list is empty</div></div>
git add .
git commit -m "Added a message when todo list is empty"
git push origin master

Summary

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store