search

vuejs / vue-webpack-meteor-example

Example using Vue with Meteor, while leveraging the normal Webpack + NPM workflow for your front-end.
78 stars 20 forks source link

With Vue-router: component is a fragment instance #13

Closed nerijunior closed 7 years ago

nerijunior commented 8 years ago

I got this error when using vue-router:

Attribute "id" is ignored on component <div> because the component is a fragment instance:

index.html

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

main.js

Vue = require('vue')
VueRouter = require('vue-router')
Vue.use(VueRouter)

Template.body.onRendered(function(){
  router.start(App, '#app');
});

app.vue:

module.exports = Vue.extend({
  template : '<router-view></router-view>',
  data : function(){
    return {
      version : '1.0.0'
    };
  },
  components : {
    'layout' : require('./defaults/layout.vue')
  }
})

I've tried some alternatives without success, some idea?

jpokrzyk commented 8 years ago

http://vuejs.org/guide/components.html#Fragment-Instance

You can't have a component as your top level element in the template. Wrap router-view with a div tag.

template : '<div><router-view></router-view></div>',

But since you're not really using any vue single file component syntax you should just move the app.vue logic over to your main.js.

This isn't the place for this sort of question though. Post it on the forum or gitter.