Functionality like $(document).ready( with Vue.js

I wrote a small code with Laravel, Vue and JQuery, which works fine. Now I want to remove JQuery and run all with Vue and Axios.

Here’s my template:

 <ul id="product_list" class="vue-list-wrapper list-wrapper" data-rest="{{ route('rest_get_products', ["id"=>$product_type_id]) }}" data-pagination="0">
    <li v-for="item in items">
        <div class="item-name item-section">@{{ }}</div>
        ...bla bla...

Following code actually works and I can render what I get from AJAX. I know how to apply Axios, no problem. The point I’m confused: How can I ensure $(document).ready( functionality with Vue?

"use strict";

function init_vue_list(){

    var vue_list_handler = new Vue({
        el: '.vue-list-wrapper',
        data: {
            items: []
        mounted: function (event) {
            var self = this;
            var ajax_url = this.$el.getAttribute('data-rest');

            $.ajax({ // No problem to convert this to Axios.
                url: ajax_url,
                method: 'GET',
                success: function (data) {
                    self.items = data;
                error: function (error) {



$(document).ready( // I'm confused how I can replace this with Vue.
        if($('.vue-list-wrapper').length > 0) {

})(document, $);

19 thoughts on “Functionality like $(document).ready( with Vue.js”

Leave a Comment