Setting Prop from Laravel blade to Vue component is undefined?

It looks like you're trying to pass a string literal as a prop from your Blade template to your Vue component. In Vue 3, when you use the v-bind syntax (or the shorthand :), you don't need to use quotes for string literals. Here's how you can fix the issue:

In your Blade file, you should pass the string without single quotes:

<div id="app">
    <!-- Vue Header -->
    <header-menu :current-page="'home'"></header-menu>
</div>

In your Vue component, you should be able to access the currentPage prop as you have defined it. However, make sure that you are using the correct case for the prop name in your template. Vue.js automatically converts camelCase prop names into kebab-case in templates. So, if you're using currentPage in your JavaScript, you should use current-page in your template.

Here's the corrected HeaderMenu.vue:

<script setup>
import { ref } from 'vue';

const props = defineProps({
    currentPage: {
        type: String,
        default: ''
    }
});

console.log(props.currentPage);

const mobileMenuOpen = ref(false);
const mobileButtonClickHandler = () => {
    mobileMenuOpen.value = !mobileMenuOpen.value;
}
</script>

<template>
<!-- header html -->
<!-- Use the prop in your template like this: -->
<div>{{ currentPage }}</div>
</template>

Make sure that your app.js is correctly importing Vue and your component, which seems to be the case based on the code you've provided.

If you're still encountering issues, ensure that:

1. Your Vue component file is correctly named and located in the path you're importing from.
2. You don't have any console errors in your browser's developer tools that could indicate other issues.
3. Your Vue version in package.json matches the syntax you're using (the code provided assumes Vue 3).

If you've checked all of the above and it's still not working, you might want to clear your mix cache and recompile your assets to make sure you're not serving an old version of your JavaScript file:

npm run dev

or if you're using Laravel Mix:

npx mix

Remember to refresh your browser, sometimes with a hard refresh (Ctrl + F5 or Cmd + Shift + R) to clear the cache.