Client – Vue.js Frontend

This Vue.js template provides sample code how to connect to the ExpressJS backend.

Client Structure

File	Purpose	What you do?
README.md	Everything about the client	READ ME carefully!
public/favicon.ico	Favicon website icon	—
public/index.html	Static HTML entry point page	—
src/	src (i.e., source code)	All your code goes in here
src/Api.js	Configures HTTP library to communicate with backend	—
src/App.vue	Main Vue layout template for all view (or pages)	Change your global template for all views
src/assets/	Graphical resources	Add your images, logos, etc
src/components/	Vue components that are reusable LEGO blocks	Add your custom components here
src/main.js	Main JavaScript entry point	—
src/router.js	Vue routes configuration	Register new routes/pages/views
src/views/	Vue components that are separate pages/views	Add new routes/pages/views
src/views/Home.vue	Home page/view	Replace with your home page/view
package.json	Project meta-information	—
vue.config.js	Vue configuration	—

NOTE: The (mandatory) exercises are essential for understanding this template and will save you time!

Optional: Learn how to create such a project template in this tutorial.

Requirements

• Server backend running on http://localhost:3000
• Node.js (v14) => installation instructions for Linux
• Visual Studio Code (VSCode) as IDE
  • Vetur plugin for Vue tooling
  • ESLint plugin for linting Vue, JS, and HTML code
  • Debugger for Chrome plugin for debugging
• Google Chrome as web browser
  • Vue.js devtools plugin for debugging

Project setup

Make sure, you are in the client directory cd client

Installs all project dependencies specified in package.json.

npm install

Compiles and hot-reloads for development

Automatically recompiles and refreshes the browser tab if you save any changes to local files.

npm run serve

Compiles and minifies for production

Builds the production-ready website into the dist directory.

npm run build

Lints and fixes files

npm run lint

• JavaScript Standard Style
• Are Semicolons Necessary in JavaScript? (8' background explanation)

The Vue.js community favors omitting optional semicolons ; in Javascript.

Axios HTTP Library

• Documentation with Examples

Bootstrap 4 and BootstrapVue

• BootstrapVue Components
  • Layout and Grid System
  • Link
  • Button
  • Form
• BootstrapVue Online Playground

Plain Bootstrap 4 uses a popular JS library called jQuery for dynamic components (e.g., dropdowns). However, using jQuery with Vue is problematic and therefore we use BootstrapVue here.

Debug in VSCode with Chrome

1. [VSCode] Set a breakpoint in your Javascript code
2. [Terminal] Run npm run serve to serve the client
3. [VSCode] Select Debug > Start Debugging (F5) to automatically start a debug session in Chrome¹
4. [Chrome] Browse in Chrome to trigger your breakpoint and the focus will jump back to VSCode

Find illustrated instructions in the Vuejs Debug Docs.

¹ Chrome will launch with a separate user profile (not to mess up with your familiar daily Chrome profile) in a temp folder as described in the VSCode Debugger for Chrome. It is recommended to install the vue-devtools Chrome Extension there.