How to use Vue.js inside Nw.js project without bundlers?

Question

I'm building an application using NW.js and Vue.js.

I don't want to use any compilers/bundlers etc.

I've installed Vue.js library via npm, and trying to use it via require, but it's not being rendered (although, I see console logs that are happening on created and mounted callbacks, but webpage is blank, and <div id="app"></div> is empty.

My code:

index.html (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.js file:

// 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),
});

As you can see, I've tried various sources of the Vue.js, but none of them made any change - I see both console logs, but nothing gets rendered.

I've made it work only, when I've added Vue.js source via CDN in index.html file (you see it commented in the code above) - but how can I use the same file but via local require() from node_modules ?

As a hack, I can download the contents of the Vue.js file from CDN and load it locally, but I would rather use an npm-based source.

Inside your <div id="app"> put your vuejs component with: <hello></hello>. This should render the element. — Danizavtz
– Danizavtz, Commented May 17, 2020 at 12:22
@Danizavtz thank you for the comment, but it's still not being rendered - I think it's related to vue.js library that is missing template parser part — lukaszkups
– lukaszkups, Commented May 17, 2020 at 16:43

Arish Khan · Accepted Answer · 2020-05-17 12:31:42Z

1

vue cdn is optimized to be used without the bundlers but when you use the npm version it required bundlers for internals working moreover, try using node integrations settings in nw.js

but still i will prefer you should use the bundlers since these can optimize your build size moreover, you can also use nw plugin provided by vue-cli

answered May 17, 2020 at 12:31

Arish Khan

7601 gold badge7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use Vue.js inside Nw.js project without bundlers?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related