I am currently developing a software application using NW.js and Vue.js.
I have decided to build the application without reliance on compilers or bundlers.
Although I have successfully installed the Vue.js library via npm, I am facing an issue where it is not rendering properly when trying to utilize it through require. Even though I can see console logs from the created and mounted callbacks, the webpage remains blank with an empty <div id="app"></div>.
Here is a snippet of my code:
index.html(the entry point of the nw.js app):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
</head>
<body>
<div id="app">ww</div>
<script src="/src/app.js"></script>
</body>
</html>
app.jsfile:
// const Vue = require('vue/dist/vue.common.dev.js');
// const Vue = require('vue/dist/vue.common.prod.js');
// const Vue = require('vue/dist/vue.common.js');
// const Vue = require('vue');
const Vue = require('vue/dist/vue.js');
const hello = Vue.component('hello', {
data () {
return {
hi: 'Well, hello there!'
}
},
template: '<div>uu {{ hi }}</div>',
created () {
console.log('Created!');
},
mounted () {
console.log('Mounted!');
}
});
new Vue({
el: '#app',
components: { hello },
render : h => h(hello),
});
Despite attempting different sources for Vue.js in the code above, none seem to resolve the rendering issue - even though both console logs are present. The only successful workaround I found was by utilizing the Vue.js source from a CDN in the index.html file (as shown in the commented out section).
Is there a way to achieve the same result by loading the file locally through require() from node_modules? Alternatively, I can download the Vue.js file contents from the CDN and load it that way, but I would prefer to stick to an npm-based approach.