TechQA.

Linked Questions

Popular Questions

Vue single file components - giving strange output without render function

Asked by At

I have an existing project where I would like to add one vue component. But I don't want to transform the whole website into a Vue application - just add some components on the page. But I want to be able to use Single File Components and webpack.

It works if I do it like this with a CDN.

<html>
<head>
    <script src="https://unpkg.com/vue"></script>   
</head>
<body>
    <div id="app">
        <div>Static div</div>

        <my-component></my-component>
    </div>

    <script type="module">
        import MyComponent from './MyComponent.js'

        new Vue({
            el: '#app',
            components: { MyComponent },
        })
    </script>
</body>
</html>

But if I try to do it using .vue single file components and webpack then it is not working. It replaced my #app div with the following:

< -- function(e,n,r,o){return He(t,e,n,r,o,!0)} -->

index.js

import Vue from 'vue';
import MyComponent from './MyComponent';

new Vue({
  el: '#app',
  components: { MyComponent },
});

But if I add a render function then it works but in this case it replaces my div#app with the App component. I did not want that. I just wanted to add some components to my div#app like I did with CDN.

import Vue from 'vue';
import App from './App';

new Vue({
  el: '#app',
  render: h => h(App),
});
javascript vue.js
Original Q&A

1 Answers

0
Adam Orlov On

Can you do this then?

<div id="app">
  <div>Static div</div>

  <div id="vueApp"></div>
</div>

import Vue from 'vue';
import App from './App';

new Vue({
  el: '#vueApp',
  render: h => h(App),
});

Related Questions