How to use mounted with VueJS 2.0

new Vue({
  render: h => h(App),
}).$mount('#app')

Above code is from vuejs.com 2.0 official vanilla boilerplate. Now on documentation for VueJS 2.0 they say I can use mounted like this:

mounted: function () {
  this.$nextTick(function () {
      // do stuff with the DOM
  })
}

How do I combine these two ingredients into one working salad?

These are not the same "mounts":

1. $mount is a method with which you can add your Vue app to the DOM.

Here's a pretty good description: Difference between .$mount() and el [Vue JS]

new Vue({
  render: h => h(App),
}).$mount('#app')
2. mounted is a lifecycle hook in Vue

That means that it gets called, when a certain event happens - in the case of mounted a component (or Vue instance) is mounted to the DOM.

mounted: function () {
  this.$nextTick(function () {
      // do stuff with the DOM
  })
}

More about lifecycle hooks: https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

3. Together they may look like this:

new Vue({
  created: function() {
    console.log('created')
  },
  mounted: function() {
    console.log('mounted')
  },
}).$mount('#app')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

The Vue Instance — Vue.js, Every Vue application starts by creating a new Vue instance with the Vue function : As a convention, we often use the variable vm (short for ViewModel) to refer stages of the instance's lifecycle, such as mounted , updated , and destroyed . I use Vue to add some 'sugar' to my applications pages rather than use it as a full JS App. In Vue 1.* I would use the ready function to pull in some data I'd outputted to the DOM when Laravel rendered e.g:

mounted: function () {} is a function on the lifecycle Vue instance. And $mount its a function for mount Vue instance eg. new Vue()

API, have also been mounted. If you want to wait until the entire view has been rendered, you can use vm.$nextTick inside of mounted : Vue.js - The Progressive JavaScript Framework. Each Vue instance goes through a series of initialization steps when it’s created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes.

skirtle's reply works flawlessly:

new Vue({
  render: h => h(App),
  mounted: function () {
      // do stuff
  })
}
}).$mount('#app')

created() and mounted()in Vue.js, The steps in Vue lifecycle are beforCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed. If the Vue� Learn how to setup a Vue.js 2.0 project in this tutorial. It is actually incredibly simple! All we have to do is load the Vuejs script from a CDN (or locally), then initialize it with one line of

Understanding Vue.js Lifecycle Hooks, Use mounting hooks if you need to access or modify the DOM of your component immediately before or after the initial render. Do not use� Previously in 1.* and with debug mode on I’d get these warnings: [Vue warn]: Cannot find element: #v-company-prices. So it seemed that when it wouldn’t find the element it threw a warning and didn’t run the ready function, with 2.* it seems to still mount even when the element doesn’t exist which is where my not defined errors come from as it shouldn’t run on a page if the element

The `mounted()` Hook in Vue, The `mounted()` hook is the most commonly used lifecycle hook in Vue. Here's what you can use `mounted()` for and why you should use it� How long will it take to migrate a Vue 1.x app to 2.0? It depends on a few factors: The size of your app (small to medium-sized apps will probably be less than a day) How many times you get distracted and start playing with a cool new feature. 😉 Not judging, it also happened to us while building 2.0! Which obsolete features you’re using.

Vue 3 Tutorial (for Vue 2 Users), Rather than using new Vue() , we now need to import the new createApp Next, we'll call the mount method on app and pass a CSS selector� One of the reasons I love working with Vue is because of how useful methods, computed, and watchers are, and the legibility of their distinction. Until understanding all three, it’s difficult to leverage the functionality of Vue to its full potential.

Comments
  • Just put the mounted bit into the object you pass to new Vue... but what is it that you're actually trying to do?
  • I am following a tutorial (blog.logrocket.com/animating-vue-with-greensock) and want to gsap.to animate something after initial loading of DOM. I think similiar use cases exist in JQuery and Angular.
  • This worked. I will put it into an answer for others to learn from. Thanks!