Is there a way to access a variable defined in a JavaScript file from a Vue file and pass it to the Vue file? In the following code snippet, there is a template.js file and a contact.vue file. The template file converts MJML to HTML and saves the output to a variable called plainHtml. How can this variable be accessed in the Vue file?
template.js
const mjml2html = require('mjml')
const Vue = require('vue')
const app = new Vue({
data: {
name: ''
},
template: `
<mj-section>
<mj-column>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello {{ name }}</mj-text>
</mj-column>
</mj-section>`
})
const renderer = require('vue-server-renderer').createRenderer({
template: `
<mjml>
<mj-body>
<!--vue-ssr-outlet-->
</mj-body>
</mjml>`
})
renderer.renderToString(app).then(html => {
const htmlWithoutDataServerRenderedAttribute = html.replace(`data-server-rendered="true"`, '')
const plainHtml = mjml2html(htmlWithoutDataServerRenderedAttribute)
console.log(plainHtml.html)
})
contact.vue
<template>
<div class="sign_up" id="signupform">
<main role="main">
<div class="SignUp_container">
<form class="form-signup" @submit.prevent="processForm">
<input type="text" name="name" placeholder="Enter First Name" required/>
<input type="text" name="lname" placeholder="Enter Last Name" required/>
<input type="email" name="mailaddr" placeholder="Your email address" required/>
<div class="sign_cancel_buttons">
<router-link to="/">
<button id="canlbtn" type="cancel" class="clbtn">
Cancel
</button>
</router-link>
<button id="signupbtn" type="submit" name="sendmsg-button" class="signbtn">
Sign Up
</button>
</div>
</form>
</div>
</main>
</div>
</template>
<script>
export default {
methods: {
// How can I access the `plainHtml` variable here?
}
}
</script>