diff --git a/babel.config.js b/babel.config.js
index 7904b0dc13..f5cafdbdaf 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -2,7 +2,8 @@ module.exports = {
   presets: [
     ['@babel/preset-env', {
       include: [
-        '@babel/plugin-proposal-nullish-coalescing-operator'
+        '@babel/plugin-proposal-nullish-coalescing-operator',
+        '@babel/plugin-proposal-logical-assignment-operators'
       ]
     }],
     '@babel/preset-typescript'
diff --git a/examples/browser/wallet-iframe/package.json b/examples/browser/wallet-iframe/package.json
index 3591021ff8..9aab56a8da 100644
--- a/examples/browser/wallet-iframe/package.json
+++ b/examples/browser/wallet-iframe/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "wallet",
+  "name": "wallet-iframe",
   "version": "0.1.0",
   "private": true,
   "scripts": {
diff --git a/examples/browser/wallet-web-extension/LICENSE.md b/examples/browser/wallet-web-extension/LICENSE.md
deleted file mode 100644
index 95a0f2df38..0000000000
--- a/examples/browser/wallet-web-extension/LICENSE.md
+++ /dev/null
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2016 Samuel Simões
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/examples/browser/wallet-web-extension/README.md b/examples/browser/wallet-web-extension/README.md
index 1322bb3f40..ff4c222b58 100644
--- a/examples/browser/wallet-web-extension/README.md
+++ b/examples/browser/wallet-web-extension/README.md
@@ -1,8 +1,17 @@
-# AE-Wallet-Extension-POC
+# WebExtension-based wallet
 
-How to build and install:
+## Overview
+This is a sample wallet as an WebExtension. It works with æpp opened in a browser where it is installed.
 
-1. Do `npm install` after add your keyPair in src/background.js
-2. Build with `npm run build`
-3. Enable developer tools in chrome and load the `dist` folder using `Load unpacked`
-4. You are now all set to Rock 'n' Roll.
+### How it works
+1. Install this wallet to Chrome or Firefox
+2. Start the [sample contract æpp](../aepp), which will start on port `9001`
+3. Visit [localhost:9001](http://localhost:9001)
+4. This wallet should attempt to connect to the æpp
+
+## Installation and running in Google Chrome
+1. Install required dependencies with `npm install`
+2. Start the build server in watch mode `npm run serve`
+3. Open [chrome://extensions](chrome://extensions/)
+4. Enable "Developer mode" at the right top conner
+5. Press "Load unpacked" button and choose the `dist` folder
diff --git a/examples/browser/wallet-web-extension/babel.config.js b/examples/browser/wallet-web-extension/babel.config.js
new file mode 100644
index 0000000000..e9558405fd
--- /dev/null
+++ b/examples/browser/wallet-web-extension/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/examples/browser/wallet-web-extension/package.json b/examples/browser/wallet-web-extension/package.json
index a4173a6cd5..f17cfd9901 100644
--- a/examples/browser/wallet-web-extension/package.json
+++ b/examples/browser/wallet-web-extension/package.json
@@ -1,23 +1,27 @@
 {
-  "name": "ae-wallet-extension-poc",
-  "version": "0.0.1",
-  "description": "Test for AEX 2",
+  "name": "wallet-web-extension",
+  "version": "0.1.0",
+  "private": true,
   "scripts": {
-    "build": "node utils/build.js",
-    "start": "node utils/webserver.js"
+    "serve": "vue-cli-service build --mode development --watch",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11"
   },
   "devDependencies": {
-    "clean-webpack-plugin": "^1.0.0",
-    "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "2.1.0",
-    "file-loader": "3.0.1",
-    "fs-extra": "7.0.1",
-    "html-loader": "0.5.5",
-    "html-webpack-plugin": "3.2.0",
-    "style-loader": "^0.23.1",
-    "webpack": "4.28.4",
-    "webpack-cli": "^3.2.1",
-    "webpack-dev-server": "3.1.14",
-    "write-file-webpack-plugin": "4.5.0"
-  }
+    "@vue/cli-plugin-babel": "~4.5.15",
+    "@vue/cli-service": "~4.5.15",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "vue-cli-plugin-browser-extension": "^0.25.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
 }
diff --git a/examples/browser/wallet-web-extension/public/browser-extension.html b/examples/browser/wallet-web-extension/public/browser-extension.html
new file mode 100644
index 0000000000..2dbc5259f0
--- /dev/null
+++ b/examples/browser/wallet-web-extension/public/browser-extension.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>
diff --git a/examples/browser/wallet-web-extension/src/img/icon-128.png b/examples/browser/wallet-web-extension/public/icons/128.png
similarity index 100%
rename from examples/browser/wallet-web-extension/src/img/icon-128.png
rename to examples/browser/wallet-web-extension/public/icons/128.png
diff --git a/examples/browser/wallet-web-extension/src/img/icon-34.png b/examples/browser/wallet-web-extension/public/icons/34.png
similarity index 100%
rename from examples/browser/wallet-web-extension/src/img/icon-34.png
rename to examples/browser/wallet-web-extension/public/icons/34.png
diff --git a/examples/browser/wallet-web-extension/src/Popup.vue b/examples/browser/wallet-web-extension/src/Popup.vue
new file mode 100644
index 0000000000..30eacae9a3
--- /dev/null
+++ b/examples/browser/wallet-web-extension/src/Popup.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h3>Wallet WebExtension</h3>
+    <img src="../public/icons/128.png" alt="Logo">
+  </div>
+</template>
+
+<style>
+html {
+  width: 400px;
+  height: 400px;
+}
+</style>
diff --git a/examples/browser/wallet-web-extension/src/background.html b/examples/browser/wallet-web-extension/src/background.html
deleted file mode 100644
index 384a69f997..0000000000
--- a/examples/browser/wallet-web-extension/src/background.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
-</body>
-</html>
diff --git a/examples/browser/wallet-web-extension/src/background.js b/examples/browser/wallet-web-extension/src/background.js
new file mode 100644
index 0000000000..18225e34f2
--- /dev/null
+++ b/examples/browser/wallet-web-extension/src/background.js
@@ -0,0 +1,80 @@
+/* global browser */
+
+import {
+  RpcWallet, Node, MemoryAccount, Crypto, BrowserRuntimeConnection
+} from '@aeternity/aepp-sdk'
+
+(async () => {
+  const sdk = await RpcWallet({
+    compilerUrl: 'https://compiler.aepps.com',
+    nodes: [{
+      name: 'testnet',
+      instance: await Node({ url: 'https://testnet.aeternity.io' })
+    }],
+    name: 'Wallet WebExtension',
+    // The `ExtensionProvider` uses the first account by default.
+    // You can change active account using `selectAccount(address)` function
+    accounts: [
+      MemoryAccount({
+        keypair: {
+          publicKey: 'ak_2dATVcZ9KJU5a8hdsVtTv21pYiGWiPbmVcU1Pz72FFqpk9pSRR',
+          secretKey: 'bf66e1c256931870908a649572ed0257876bb84e3cdf71efb12f56c7335fad54d5cf08400e988222f26eb4b02c8f89077457467211a6e6d955edb70749c6a33b'
+        }
+      }),
+      MemoryAccount({ keypair: Crypto.generateKeyPair() })
+    ],
+    // Hook for sdk registration
+    onConnection (aepp, action) {
+      if (confirm(`Aepp ${aepp.info.name} with id ${aepp.id} wants to connect`)) {
+        action.accept()
+      } else {
+        action.deny()
+      }
+    },
+    onDisconnect (msg, client) {
+      console.log('Client disconnected:', client)
+    },
+    onSubscription (aepp, action) {
+      if (confirm(`Aepp ${aepp.info.name} with id ${aepp.id} wants to subscribe for accounts`)) {
+        action.accept()
+      } else {
+        action.deny()
+      }
+    },
+    onSign (aepp, action) {
+      if (confirm(`Aepp ${aepp.info.name} with id ${aepp.id} wants to sign tx ${action.params.tx}`)) {
+        action.accept()
+      } else {
+        action.deny()
+      }
+    },
+    onAskAccounts (aepp, action) {
+      if (confirm(`Aepp ${aepp.info.name} with id ${aepp.id} wants to get accounts`)) {
+        action.accept()
+      } else {
+        action.deny()
+      }
+    },
+    onMessageSign (aepp, action) {
+      if (confirm(`Aepp ${aepp.info.name} with id ${aepp.id} wants to sign msg ${action.params.message}`)) {
+        action.accept()
+      } else {
+        action.deny()
+      }
+    }
+  })
+
+  browser.runtime.onConnect.addListener((port) => {
+    // create connection
+    const connection = BrowserRuntimeConnection(
+      { connectionInfo: { id: port.sender.frameId }, port }
+    )
+    // add new aepp to wallet
+    sdk.addRpcClient(connection)
+    // share wallet details
+    sdk.shareWalletInfo(port.postMessage.bind(port))
+    setInterval(() => sdk.shareWalletInfo(port.postMessage.bind(port)), 3000)
+  })
+
+  console.log('Wallet initialized!')
+})()
diff --git a/examples/browser/wallet-web-extension/src/content-script.js b/examples/browser/wallet-web-extension/src/content-script.js
new file mode 100644
index 0000000000..4c8854caeb
--- /dev/null
+++ b/examples/browser/wallet-web-extension/src/content-script.js
@@ -0,0 +1,39 @@
+/* global browser */
+
+import {
+  BrowserRuntimeConnection, BrowserWindowMessageConnection, AeppWalletSchema, ContentScriptBridge
+} from '@aeternity/aepp-sdk'
+
+(async () => {
+  console.log('Waiting until document is ready')
+  await new Promise((resolve) => {
+    const interval = setInterval(() => {
+      // TODO: ensure that there is no corresponding event
+      if (document.readyState !== 'complete') return
+      clearInterval(interval)
+      resolve()
+    }, 100)
+  })
+  console.log('Document is ready')
+
+  const port = browser.runtime.connect()
+  const extConnection = BrowserRuntimeConnection({
+    connectionInfo: {
+      description: 'Content Script to Extension connection',
+      origin: window.origin
+    },
+    port
+  })
+  const pageConnection = BrowserWindowMessageConnection({
+    connectionInfo: {
+      description: 'Content Script to Page connection',
+      origin: window.origin
+    },
+    origin: window.origin,
+    sendDirection: AeppWalletSchema.MESSAGE_DIRECTION.to_aepp,
+    receiveDirection: AeppWalletSchema.MESSAGE_DIRECTION.to_waellet
+  })
+
+  const bridge = ContentScriptBridge({ pageConnection, extConnection })
+  bridge.run()
+})()
diff --git a/examples/browser/wallet-web-extension/src/css/options.css b/examples/browser/wallet-web-extension/src/css/options.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/examples/browser/wallet-web-extension/src/css/popup.css b/examples/browser/wallet-web-extension/src/css/popup.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/examples/browser/wallet-web-extension/src/js/background.js b/examples/browser/wallet-web-extension/src/js/background.js
deleted file mode 100644
index 2a54549f30..0000000000
--- a/examples/browser/wallet-web-extension/src/js/background.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/* global chrome */
-
-import '../img/icon-128.png'
-import '../img/icon-34.png'
-
-import { RpcWallet, Node, MemoryAccount, Crypto, BrowserRuntimeConnection } from 'AE_SDK_MODULES'
-
-// ideally this can be configured by the users of the extension
-const NODE_URL = 'https://testnet.aeternity.io'
-const COMPILER_URL = 'https://compiler.aepps.com'
-const accounts = [
-  MemoryAccount({ keypair: Crypto.generateKeyPair() }), // generate keypair for account1
-  MemoryAccount({ keypair: Crypto.generateKeyPair() }) // generate keypair for account2
-]
-
-async function init () {
-  // Init extension stamp from sdk
-  RpcWallet({
-    compilerUrl: COMPILER_URL,
-    nodes: [{ name: 'testnet', instance: await Node({ url: NODE_URL }) }],
-    name: 'Wallet WebExtension',
-    // The `ExtensionProvider` uses the first account by default.
-    // You can change active account using `selectAccount(address)` function
-    accounts,
-    // Hook for sdk registration
-    onConnection (aepp, action) {
-      if (confirm(`Aepp ${aepp.info.name} with id ${aepp.id} wants to connect`)) {
-        action.accept()
-      } else {
-        action.deny()
-      }
-    },
-    onDisconnect (msg, client) {
-      console.log('Disconnect client: ', client)
-    },
-    onSubscription (aepp, action) {
-      if (confirm(`Aepp ${aepp.info.name} with id ${aepp.id} wants to subscribe for accounts`)) {
-        action.accept()
-      } else {
-        action.deny()
-      }
-    },
-    onSign (aepp, action) {
-      if (confirm(`Aepp ${aepp.info.name} with id ${aepp.id} wants to sign tx ${action.params.tx}`)) {
-        action.accept()
-      } else {
-        action.deny()
-      }
-    },
-    onAskAccounts (aepp, action) {
-      if (confirm(`Aepp ${aepp.info.name} with id ${aepp.id} wants to get accounts`)) {
-        action.accept()
-      } else {
-        action.deny()
-      }
-    },
-    onMessageSign (aepp, action) {
-      if (confirm(`Aepp ${aepp.info.name} with id ${aepp.id} wants to sign msg ${action.params.message}`)) {
-        action.accept()
-      } else {
-        action.deny()
-      }
-    }
-  }).then(wallet => {
-    chrome.runtime.onConnect.addListener(async function (port) {
-      // create connection
-      const connection = await BrowserRuntimeConnection(
-        { connectionInfo: { id: port.sender.frameId }, port }
-      )
-      // add new aepp to wallet
-      wallet.addRpcClient(connection)
-      // share wallet details
-      wallet.shareWalletInfo(port.postMessage.bind(port))
-      setTimeout(() => wallet.shareWalletInfo(port.postMessage.bind(port)), 3000)
-    })
-  }).catch(err => {
-    console.error(err)
-  })
-}
-
-init().then(_ => console.log('Wallet initialized!'))
diff --git a/examples/browser/wallet-web-extension/src/js/inject.js b/examples/browser/wallet-web-extension/src/js/inject.js
deleted file mode 100644
index 033828d2f1..0000000000
--- a/examples/browser/wallet-web-extension/src/js/inject.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import {
-  BrowserRuntimeConnection, BrowserWindowMessageConnection, AeppWalletSchema,
-  ContentScriptBridge, AeppWalletHelpers
-} from 'AE_SDK_MODULES'
-
-const readyStateCheckInterval = setInterval(function () {
-  if (document.readyState === 'complete') {
-    clearInterval(readyStateCheckInterval)
-
-    const port = AeppWalletHelpers.getBrowserAPI().runtime.connect()
-    const extConnection = BrowserRuntimeConnection({
-      connectionInfo: {
-        description: 'Content Script to Extension connection',
-        origin: window.origin
-      },
-      port
-    })
-    const pageConnection = BrowserWindowMessageConnection({
-      connectionInfo: {
-        description: 'Content Script to Page  connection',
-        origin: window.origin
-      },
-      origin: window.origin,
-      sendDirection: AeppWalletSchema.MESSAGE_DIRECTION.to_aepp,
-      receiveDirection: AeppWalletSchema.MESSAGE_DIRECTION.to_waellet
-    })
-
-    const bridge = ContentScriptBridge({ pageConnection, extConnection })
-    bridge.run()
-  }
-}, 10)
diff --git a/examples/browser/wallet-web-extension/src/js/options.js b/examples/browser/wallet-web-extension/src/js/options.js
deleted file mode 100644
index 3231107c7c..0000000000
--- a/examples/browser/wallet-web-extension/src/js/options.js
+++ /dev/null
@@ -1 +0,0 @@
-import '../css/options.css'
diff --git a/examples/browser/wallet-web-extension/src/js/popup.js b/examples/browser/wallet-web-extension/src/js/popup.js
deleted file mode 100644
index 5f4d34c664..0000000000
--- a/examples/browser/wallet-web-extension/src/js/popup.js
+++ /dev/null
@@ -1 +0,0 @@
-import '../css/popup.css'
diff --git a/examples/browser/wallet-web-extension/src/manifest.json b/examples/browser/wallet-web-extension/src/manifest.json
index 1c633f9969..113f476f3e 100644
--- a/examples/browser/wallet-web-extension/src/manifest.json
+++ b/examples/browser/wallet-web-extension/src/manifest.json
@@ -1,38 +1,37 @@
 {
-  "name": "Wallet",
-  "options_page": "options.html",
-  "background": {
-    "persistent": false,
-    "page": "background.html"
-  },
-  "browser_action": {
-    "default_popup": "popup.html",
-    "default_icon": "icon-34.png"
-  },
-  "icons": {
-    "128": "icon-128.png"
-  },
   "manifest_version": 2,
-  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+  "name": "wallet-web-extension",
+  "homepage_url": "http://localhost:8080/",
+  "description": "A Vue Browser Extension",
   "permissions": [
-    "contentSettings",
-    "notifications",
-    "https://*/*"
+    "activeTab",
+    "<all_urls>",
+    "*://*/*"
   ],
-  "externally_connectable": {
-    "ids": ["*"],
-    "matches": ["http://localhost/*"]
+  "icons": {
+    "128": "icons/128.png"
+  },
+  "background": {
+    "scripts": [
+      "js/background.js"
+    ],
+    "persistent": false
   },
-  "content_scripts": [
-    {
-      "matches": [
-        "https://*/*",
-        "http://*/*"
-      ],
-      "js": [
-        "inject.bundle.js"
-      ],
-      "all_frames": true
+  "browser_action": {
+    "default_popup": "popup.html",
+    "default_title": "wallet-web-extension",
+    "default_icon": {
+      "34": "icons/34.png"
     }
-  ]
+  },
+  "content_scripts": [{
+    "matches": [
+      "https://*/*",
+      "http://*/*"
+    ],
+    "js": [
+      "js/content-script.js"
+    ],
+    "all_frames": true
+  }]
 }
diff --git a/examples/browser/wallet-web-extension/src/options.html b/examples/browser/wallet-web-extension/src/options.html
deleted file mode 100644
index 384a69f997..0000000000
--- a/examples/browser/wallet-web-extension/src/options.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
-</body>
-</html>
diff --git a/examples/browser/wallet-web-extension/src/popup.html b/examples/browser/wallet-web-extension/src/popup.html
deleted file mode 100644
index edf5e31068..0000000000
--- a/examples/browser/wallet-web-extension/src/popup.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" style="width: 500px">
-<head>
-  <meta charset="UTF-8">
-  <title>Wallet WebExtension</title>
-</head>
-<body>
-  <h3>Wallet WebExtension</h3>
-  <img src="img/icon-128.png"><br>
-  <button id="shareWallet">Share Wallet Details</button>
-</body>
-</html>
diff --git a/examples/browser/wallet-web-extension/src/popup.js b/examples/browser/wallet-web-extension/src/popup.js
new file mode 100644
index 0000000000..12c4d99dcd
--- /dev/null
+++ b/examples/browser/wallet-web-extension/src/popup.js
@@ -0,0 +1,6 @@
+import Vue from 'vue'
+import App from './Popup.vue'
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app')
diff --git a/examples/browser/wallet-web-extension/utils/build.js b/examples/browser/wallet-web-extension/utils/build.js
deleted file mode 100644
index 2a7207ab64..0000000000
--- a/examples/browser/wallet-web-extension/utils/build.js
+++ /dev/null
@@ -1,9 +0,0 @@
-const webpack = require('webpack')
-const config = require('../webpack.config')
-
-delete config.chromeExtensionBoilerplate
-
-webpack(
-  config,
-  function (err) { if (err) throw err }
-)
diff --git a/examples/browser/wallet-web-extension/utils/env.js b/examples/browser/wallet-web-extension/utils/env.js
deleted file mode 100644
index 75e47a2db0..0000000000
--- a/examples/browser/wallet-web-extension/utils/env.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// tiny wrapper with default env vars
-module.exports = {
-  NODE_ENV: (process.env.NODE_ENV || 'development'),
-  PORT: (process.env.PORT || 3000)
-}
diff --git a/examples/browser/wallet-web-extension/utils/webserver.js b/examples/browser/wallet-web-extension/utils/webserver.js
deleted file mode 100644
index 392f0307ea..0000000000
--- a/examples/browser/wallet-web-extension/utils/webserver.js
+++ /dev/null
@@ -1,35 +0,0 @@
-const WebpackDevServer = require('webpack-dev-server')
-const webpack = require('webpack')
-const config = require('../webpack.config')
-const env = require('./env')
-const path = require('path')
-
-const options = (config.chromeExtensionBoilerplate || {})
-const excludeEntriesToHotReload = (options.notHotReload || [])
-
-for (const entryName in config.entry) {
-  if (excludeEntriesToHotReload.indexOf(entryName) === -1) {
-    config.entry[entryName] =
-      [
-        ('webpack-dev-server/client?http://localhost:' + env.PORT),
-        'webpack/hot/dev-server'
-      ].concat(config.entry[entryName])
-  }
-}
-
-config.plugins =
-  [new webpack.HotModuleReplacementPlugin()].concat(config.plugins || [])
-
-delete config.chromeExtensionBoilerplate
-
-const compiler = webpack(config)
-
-const server =
-  new WebpackDevServer(compiler, {
-    hot: true,
-    contentBase: path.join(__dirname, '../dist'),
-    headers: { 'Access-Control-Allow-Origin': '*' },
-    disableHostCheck: true
-  })
-
-server.listen(env.PORT)
diff --git a/examples/browser/wallet-web-extension/vue.config.js b/examples/browser/wallet-web-extension/vue.config.js
new file mode 100644
index 0000000000..f1310f66e6
--- /dev/null
+++ b/examples/browser/wallet-web-extension/vue.config.js
@@ -0,0 +1,33 @@
+const path = require('path')
+
+module.exports = {
+  pages: {
+    popup: {
+      template: 'public/browser-extension.html',
+      entry: './src/popup.js',
+      title: 'Popup'
+    }
+  },
+  pluginOptions: {
+    browserExtension: {
+      componentOptions: {
+        background: {
+          entry: 'src/background.js'
+        },
+        contentScripts: {
+          entries: {
+            'content-script': [
+              'src/content-script.js'
+            ]
+          }
+        }
+      }
+    }
+  },
+  // the workarounds that are only needed when sdk is not in the node_modules folder
+  chainWebpack: config => {
+    const sdkPath = path.join(__dirname, '..', '..', '..', 'es')
+    config.resolve.alias.set('@aeternity/aepp-sdk', sdkPath)
+    config.module.rule('mjs').include.add(sdkPath)
+  }
+}
diff --git a/examples/browser/wallet-web-extension/webpack.config.js b/examples/browser/wallet-web-extension/webpack.config.js
deleted file mode 100644
index 29730c12e0..0000000000
--- a/examples/browser/wallet-web-extension/webpack.config.js
+++ /dev/null
@@ -1,91 +0,0 @@
-const webpack = require('webpack')
-const path = require('path')
-const fileSystem = require('fs')
-const env = require('./utils/env')
-const CleanWebpackPlugin = require('clean-webpack-plugin')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const WriteFilePlugin = require('write-file-webpack-plugin')
-
-// load the secrets
-const secrets = path.join(__dirname, ('secrets.' + env.NODE_ENV + '.js'))
-
-const fileExtensions = ['jpg', 'jpeg', 'png', 'gif', 'eot', 'otf', 'svg', 'ttf', 'woff', 'woff2']
-
-const options = {
-  mode: process.env.NODE_ENV || 'development',
-  entry: {
-    popup: path.join(__dirname, 'src', 'js', 'popup.js'),
-    options: path.join(__dirname, 'src', 'js', 'options.js'),
-    background: path.join(__dirname, 'src', 'js', 'background.js'),
-    inject: path.join(__dirname, 'src', 'js', 'inject.js')
-  },
-  output: {
-    path: path.join(__dirname, 'dist'),
-    filename: '[name].bundle.js'
-  },
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        loader: 'style-loader!css-loader',
-        exclude: /node_modules/
-      },
-      {
-        test: new RegExp('.(' + fileExtensions.join('|') + ')$'),
-        loader: 'file-loader?name=[name].[ext]',
-        exclude: /node_modules/
-      },
-      {
-        test: /\.html$/,
-        loader: 'html-loader',
-        exclude: /node_modules/
-      }
-    ]
-  },
-  resolve: {
-    alias: {
-      AE_SDK_MODULES: '../../../../../es/',
-      ...fileSystem.existsSync(secrets) && { secrets }
-    }
-  },
-  plugins: [
-    // clean the dist folder
-    new CleanWebpackPlugin(['dist']),
-    // expose and write the allowed env vars on the compiled bundle
-    new webpack.EnvironmentPlugin(['NODE_ENV']),
-    new CopyWebpackPlugin([{
-      from: 'src/manifest.json',
-      transform: function (content, path) {
-        // generates the manifest file using the package.json informations
-        return Buffer.from(JSON.stringify({
-          description: process.env.npm_package_description,
-          version: process.env.npm_package_version,
-          ...JSON.parse(content.toString())
-        }))
-      }
-    }]),
-    new HtmlWebpackPlugin({
-      template: path.join(__dirname, 'src', 'popup.html'),
-      filename: 'popup.html',
-      chunks: ['popup']
-    }),
-    new HtmlWebpackPlugin({
-      template: path.join(__dirname, 'src', 'options.html'),
-      filename: 'options.html',
-      chunks: ['options']
-    }),
-    new HtmlWebpackPlugin({
-      template: path.join(__dirname, 'src', 'background.html'),
-      filename: 'background.html',
-      chunks: ['background']
-    }),
-    new WriteFilePlugin()
-  ]
-}
-
-if (env.NODE_ENV === 'development') {
-  options.devtool = 'cheap-module-eval-source-map'
-}
-
-module.exports = options