DEV Community

Cover image for Deploying Vue | Quasar App on Netlify
George Ikwegbu Chinedu
George Ikwegbu Chinedu

Posted on

Deploying Vue | Quasar App on Netlify

Hi Dear,
So today, I will walk you through on how to Deploy your awesome Vue or Quasar App on netlify with either of the two methods

Table Of Contents

Deploy a Built Directory 😊

Since Netlify (as at the time of writing this blogs), hosts our static files; html, css etc. You could manually run your Cli build command, to generate the static files, which would be stored in a dist/ directory. (depends on output path though).

// For Vue Cli
npm run build 
OR
yarn build

// For Quasar Cli
quasar build 
Enter fullscreen mode Exit fullscreen mode

Once this is done, a dist folder is generated for you. So all you need do, is just to visit app.netlify.com/drop
Open your Explorer ( where you project dist directory is found on your machine ) side by side as with you browser, Drag the dist folder and Drop on the space provided by Netlify. Trust me, it's that simple.

NB: If you choose to Deploy this way, then each time you make a change, you will have to Drag and Drop all over again to update.

Deploy From Version Control System 👽

Lets say you don't Like stress that much. A version control system, could be your Github, Bitbucket, GitLab. Once you open the Netlify deploy section, you will see 'New Site from Git':

  1. Click on the button
  2. Link your preferred version control system
  3. Authenticate
  4. Choose on the Repo you wish you publish
  5. Enter the Build command (as stated earlier)
  6. Enter your Output directory

Congratulations

You have automatically merged your Repo to Netlify, so each time you make 
a push to master. Netlify builds your app and updates it for you.
Enter fullscreen mode Exit fullscreen mode

Thanks.

[deleted user] image

[Deleted User]

Top comments (2)

Collapse
 
alexandrecaumette profile image
Alexandre_Caumette

What is your build script for your vue/quasar app ?
I can't find a way to exit quasar build process, therefore the build in Netlify never stops...

Collapse
 
code_sammy98 profile image
Samuel Uzor

Thanks for sharing this,it just saved me