I have a vue app setup like so:
import { createApp } from 'vue';
import RecommendedJobsWidget from './RecommendedJobsWidget.vue'
createApp(RecommendedJobsWidget).mount("#recommendedJobsWidgetInstance");
My HTML is like so:
<body>
<div id="recommendedJobsWidgetInstance">
<recommended-jobs-widget :message="'messagehere'"></recommended-jobs-widget>
</div>
<script src="/ui/migrate/dist/recommended_jobs_widget.js"></script>
</body>
My app is loading as I expect but inside the component <recommended-jobs-widget> I am trying to send a message prop. Inside my component I am accepting the prop:
props: ['message']
but when I try to access the prop inside my component it doesn't exist. I have tried various solutions and none of my data is ever being passed as a prop.
Any help would be greatly appreciated.
As far as I'm aware, there is no way of passing data via props to root components in VueJS 3.
The root component renders automatically inside the mounted <div> container (and strips out anything that's inside it), so you'll find that just writing the following will still render your root component (unless your root component doesn't have a <template>):
<body>
<div id="recommendedJobsWidgetInstance"></div>
<script src="/ui/migrate/dist/recommended_jobs_widget.js"></script>
</body>
I need the exact same thing (passing data into Vue components), and the closest one I've come across (after hours of googling and reading documentations) is this: Pass data from html file into registered vue app
You could not access that using props, but you could get the value of that attribute using some Vanilla js DOM like document.getElementById("app").getAttribute("someVariable")
This would mean for your case:
<body>
<div id="recommendedJobsWidgetInstance" message="messagehere"></div>
<script src="/ui/migrate/dist/recommended_jobs_widget.js"></script>
</body>
And then, inside your RecommendedJobWidget.vue component:
<template>
<div>
<!-- your HTML -->
</div>
</template>
<script>
export default {
name: "RecommendedJobWidget",
data() {
return {
message: ""
}
},
mounted() {
this.message = document.getElementById("recommendedJobsWidgetInstance").getAttribute("message");
}
}
</script>
If there's a better way I'd love to know it, as I am not very happy how Vue3 seems to be meant for SPAs only.