Transfer information from an HTML document to a Vue application that has been registered

Question

Transfer information from an HTML document to a Vue application that has been registered

I have a Vue application set up in the following manner:

import { createApp } from 'vue';
import RecommendedJobsWidget from './RecommendedJobsWidget.vue'

createApp(RecommendedJobsWidget).mount("#recommendedJobsWidgetInstance");

Here is how my HTML looks:

<body>
  <div id="recommendedJobsWidgetInstance">
    <recommended-jobs-widget :message="'messagehere'"></recommended-jobs-widget>
  </div>
<script src="/ui/migrate/dist/recommended_jobs_widget.js"></script>
</body>

Even though my app is loading correctly, I am experiencing issues with passing a prop named message to the <recommended-jobs-widget> component. I have defined the prop in my component like this:

props: ['message']

However, when I try to access the prop within my component, it seems to be unavailable. I have tried different solutions with no success in getting my data passed as a prop.

If anyone could offer any assistance, it would be greatly appreciated.

javascript vue.js vuejs3

Answer 1

Answer №1

It was mentioned earlier by @AfterDark017 that Vue3 has a way of hiding data from itself using defineProps or useAttr. However, the data is still accessible in the main.ts script, which is crucial for mounting purposes.

One way to work around this in index.html is as follows:

<body>
  <div id="app" data-recaptcha-site-key="_NOT_REALLY_">
  </div>
  <script type="module" src="/src/main.ts"></script>
</body>

In main.ts

const recaptchaSiteKey = document
  .getElementById("app")!
  .getAttribute("data-recaptcha-site-key") as string;

createApp(App)
  .provide(RECAPTCHA_SITE_KEY, recaptchaSiteKey)
  .mount("#app");

To access the data, use inject like so:

import { inject } from 'vue';
const recapchaSiteKey = inject(RECAPTCHA_SITE_KEY);

Answer 2

It was mentioned earlier by @AfterDark017 that Vue3 has a way of hiding data from itself using defineProps or useAttr. However, the data is still accessible in the main.ts script, which is crucial for mounting purposes.

One way to work around this in index.html is as follows:

<body>
  <div id="app" data-recaptcha-site-key="_NOT_REALLY_">
  </div>
  <script type="module" src="/src/main.ts"></script>
</body>

In main.ts

const recaptchaSiteKey = document
  .getElementById("app")!
  .getAttribute("data-recaptcha-site-key") as string;

createApp(App)
  .provide(RECAPTCHA_SITE_KEY, recaptchaSiteKey)
  .mount("#app");

To access the data, use inject like so:

import { inject } from 'vue';
const recapchaSiteKey = inject(RECAPTCHA_SITE_KEY);

Answer 3

Answer №2

From my understanding, passing data through props to root components in VueJS 3 is not supported.

When the root component is automatically rendered inside a mounted <div> container, it strips out any content within it. However, simply including the following code will still render the root component (unless there is no <template>):

<body>
  <div id="recommendedJobsWidgetInstance"></div>
  <script src="/ui/migrate/dist/recommended_jobs_widget.js"></script>
</body>

I also needed to pass data into Vue components, and the closest solution I found after extensive research is this: Pass data from html file into registered vue app

Although you cannot access it through props, you can retrieve the attribute value using Vanilla JS DOM methods like document.getElementById("app").getAttribute("someVariable")

In your specific case:

<body>
  <div id="recommendedJobsWidgetInstance" message="messagehere"></div>
  <script src="/ui/migrate/dist/recommended_jobs_widget.js"></script>
</body>

Then, within 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 is a better approach, I'm eager to learn about it, as I find Vue3 to be primarily designed for SPAs.

Answer 4

From my understanding, passing data through props to root components in VueJS 3 is not supported.

When the root component is automatically rendered inside a mounted <div> container, it strips out any content within it. However, simply including the following code will still render the root component (unless there is no <template>):

<body>
  <div id="recommendedJobsWidgetInstance"></div>
  <script src="/ui/migrate/dist/recommended_jobs_widget.js"></script>
</body>

I also needed to pass data into Vue components, and the closest solution I found after extensive research is this: Pass data from html file into registered vue app

Although you cannot access it through props, you can retrieve the attribute value using Vanilla JS DOM methods like document.getElementById("app").getAttribute("someVariable")

In your specific case:

<body>
  <div id="recommendedJobsWidgetInstance" message="messagehere"></div>
  <script src="/ui/migrate/dist/recommended_jobs_widget.js"></script>
</body>

Then, within 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 is a better approach, I'm eager to learn about it, as I find Vue3 to be primarily designed for SPAs.

Answer 5

Answer №3

My approach involves securely sending data using semantic methods, particularly utilizing meta tags. By embedding the data in the HTML render, it can be converted into meta tags instead of being passed as props. This enables the Vue app to retrieve the data after the head has loaded and dynamically render the component based on the head content. This strategy allows for a dynamic component loading approach within the main app. I plan to test this concept and will share my code soon.

Answer 6

My approach involves securely sending data using semantic methods, particularly utilizing meta tags. By embedding the data in the HTML render, it can be converted into meta tags instead of being passed as props. This enables the Vue app to retrieve the data after the head has loaded and dynamically render the component based on the head content. This strategy allows for a dynamic component loading approach within the main app. I plan to test this concept and will share my code soon.

Transfer information from an HTML document to a Vue application that has been registered

Answer №1

Answer №2

Answer №3

Similar questions

Determine the exact beginning and ending positions of a word when dividing it using Javascript

How to access the api variable in JavaScript

How can I utilize React to pull information from the Google Taxonomy API?

Is there a way for me to retrieve the value nested within an object within another object from this Api response?

Exploring the benefits of event subscription nesting

The readyState of Ajax is consistently anything but 4

The process of implementing server-side rendering for React Next applications with Material-ui using CSS

The prop observation was activated without any alterations

Is there a way to utilize nodemon without having to install it through npm?

Switch between using the useState hook by toggling it with the MUI Switch

Error message: Cypress Vue component test fails due to the inability to import the Ref type (export named 'Ref' is missing)

JSON Nesting with Ember.js and Rails

Encountering a "focus" error with React-Native-Phone-Input library, where the property is null

Is it possible to extract a string from a file and import the extracted string into another file using require() in NODE.js?

I am interested in developing a JavaScript program that can calculate multiples of 0.10

Develop a jQuery dialog box without assigning an ID

Encountered an issue running "npm install" within the Vue3 composition API

Tips for incorporating the "build" directory into the Travis-CI build process and deployment of an npm module

utilizing the data provided by a user in the "prompt" window within my HTML code

Random crashes are observed in Selenium tests during the execution of JavaScript code