3. Introduction to the Front End built with Vue.js, Vue Router, Vuex, and Vuetify

Опубликовано: 16 Март 2025
на канале: Dedicated Managers

1,475

In this video I try to introduce the javascript Front End of the real-time database SPA (Single Page Application) that is built with Vue.js, Vue Router, Vuex, and Vuetify.

I suggest that Vue is better for handling data (I don't do a very good job explaining why).

I discuss Vuex, which is a Vue plugin that can be thought of a module that gives your project a global storage for variables and functions to be accessed from all your various Vue components.

I add some discussion of the difference between the project vs traditional html websites.

A brief discussion of Search Engine Optimization is not necessary as its a project that's closed to the public.

I include some discussion of the routing component of Vue and how calls to change the current view (similar to calling a new webpage in the classic HTML only style) doesn't make a call to a server (such as Apache) to get the page because its already loaded as part of the SPA; the Vue router helps Vue make the changes.

While the app doesn't make a call to the web server to get the new view (webpage), it does make an asynchronous WebSocket call to the data storage to get the information to populate the view. The data stored in this case is Google's Firestore of the Firebase Suite.

You don't have to set up websockets or run a server capable of handling a websocket. Its all done for you by the Firebase code.

I discuss Vuetify which uses the Material Design framework developed by Google. Vuetify (mostly) handles the look of your website. When you build a website with Vuetify, your app will look like a Google App.

I show how Vuetify compares to the Firebase interface. Specifically, I show the Navigation Drawer.

I show how Vuetify's documentation is very helpful and that you can even quickly play with and learn the documentation examples by popping out a Codepen.

Again, this video has some good points but needs to be redone as well.

This video is part of a playlist:
• Real Time Database with Vue.js + Vuex...

It is also part of a blog post on DedicatedManagers.com:
http://www.dedicatedmanagers.com/real...

The source code for this project is available publicly on the Dedicated Managers Github account:
https://github.com/DedicatedManagers/...