How to use async\await in Vue?

Question

JavaScript

Hello, I want to use async\await in Vue.
there is order-list.vue, in the short methods it is:

getOrder: function () {
  return new Promise(function (resolve, reject) {
      setTimeout(() => {
          console.log('hello world');
          resolve(true)
      }, 2000)
  });
},
example: async() => {
  console.log('start');
  for (let i in this.orders) {
      await this.getOrder().then(
          console.log('loaded ' + i)
      )
  }
  console.log('finish');
}

it's all going to webpack.
When I launch webpack I get this message

ERROR in ./erp/vue/order-list.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./erp/vue/order-list.vue?vue&type=script&lang=js&)

Module not found: Error: Can't resolve '@babel/runtime/regenerator' in '/Users/pankovalxndr/Sites/mysite/erp/vue'
 @ ./erp/vue/order-list.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./erp/vue/order-list.vue?vue&type=script&lang=js&) 1:0-61 141:13-32 146:28-47 156:21-40

my package.json

"devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/plugin-transform-runtime": "^7.6.2",
    "@babel/preset-env": "^7.4.3",
    "autoprefixer": "^8.6.5",
    "babel-loader": "^8.0.0-beta.6",
    "babel-runtime": "^6.26.0",
    "gulp": "git://github.com/gulpjs/gulp.git#6d71a658c61edb3090221579d8f97dbe086ba2ed",
    "gulp-cheerio": "^0.6.3",
    "gulp-cssnano": "^2.1.2",
    "gulp-postcss": "^7.0.1",
    "gulp-print": "^5.0.2",
    "gulp-rename": "^1.4.0",
    "gulp-replace": "^0.6.1",
    "gulp-sass": "^3.1.0",
    "gulp-svg-sprite": "^1.5.0",
    "gulp-svgmin": "^1.2.4",
    "gulp-uglify": "^3.0.2",
    "gulp-watch": "^5.0.1",
    "vue-loader": "^15.7.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }

My .babelrc

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ]
}

and here is my startup script

'use strict';
const {VueLoaderPlugin} = require('vue-loader');
const path = require('path');
module.exports = {
    mode: 'development',
    watch: true,
    entry: [
        './erp/vue/app.js'
    ],
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'erp/vue'),
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['*', '.js', '.vue', '.json']
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            }, {
                test: /\.js$/,
                use: 'babel-loader'
            }

        ]
    },
    plugins: [
        new VueLoaderPlugin(),
    ]
}

What am I doing wrong?

Answer 1

And then why?

example: async() => {
  console.log('start');
  for (let i in this.orders) {
      await this.getOrder();
      console.log('loaded ' + i);
  }
  console.log('finish');
}

UPD
Important: you cannot use an arrow function in method definitions if you need access to this. Refresh your knowledge on arrows, contexts.

Answer 2

You need to include regenerator-runtime or use babel-plugin-transform-async-to-promises
UPD: be careful when using this plugin as it has a very nasty bug https://github.com/rpetrich/babel-plugin- transform...