title: Using the async/await pattern in Vue.js
body: <p>I want to use the async/await pattern with my new Vue.js project. However, after my first try, it threw an error:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;th&gt;Test&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr v-for="(value, name) in pickingList"&gt;
                  &lt;td&gt;{{value}}&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          s
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: 'Test',
          data() {
              return {
                  pickingList: null,
                  pickingZone: '1006'
              }
          },
          async created() {
              await this.getPickingList();
          },
          methods: {
              async getPickingList() {
                  this.pickingZone = await this.$http.get("Picking/PickingZoneLists/" + this.pickingZone);
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>This throws the folloring error:</p>
  
  <blockquote>
    <p>webpack-internal:///./node_modules/vue/dist/vue.esm.js:629 [Vue warn]:
    Error in created hook: "ReferenceError: regeneratorRuntime is not
    defined"</p>
    
    <p>found in</p>
    
    <p>--->  at src/views/Test.vue
            at src/containers/TheContainer.vue
              at src/App.vue
                warn @ webpack-internal:///./node_modules/vue/dist/vue.esm.js:629
    webpack-internal:///./node_modules/vue/dist/vue.esm.js:1896
    ReferenceError: regeneratorRuntime is not defined
        at VueComponent.created (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/Test.vue?vue&amp;type=script&amp;lang=js&amp;:25)
        at invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.esm.js:1862)
        at callHook (webpack-internal:///./node_modules/vue/dist/vue.esm.js:4216)
        at VueComponent.Vue._init (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5001)
        at new VueComponent (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5147)
        at createComponentInstanceForVnode (webpack-internal:///./node_modules/vue/dist/vue.esm.js:3289)
        at init (webpack-internal:///./node_modules/vue/dist/vue.esm.js:3120)
        at merged (webpack-internal:///./node_modules/vue/dist/vue.esm.js:3307)
        at createComponent (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5973)
        at createElm (webpack-internal:///./node_modules/vue/dist/vue.esm.js:5920)</p>
  </blockquote>
  
  <p>After some research, I found a solution which suggested to install the following two babel plugins:</p>
  
  <ul>
  <li>@babel/polyfill</li>
  <li>@babel/plugin-transform-regenerator</li>
  </ul>
  
  <p>I've installed them via npm and added them to my babel.config.js file:</p>
  
  <pre><code>module.exports = {
      presets: [
          ['@babel/preset-env']
      ],
      plugins: [
          ['@babel/polyfill'],
          ['@babel/plugin-transform-regenerator']
      ]
  }
  </code></pre>
  
  <p>After that, my page crashes immediately with an unspecific error page full of SocketExceptions and HttpRequestExceptions:</p>
  
  <blockquote>
    <p>Failed to proxy the request to <a href="http://localhost:8081/mypage" rel="nofollow noreferrer">http://localhost:8081/mypage</a>, because
    the request to the proxy target failed. Check that the proxy target
    server is running and accepting requests to <a href="http://localhost:8081/" rel="nofollow noreferrer">http://localhost:8081/</a>.
    The underlying exception message was 'Es konnte keine Verbindung
    hergestellt werden, da der Zielcomputer die Verbindung
    verweigerte.'.Check the InnerException for more details.</p>
  </blockquote>
  
  <p>Were the two babel plugins even the right track? If yes, how can I fix the problem?</p>
  
  <p>I also found <a href="https://stackoverflow.com/questions/46389267/using-async-await-with-webpack-simple-configuration-throwing-error-regeneratorr">this related post</a>, but I don't have a webpack config file. Here's my vue.config.js:</p>
  
  <pre><code>module.exports = {
    lintOnSave: false,
    runtimeCompiler: true,
    configureWebpack: {
      //Necessary to run npm link https://webpack.js.org/configuration/resolve/#resolve-symlinks
      resolve: {
         symlinks: false
      }
    }
  }
  </code></pre>
  
  <p>Finally, here's my package.json:</p>
  
  <pre><code>{
    "name": "@coreui/coreui-free-vue-admin-template",
    "version": "3.0.0-beta.3",
    "description": "Open Source Bootstrap Admin Template",
    "author": {
      "name": "CoreUI",
      "url": "https://coreui.io",
      "github": "https://github.com/coreui",
      "twitter": "https://twitter.com/core_ui"
    },
    "contributors": [
      {
        "name": "CoreUI Team",
        "url": "https://github.com/orgs/coreui/people"
      }
    ],
    "homepage": "http://coreui.io",
    "copyright": "Copyright 2019 creativeLabs Łukasz Holeczek",
    "license": "MIT",
    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint",
      "test:unit": "vue-cli-service test:unit",
      "test:e2e": "vue-cli-service test:e2e",
      "clearCache": "jest --clearCache",
      "release": "npm-run-all clearCache lint build test:unit test:e2e"
    },
    "dependencies": {
      "@coreui/coreui": "^3.0.0-beta.4",
      "@coreui/icons": "^1.0.0",
      "@coreui/utils": "^1.0.0",
      "@coreui/vue": "^3.0.0-beta.4",
      "@coreui/vue-chartjs": "^1.0.2",
      "axios": "^0.19.2",
      "vue": "^2.6.10",
      "vue-axios": "^2.1.5",
      "vue-router": "^3.1.3"
    },
    "devDependencies": {
      "@babel/core": "^7.7.5",
      "@babel/plugin-transform-regenerator": "^7.8.3",
      "@babel/polyfill": "^7.8.3",
      "@vue/cli-plugin-babel": "^4.1.1",
      "@vue/cli-plugin-e2e-nightwatch": "^4.1.1",
      "@vue/cli-plugin-eslint": "^4.1.1",
      "@vue/cli-plugin-unit-jest": "^4.1.1",
      "@vue/cli-service": "^4.1.1",
      "@vue/test-utils": "1.0.0-beta.29",
      "babel-eslint": "^10.0.3",
      "babel-jest": "^24.9.0",
      "chromedriver": "^79.0.0",
      "core-js": "^3.4.8",
      "eslint": "^6.7.2",
      "eslint-plugin-vue": "^6.0.1",
      "node-sass": "^4.13.0",
      "npm-run-all": "^4.1.5",
      "sass-loader": "^8.0.0",
      "vue-template-compiler": "^2.6.10"
    },
    "browserslist": [
      "&gt; 1%",
      "last 2 versions",
      "not ie &lt;= 9"
    ],
    "engines": {
      "node": "&gt;= 8.10.x",
      "npm": "&gt;= 5.6.0"
    }
  }
  </code></pre>