Summary of Issues that Didn't Work as Shown in the Video [Single Page Application with Vue.js + Firebase]
Thank you for your continued support.
This article contains advertisements that help fund our operations.
Table Of Contents
Introduction
This article summarizes the solutions for issues encountered when things didn't work as expected with the Udemy course.
→ Single Page Application with Vue.js + Firebase
This course is perfect for beginners with Vue.js, and I found it worthwhile as it covers everything comprehensively in about 5 hours.
Towards the end of the course, you get to create an address book app, which makes it ideal for those who want to quickly grasp the key points.
Unknown custom element: - did you register the component correctly?
When creating the side menu component in lessons 44–45, I encountered the following error:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <v-list-tile> - did you register the component correctly?
For recursive components, make sure to provide the "name" option.
found in
---> <SideNav> at src/components/SideNav.vue
<VApp>
<App> at src/App.vue
<Root>This error occurs when the component isn't registered correctly.
The version of Vuetify used in the course has changed significantly from version 1 to 2, and the component names have also changed. Writing it as shown in the course will result in a "component not found" error.
v-list-tile → v-list-item
v-list-tile-action → v-list-item-action
v-list-tile → v-list-item
v-list-tile-action → v-list-item-action
v-list-tile-avatar → v-list-item-avatar
v-list-tile-content → v-list-item-content
v-list-tile-title → v-list-item-title
v-list-tile-sub-title → v-list-item-subtitle
The avatar prop has been removed
The left side shows the old component names, and the right side shows the new ones.
Also,
v-toolbar-side-icon → v-app-bar-nav-icon
has changed, so be careful.
'app' has been removed
[Vuetify] [BREAKING] 'app' has been removed, use '<v-app-bar app>' instead. For more information, see the upgrade guide https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0#user-content-upgrade-guideI received this error.
<v-toolbar app>→<v-app-bar app>
You need to change it as follows:
<v-app-bar app></v-app-bar>Errors Due to Missing Packages
Around lesson 56, you may encounter errors due to missing packages.
In such cases, carefully read the terminal error and install the missing package.
npm install `package-name-goes-here`Install the necessary package like this.
I faced an issue where the screen wouldn't display after introducing Firebase, and this solved it for me.
Changes to be Made in main.js
In the latest version of Vuetify, you need to write it like this:
new Vue({
router,
store,
vuetify,
render: h => h(App),
}).$mount("#app")You can find the instructions at the following URL:
Display Bug with the Menu Button in the Top Left
How I Solved It
In the public/index.html file, inside the <head></head>, add the following:
<link
href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css"
rel="stylesheet"
/>This solved the issue for me.
Conclusion
That's all. I hope this helps someone.
Please don't use this article to judge the course as buggy, as there may have been updates to the video to address these issues.
