Hi Shaun,
I struggle with iterarting to the posts array in the composable useTags.js. It throws an unhandled execption:
[Vue warn]: Unhandled error during execution of setup function
at <TagCloud key=1 posts= (5) [{…}, {…}, {…}, {…}, {…}] >
at <Index onVnodeUnmounted=fn ref=Ref< Proxy {…} > >
at <BaseTransition mode="out-in" appear=false persisted=false ... >
at
at
at
at
at
at <BaseTransition mode="out-in" appear=false persisted=false ... >
at
at
at
at

I am using Nuxt3. Code sample:
const useTags = (posts) => {

const tags = ref([])
const tagSet = new Set()

posts.forEach(item => {
item.tags.forEach(tag => tagSet.add(tag))
})

tags.value = [...tagSet]

return { tags }

}

export default useTags

Hope it is ok to get in touch with you by opening an issue.

I have vue3 project that use firebase notification, When I moved from MIX to Vite I find this issue:

[vite]: Rollup failed to resolve import "firebase/app" from "resources/js/firebase.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "firebase/app" from "resources/js/firebase.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

my app.js like the following:

import {messaging, token} from "./firebase";

and my firebase.js:

import { initializeApp } from "firebase/app";
import { getMessaging, getToken } from "firebase/messaging";

const firebaseConfig = {
    apiKey: "XXXXXXXXXXXXXXXXXXX_XXXXXXXXXXXXXXXXXXXXX",
    authDomain: "XXXXXXXXXX-XXXXXXXXXXX.XXXXXXX.XXX",
    projectId: "XXXXXXXXX-XXXXX",
    storageBucket: "XXXXXXXXXX.XXXXXXXXXx.XXX",
    messagingSenderId: "XXXXXXXXXXXXXXX",
    appId: "X:XXXXXXXXXXXXXX:XXX:XXXXXXXXXXXXXXXXXXXXX",
    measurementId: "X-XXXXXXXXXXXX"
}

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Initialize Firebase Cloud Messaging and get a reference to the service
export const messaging = getMessaging(app);
export const token = getToken;
export default messaging;

Hello,
I'm on lesson 21 and when I run npm run serve, I get this error which I don't understand:

ERROR  Failed to compile with 1 error
error  in ./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js
Module parse failed: Unexpected token (763:13)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| class RefImpl {
>     _rawValue;
|     _shallow;
|     _value;

 @ ./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js 1:0-233 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 16:4-17 40:4-17 107:13-18 108:32-37 115:16-21 1958:8-13 1962:13-23 1968:35-45 1970:16-21 1973:21-31 2071:19-25 2094:8-12 2135:8-13 2210:29-34 2557:27-30 2558:26-29 2559:28-31 2905:16-29 2912:16-29 3043:28-36 3362:41-56 3378:28-33 3463:8-15 3500:32-37 3647:27-32 3823:29-34 3951:12-25 3958:12-25 4568:17-22 4592:13-18 5173:26-32 5336:8-21 5340:8-21 5755:16-20 5761:12-16 6296:27-32 6328:12-19 6338:16-23 6356:93-100 6357:15-20 6767:60-75 6768:60-75 6769:60-75 6770:59-74 6847:16-21 6997:16-21 7150:21-28 7160:8-21 7161:134-149 7162:8-21 7210:30-39 7264:8-21 7266:8-21 7314:23-38 7334:46-55 7334:56-63 7389:14-24 7576:21-26 7586:21-31 7593:24-34 7596:21-31 7624:53-58 7630:52-57 7696:48-53
 @ ./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js
 @ ./node_modules/vue/dist/vue.runtime.esm-bundler.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.31.46:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Thanks for your help,
David

This line in lesson-89, in the Tag.vue file (line 37):
return posts.value.filter(p => p.tags.includes(route.params.tag))
Should be corrected with an 's' at the end:
return posts.value.filter(p => p.tags.includes(route.params.tags))

Instead of using confusing lesson name which doesn't match, use real folder name/lesson title

It seems that there is a change seen Feb. 2024

To upload the storage rules with:

firebase deploy --only storage:rules

is not working any more it needs to be just:

firebase deploy --only storage

see also here at the firebase manual:

firebase manual in the section test your updates:

Id like to use your css-styles for the course.
Unfortunetly most of the branches doesn't exist anymore.
Could you fix that, please?

should it not be for the scrolling:
messages.value.scrollTop = messages.value.scrollHeight - messages.value.clientHeight;

instead of

messages.value.scrollTop = messages.value.scrollHeight;

otherwise you "over-scroll" it somehow

watchEffect should go to Home instead of Navbar.vue.
Now you can only sign up if you are logged in.

In project-planner/components/SingleProject.vue, the fetch function is currently calling for uri where it should be calling for this.uri. This appears to be fixed in the next lesson branch (lesson-62)

deleteProject() {
      fetch(uri, { method: 'DELETE' })
        .then(() => this.$emit('delete', this.project.id))
        .catch(err => console.log(err))
    }

deleteProject() {
      fetch(this.uri, { method: 'DELETE' })
        .then(() => this.$emit('delete', this.project.id))
        .catch(err => console.log(err))
    }

Great stuff you do here!

I'm running VSC 1.85.1 on a Linux Mint machine Jan. 2024

Installing json-server with
npm install json-server
gives me some issues and hints from the bash.

Trying anyway to access it with:

json-server -v

gives me "command not found" but json-server is inside the node_modules

If I follow the hints from the bash:

"@vue/cli-service": "~5.0.0"

get's downgraded to 3.x

but then I have XSS issues trying to update the db.json file and the browser blocks the attempt.

The version that is automatically loaded according to package.json is:

"json-server": "^1.0.0-alpha.22"

A solution that I found online is to use

npx json-server --watch data/db.json

But then updating db.json is shaky and not reliable, plus adding a new project gives me the id "a8f7" instead of id: "3"

It looks like json-server with vue.cli has some version issues

I am taking your class in Udemy, but can't access your files on github. Please advise.

the
this.$emit.router.push('/')

didn't give me a reload and new fetching of data I had to do additionally:

this.$emit("update", {id: this.id, title: this.title, details: this.details})

to update the Home.vue component otherwise the database changed but not the web display

may be it was json-server issues (see post before this)

onShapshot does not fire and i do not receive the date realated to message, name and createdAt fiellds in the ChatWindow

Hey Shaun -- I love your Net Ninja Pro -- I encountered a Vue Design Pattern issue that I would love you to weigh in on: Doing a straight-up Login/Logout with Firebase Auth using Vue 3 composable? OR creating a Firebase Vuex 4 Auth STORE?

I built one of my apps using your Vuex 4 Auth Store concept (https://youtu.be/HtFmVtuI_Ls) BEFORE I started your Vue 3 & Firebase course on Net Ninja Pro. Now, in reaching this part of the Project Muso Ninjas, I see that you have used a different approach -- composables to access the Firebase Auth for login/signup/logout

In your opinion, which is the better Vue design pattern?

Thank you for your insight and I LOOOOOOVE your tutorials and your courses!
-- Kyle

great course

small hint:
first remove white space and then check if the element exists

otherwise:
"dd dd" and "d ddd" will both end up in the array as a "dddd" "dddd"