Neon Tsunami

Mounting a Vue instance to a DOM element

August 09, 2016

Here's something cool I learnt from Evan You's talk on Vue.js at Laracon - how to mount a Vue instance to a DOM element after you've created it, instead of providing the el option in the constructor object.

const vm = new Vue({
  data: {
    name: 'Application'
  },
  template: '<h1>Welcome to {{ name }}</h1>'
}).$mount('body')

The $mount() method on your Vue.js instance will then mount it on the DOM for you. The above code is the equivilant of the more familiar way.

const vm = new Vue({
  el: 'body',
  data: {
    name: 'Application'
  },
  template: '<h1>Welcome to {{ name }}</h1>'
});

A blog about Laravel & Rails, written by Dwight Watson.