Skip to content

Latest commit

 

History

History

client

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
.vscode
.vscode
 
 
src
src
 
 
.editorconfig
.editorconfig
 
 
.env.sample
.env.sample
 
 
.eslintrc.js
.eslintrc.js
 
 
.prettierrc
.prettierrc
 
 
README.md
README.md
 
 
favicon.ico
favicon.ico
 
 
index.html
index.html
 
 
jsconfig.json
jsconfig.json
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
vite.config.js
vite.config.js
 
 
vitest.config.js
vitest.config.js
 
 

README.md

Client – Vue.js 3 Frontend

❗ Important: the team has decided to migrate to Vue.js 3 and Bootstrap 5 for the client (this decision was approved by the course instructor and the assigned coach). The main reason for this decision is that Vue.js 3 is the latest version of the framework and Vue.js 2 is going to be deprecated within a few months (i.e., at the end of 2023). Hence, the following documentation is outdated and will be updated if desired by the examiners. However, the Project Setup remain the same, so one can still use this template as a starting point.

The current structure of the project adopts the latest trends in a Vue.js project powered by the Vite.js build tool and environment.

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

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

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

Axios HTTP Library

Bootstrap 4 and BootstrapVue

TODO: Update the documentation to Bootstrap 5

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 Chrome1
  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.

1 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.