Published: Modified: V1.11
vuejs

vue el option for selecting a vuejs DOM mount point

The vue el option for a vuejs instance is what can be used to select a mount point for a vuejs project. A mount point is an element in a html structure in which all elements that are nested from that element will be subject to the vuejs instance in which the vue el option is being used. Alternatively the element can have no nested content at all actually when it comes to hard coded html, and all the content will be generated by way of templates and or render functions used by the main vuejs instance that is mounted to such an element.

A mount point that is selected with the el option can be obtained by a query string that allows for selection by id, class and so forth. In addition an actual reference to the element of interest can be done as well if there is a need to do so for whatever the reason. There might be some things to be concerned about at this point when it comes to selection by class, and having more than one vue instance on a page as well.

1 - Vue el option basics and mounting by id

The vue el option is used to give vuejs an existing html element to which to mount for the Vue instance that is created with the new keyword. The use of the el option will result in the Vue instance being compiled right away, which might be desirable in most use case examples. If for some reason you want to compile at a later point, the el option should be omitted and the mount method should be used instead.

1.1 - Mount by id Example

To mount an element by id just give a string beginning with a hash tag and then the name of the id, just like with jQuery or querSelectorAll. The vue el option expects a string or an object that is a reference to a dom element, so another option would be to use document.getElementById or any other means by which to select by id.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
  <head>
    <title>vue el example</title>
    <script src="/js/vuejs/2.6.10/vue.js"></script>
  </head>
  <body>
  <p id="mess">{{message}}</p>
  <script>
  
  new Vue({
    el:'#mess',
    data: {
      message:'an element can be selected by id with the # symbol'
    }
  });
  
  </script>
  </body>
</html>tml

2 - vue el and selecting by class

Selecting by class is just a matter of using a period rather than a hash tag as with any query selector string. The thing about selecting by class is that the vue el property will only make use of a single dom element. This is because there should be only one mount point per vuejs instance.

2.1 - Mount by class, nested Elements, and more than use Vue

In this example I am selecting by class and have more than one instance of vuejs. Things can get a little confusing when dealing with nested dom elements, selection by class, and more than one vue instance. It would be best to avoid these situations, but when they do happen what results does make sense to me at least.

My reasoning is that any Vue instance that exists before hand in the DOM tree should be ignored and it would appear that is what happens.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
  <head>
    <title>vue el example</title>
    <script src="/js/vuejs/2.6.10/vue.js"></script>
  </head>
  <body>
  <ul class="foo">
    <li class="bar" v-bind:style="style" >This is red text {{ mess }}</li>
    <li>This is not red or blue</li>
    <li class="bar" v-bind:style="style">This text is blue {{ mess }}</li>
  </ul>
  <script>
  
  // mounts to the first element with 'bar' class
  new Vue({
    el:'.bar',
    data: {
      style: 'color:red;',
      mess: 'bar'
    }
  });
  
  // mounts to the first element with 'foo' class
  new Vue({
    el:'.foo',
    data: {
      style: 'color:blue;',
      mess: 'foo'
    }
  });
  
  </script>
  </body>
</html>

3 - The $mount method to mount to an element at a later point in time

An alternative to using the vue el method is to use the $mount instance method. This allows for delaying the process of mounting to an html document if needed for some reason. There are several stages when it comes to a vuejs life cycle, and the process will come to a halt after the created lifestyle hook until the $mount method is called if the vue el option is not used for the instance.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
  <head>
    <title>vue el example</title>
    <script src="/js/vuejs/2.6.10/vue.js"></script>
  </head>
  <body>
  <div id="foo">
  </div>
  <script>
  
  new Vue({
     template:'<p>bar</p>',
     created: function(){
         this.$mount('#foo');
     }
  })
  
  </script>
  </body>
</html>

4 - Conclusion

The vue el option is then one of the basic options that I have become aware of when I first got started with vuejs. It is an option that I use in just a main parent vuejs instance, but of course not any child instances or components that this main parent instance may use. The only alternative to the vue el option would be using the mount method, thus far I can not say that I use that method often in actually projects, but when it comes to mounting to the hard coded html manually that is how to go about doing it.