Build a Mini Netflix (with Vue)
  • Introduction
  • Enter Contest
  • Media Delivery and Transformation
  • Setting Up a Webtask Server
  • Provision and Configure a Database
  • Create Server Routes
  • Setting Up a Vue Client
  • Header and Navigation
  • Video Player Component
  • Playing Videos
  • Cloudinary Account and Initialization
  • List of Movies Component
  • Showing A List of Movies
  • New Movie Modal Component
  • Uploading Movies
  • Sharing on Twitter
  • Deploy to Heroku
  • What's Next
Powered by GitBook
On this page
  • Install the Vue CLI
  • Create a Vue Project
  • Set Up the Library Dependencies

Setting Up a Vue Client

PreviousCreate Server RoutesNextHeader and Navigation

Last updated 7 years ago

You have now completed the server tasks. Now build the client app in a different folder, written in Vue, which simplifies tasks, such as manipulation of the Document Object Model (DOM) and management of states.

Install the Vue CLI

Just like the webtask CLI, the Vue CLI scaffolds a new Vue project without the hassle of configurations. Run this command line:

npm install @vue/cli -g

Create a Vue Project

  1. Create a Vue project with the CLI you just installed:

    vue create mini-netflix

  1. Go to the mini-netflix folder created by the command in step 1:

    cd mini-netflix

  2. Test-run the scaffold:

    npm run serve

Set Up the Library Dependencies

Specify the libraries for the project by editing your package.json file to read like this:

"dependencies": {
  "axios": "^0.18.0",
  "node-sass": "^4.7.2",
  "sass-loader": "^6.0.7",
  "sweet-modal-vue": "^2.0.0",
  "vue": "^2.5.13",
  "vue-social-sharing": "^2.3.3"
},

Afterwards, run npm install to download the libraries.