Vue js error Component template should contain exactly one root element

Question

I don t know what the error is  so far I am testing through console log to check for changes after selecting a file  for uploading    When I run   npm run watch  i get the following error       Webpack is watching the files         95  emitting                                                               ERROR  Failed to compile with 1 errors   19 42 29      error  in   resources assets js components File vue       Emitted value instead of an instance of Error     Vue template syntax   error       Component template should contain exactly one root element  If you   are using v-if on multiple elements  use v-else-if to chain them   instead           resources assets js components AvatarUpload vue 5 2-181        resources assets js app js    multi   resources assets js app js     resources assets sass app scss    My File vue is   lt template gt           lt div class  form-group  gt               lt label for  avatar  class  control-label  gt Avatar lt  label gt               lt input type  file  v-on change  fileChange  id  avatar  gt               lt div class  help-block  gt                  Help block here updated 4                   lt  div gt           lt  div gt            lt div class  col-md-6  gt               lt input type  hidden  name  avatar id  gt               lt img class  avatar  title  Current avatar  gt           lt  div gt   lt  template gt    lt script gt      export default          methods                fileChange                    console log  Test of file input change                                  lt  script gt    Any ideas on how to solve this  What is actually the error

User · Answer

instead of using this   Vue component  tabs         template             lt div class  tabs  gt             lt ul gt               lt li class  is-active  gt  lt a gt Pictures lt  a gt  lt  li gt               lt li gt  lt a gt Music lt  a gt  lt  li gt               lt li gt  lt a gt Videos lt  a gt  lt  li gt               lt li gt  lt a gt Documents lt  a gt  lt  li gt             lt  ul gt           lt  div gt            lt div class  tabs-content  gt             lt slot gt  lt  slot gt           lt  div gt               you should use    Vue component  tabs         template           lt div gt           lt div class  tabs  gt             lt ul gt               lt li class  is-active  gt  lt a gt Pictures lt  a gt  lt  li gt               lt li gt  lt a gt Music lt  a gt  lt  li gt               lt li gt  lt a gt Videos lt  a gt  lt  li gt               lt li gt  lt a gt Documents lt  a gt  lt  li gt             lt  ul gt           lt  div gt            lt div class  tabs-content  gt             lt slot gt  lt  slot gt           lt  div gt         lt  div gt

User · Answer

if  for any reasons  you don t want to add a wrapper  in my first case it was for  lt tr  gt  components   you can use a functionnal component   Instead of having a single components MyCompo vue you will have few files in a components MyCompo folder     components MyCompo index js components MyCompo File vue components MyCompo Avatar vue   With this structure  the way you call your component won t change   components MyCompo index js file content    import File from    File   import Avatar from    Avatar       const commonSort  a b   gt b-a   export default     functional  true    name   MyCompo     props     someProp    plopProp       render createElement  context        return           createElement  File    props  Object assign  light  true  sort  commonSort  context props               createElement  Avatar    props  Object assign  light  false  sort  commonSort  context props                       And if you have some function or data used in both templates  passed them as properties and that s it    I let you imagine building list of components and so much features with this pattern

User · Answer

Component template should contain exactly one root element  If you are using v-if on multiple elements  use v-else-if to chain them instead   The right approach is   lt template gt     lt div gt   lt  -- The root -- gt       lt p gt  lt  p gt        lt p gt  lt  p gt     lt  div gt   lt  template gt    The wrong approach   lt template gt   lt  -- No root Element -- gt       lt p gt  lt  p gt        lt p gt  lt  p gt   lt  template gt    Multi Root Components  The way around to that problem is using functional components  they are components where you have to pass no reactive data means component will not be watching for any data changes as well as not updating it self when something in parent component changes   As this is a work around it comes with a price  functional components don t have any life cycle hooks passed to it  they are instance less as well you cannot refer to this anymore and everything is passed with context   Here is how you can create a simple functional component   Vue component  my-component            you must set functional as true   functional  true       Props are optional   props                         To compensate for the lack of an instance       we are now provided a 2nd context argument    render  function  createElement  context                        Now that we have covered functional components in some detail lets cover how to create multi root components  for that I am gonna present you with a generic example    lt template gt    lt ul gt        lt NavBarRoutes  routes  persistentNavRoutes   gt        lt NavBarRoutes v-if  loggedIn   routes  loggedInNavRoutes    gt        lt NavBarRoutes v-else  routes  loggedOutNavRoutes    gt    lt  ul gt   lt  template gt    Now if we take a look at NavBarRoutes template   lt template gt    lt li  v-for  route in routes    key  route name    gt    lt router-link  to  route  gt      route title      lt  router-link gt    lt  li gt   lt  template gt    We cant do some thing like this we will be violating single root component restriction  Solution Make this component functional and use render    functional  true  render h    props       return props routes map route   gt     lt li key  route name  gt       lt router-link to  route  gt         route title       lt  router-link gt     lt  li gt         Here you have it you have created a multi root component  Happy coding  Reference for more details visit  https   blog carbonteq com vuejs-create-multi-root-components

User · Answer

For a more complete answer  http   www compulsivecoders com tech vuejs-component-template-should-contain-exactly-one-root-element    But basically    Currently  a VueJS template can contain only one root element  because of rendering issue  In cases you really need to have two root elements because HTML structure does not allow you to create a wrapping parent element  you can use vue-fragment    To install it   npm install vue-fragment   To use it   import Fragment from  vue-fragment   Vue use Fragment Plugin       or  import   Plugin   from  vue-fragment   Vue use Plugin     Then  in your component    lt template gt     lt fragment gt       lt tr class  hola  gt                 lt  tr gt       lt tr class  hello  gt                 lt  tr gt     lt  fragment gt   lt  template gt

User · Answer

Note This answer only applies to version 2 x of Vue  Version 3 has lifted this restriction  You have two root elements in your template   lt div class  quot form-group quot  gt         lt  div gt   lt div class  quot col-md-6 quot  gt         lt  div gt   And you need one   lt div gt       lt div class  quot form-group quot  gt                 lt  div gt        lt div class  quot col-md-6 quot  gt                 lt  div gt   lt  div gt   Essentially in Vue you must have only one root element in your templates

User · Answer

You need to wrap all the html into one single element    lt template gt      lt div gt           lt div class  form-group  gt               lt label for  avatar  class  control-label  gt Avatar lt  label gt               lt input type  file  v-on change  fileChange  id  avatar  gt               lt div class  help-block  gt                  Help block here updated 4                   lt  div gt           lt  div gt            lt div class  col-md-6  gt               lt input type  hidden  name  avatar id  gt               lt img class  avatar  title  Current avatar  gt           lt  div gt      lt  div gt    lt  template gt    lt script gt      export default          methods                fileChange                    console log  Test of file input change                                  lt  script gt

User · Answer

Just make sure that you have one root div and put everything inside this root    lt div class  quot root quot  gt       lt  --and put all child here --  gt      lt div class  child1  gt  lt  div gt      lt div class  child2  gt  lt  div gt     lt  div gt   and so on

User · Answer

I was confused as I knew VueJS should only contain 1 root element and yet I was still getting this same  template syntax error Component template should contain exactly one root element     error on an extremely simple component  Turns out I had just mispelled  lt  template gt  as  lt  tempate gt  and that was giving me this same error in a few files I copied and pasted  In summary  check your syntax for any mispellings in your component

[javascript] Vue js error: Component template should contain exactly one root element

Examples related to javascript

Examples related to node.js

Examples related to laravel

Examples related to vue.js