Vue/Laravel 5.3 - component template not showing in the view

Question

I am trying to use a Vue component in my view for the first time. I have created a file assets/js/components/ImageUpload.vue that looks like this:

<template>
<div>
  <div v-if="!image">
    <h2>Select an image</h2>
    <input type="file" @change="onFileChange">
  </div>
  <div v-else>
    <img :src="image" />
    <button @click="removeImage">Remove image</button>
  </div>
</div>
</template>

<script>
export default {
    data: { image: '' },
    methods: {
        onFileChange: function onFileChange(e) {
            var files = e.target.files || e.dataTransfer.files;
            if (!files.length)
                return;
            this.createImage(files[0]);
        },
        createImage: function createImage(file) {
            var image = new Image();
            var reader = new FileReader();
            var vm = this;
            reader.onload = function (e) {
                vm.image = e.target.result;
            };
            reader.readAsDataURL(file);
        },
        removeImage: function removeImage(e) {
            this.image = '';
        }
    }
}
</script>

My app.js looks like this:

 require('./bootstrap');

 var VueResource = require('vue-resource');

 Vue.component('image-upload', require('./components/ImageUpload.vue'));

 Vue.use(VueResource);

 const app = new Vue({
     el: 'body'
 });

In my view I am inserting the component like this:

<image-upload></image-upload>

My gulpfile looks like this:

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

elixir(mix => {
  mix.copy('resources/assets/img', 'public/img');
  mix.copy('resources/assets/css', 'public/css');
  mix.copy('resources/assets/js', 'public/js');

    mix.sass('app.scss')
       .webpack('app.js');
});

But nothing happens in the view. There is an element <image-upload></image-upload> but nothing from the template is being shown and the only error in the console is:

[Vue warn]: Do not mount Vue to or - mount to normal elements instead.

Since I am a not a javascript expert and a total Vue beginner I have no idea where can I change the mounting of Vue and why the template is not being displayed.

flipjms · Accepted Answer · 2016-10-13 13:41:08Z

7

You are mounting Vue into the body which is not recommended.

From the Vue docs:

The provided element merely serves as a mounting point. Unlike in Vue 1.x, the mounted element will be replaced with Vue-generated DOM in all cases. It is therefore not recommended to mount the root instance to <html> or <body>.

Try to mount it in some other HTML element like a wrapper <div>

answered Oct 13, 2016 at 13:41

flipjms

7923 silver badges15 bronze badges

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

2 Comments

Ludwig Over a year ago

I actually thought since it was just a warning that it won't effect it, but when I have changed it to id="app" it worked. Thanks! The only thing that is weird about it is that mounting to body works fine in another project that I have?

flipjms Over a year ago

Probably you are using Vue 1.*

Collectives™ on Stack Overflow

Vue/Laravel 5.3 - component template not showing in the view

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related