Vue Js not displaying

Question

This is my very beginning with Vue with Symfony. Problem is nothing is displayed in my page, I was expecting Hello to be print. I did all my configurations. I have created folder vue

Inside vue I have following 2 files.

App.vue

<template>
    <div id="app">
        <h1>Hello</h1>
    </div>
</template>

index.js

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

new Vue({
  components: { App },
  template: "<App/>"
}).$mount("#app");

I have in my webpack.config.js

.addEntry('app', './assets/vue/index.js')

I did anything wrong here ?

Ferry Kranenburg · Accepted Answer · 2021-06-27 11:32:39Z

1

You are mounting the Vue instance to something existing in the DOM with id app. But the component inside App.vue also contains a div with id app. Try to mount to anything else on the page that Symfony creates (you can't mount on body or html). I'm sure that page does not contain anything with id app.

answered Jun 27, 2021 at 11:32

Ferry Kranenburg

2,6351 gold badge19 silver badges24 bronze badges

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

1 Comment

S S Over a year ago

Thanks Ferry, First time with Vue so getting difficulties

Collectives™ on Stack Overflow

Vue Js not displaying

App.vue

index.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

App.vue

index.js

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related