markocupic/vuejs_with_async_and_await.html

## vuejs_with_async_and_await.html
<!DOCTYPE html>
<html>
  <head>
    <style>
      #myVueAppInner {
        transition: opacity 1.4s linear 0.2s;
        opacity: 0;
      }

      #myVueAppInner[data-show-app="true"] {
        opacity: 1;
      }
    </style>
    <!-- During development: <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
    <script type="text/javascript" src="vuejs_with_async_and_await.js"></script>

  </head>
  <body>

    <div id="myVueApp">
      <div id="myVueAppInner" v-bind:data-show-app="show_app">
        <!-- put some content here -->
      </div>
    </div>

  </body>
</html>

## vuejs_with_async_and_await.js
const {createApp} = Vue

let myVueApp = createApp({
    created() {
        //
    },

    mounted() {
        this.app = this.$el;
        this.show_app = true;
    },

    data() {
        return {
            app: null,
            show_app: false,
            prop_1: null,
            prop_2: null,
            prop_3: null,
        }
    },

    methods: {
        doSomething() {
            // Do something
        },

        /**
         * Async method
         * @returns {Promise<void>}
         */
        async showSubMenus() {

            const promise_a = await (() => {
                return new Promise((resolve, reject) => {
                    // Do something that takes a lot of time
                    //........
                    resolve();
                });
            })();

            const promise_b = await (() => {
                return new Promise((resolve, reject) => {
                    // Do something that takes a lot of time
                    //........
                    resolve();
                });
            })();

            const promise_c = await (() => {
                return new Promise((resolve, reject) => {
                    // Do something that takes a lot of time
                    //........
                    resolve();
                });
            })();

        },
    }
}).mount('#myVueApp');
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	#myVueAppInner {
	transition: opacity 1.4s linear 0.2s;
	opacity: 0;
	}

	#myVueAppInner[data-show-app="true"] {
	opacity: 1;
	}
	</style>
	<!-- During development: <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
	<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
	<script type="text/javascript" src="vuejs_with_async_and_await.js"></script>

	</head>
	<body>

	<div id="myVueApp">
	<div id="myVueAppInner" v-bind:data-show-app="show_app">
	<!-- put some content here -->
	</div>
	</div>

	</body>
	</html>
	const {createApp} = Vue

	let myVueApp = createApp({
	created() {
	//
	},

	mounted() {
	this.app = this.$el;
	this.show_app = true;
	},

	data() {
	return {
	app: null,
	show_app: false,
	prop_1: null,
	prop_2: null,
	prop_3: null,
	}
	},

	methods: {
	doSomething() {
	// Do something
	},

	/**
	* Async method
	* @returns {Promise<void>}
	*/
	async showSubMenus() {

	const promise_a = await (() => {
	return new Promise((resolve, reject) => {
	// Do something that takes a lot of time
	//........
	resolve();
	});
	})();

	const promise_b = await (() => {
	return new Promise((resolve, reject) => {
	// Do something that takes a lot of time
	//........
	resolve();
	});
	})();

	const promise_c = await (() => {
	return new Promise((resolve, reject) => {
	// Do something that takes a lot of time
	//........
	resolve();
	});
	})();

	},
	}
	}).mount('#myVueApp');