diff --git a/.eslintrc.js b/.eslintrc.js
index 3a676f5d..3343669e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,5 +1,5 @@
 module.exports = {
 	extends: [
-		'nextcloud'
-	]
+		'@nextcloud'
+	],
 };
diff --git a/composer.lock b/composer.lock
deleted file mode 100644
index be90a6f7..00000000
--- a/composer.lock
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-    "_readme": [
-        "This file locks the dependencies of your project to a known state",
-        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
-        "This file is @generated automatically"
-    ],
-    "content-hash": "25e655b97a6f68ca56ef58b83b231ea1",
-    "packages": [],
-    "packages-dev": [],
-    "aliases": [],
-    "minimum-stability": "stable",
-    "stability-flags": [],
-    "prefer-stable": false,
-    "prefer-lowest": false,
-    "platform": [],
-    "platform-dev": [],
-    "plugin-api-version": "2.0.0"
-}
diff --git a/lib/Controller/PageController.php b/lib/Controller/PageController.php
index c646fdb1..411679a6 100644
--- a/lib/Controller/PageController.php
+++ b/lib/Controller/PageController.php
@@ -45,7 +45,7 @@ public function __construct($appName, IRequest $request) {
 	public function index() {
 		// $this->cesService->transformDatasets();
 		// Util::addScript($this->appName, 'vue-chartjs.min');
-		// Util::addScript($this->appName, 'Chart');
+		Util::addScript($this->appName, 'health-main');
 		Util::addScript($this->appName, 'health');
 		Util::addStyle($this->appName, 'icons');
 		//Util::addStyle($this->appName, 'bulma.min');
diff --git a/lib/Db/Measurementdata.php b/lib/Db/Measurementdata.php
index 1d088134..ef092d3b 100644
--- a/lib/Db/Measurementdata.php
+++ b/lib/Db/Measurementdata.php
@@ -53,8 +53,6 @@ public function __construct() {
 		$this->addType('bloodSugar','float');
 		$this->addType('oxygenSat','float');
 		$this->addType('defecation','integer');
-		$this->addType('appetite','integer');
-		$this->addType('allergies','integer');
 		$this->addType('cigarettes','integer');
 		$this->addType('alcohol','integer');
 	}
diff --git a/lib/Db/MeasurementdataMapper.php b/lib/Db/MeasurementdataMapper.php
index c6f8651c..1ad31da7 100644
--- a/lib/Db/MeasurementdataMapper.php
+++ b/lib/Db/MeasurementdataMapper.php
@@ -24,6 +24,7 @@
 namespace OCA\Health\Db;
 
 use OCP\AppFramework\Db\DoesNotExistException;
+use OCP\AppFramework\Db\Entity;
 use OCP\AppFramework\Db\MultipleObjectsReturnedException;
 use OCP\IDbConnection;
 use OCP\AppFramework\Db\QBMapper;
@@ -34,7 +35,7 @@ public function __construct(IDbConnection $db) {
         parent::__construct($db, 'health_measurementdata', Measurementdata::class);
     }
 
-    public function find(int $id): ?\OCP\AppFramework\Db\Entity
+    public function find(int $id): ?Entity
 	{
         $qb = $this->db->getQueryBuilder();
 
diff --git a/package.json b/package.json
index fa84d9e8..200cc306 100644
--- a/package.json
+++ b/package.json
@@ -22,29 +22,25 @@
 	"license": "agpl",
 	"private": true,
 	"scripts": {
-		"build": "NODE_ENV=production webpack --progress --hide-modules --config webpack.prod.js",
-		"dev": "NODE_ENV=development webpack --progress --config webpack.dev.js",
-		"watch": "NODE_ENV=development webpack --progress --watch --config webpack.dev.js",
+		"build": "NODE_ENV=production webpack --progress --hide-modules --config webpack.js",
+		"dev": "NODE_ENV=development webpack --progress --config webpack.js",
+		"watch": "NODE_ENV=development webpack --progress --watch --config webpack.js",
 		"lint": "eslint --ext .js,.vue src",
 		"lint:fix": "eslint --ext .js,.vue src --fix",
 		"stylelint": "stylelint src",
 		"stylelint:fix": "stylelint src --fix"
 	},
 	"dependencies": {
-		"@bundle-analyzer/webpack-plugin": "^0.2.1",
-		"@nextcloud/axios": "^1.5.0",
-		"@nextcloud/moment": "^1.1.1",
+		"@nextcloud/axios": "^1.6.0",
+		"@nextcloud/dialogs": "^3.1.1",
 		"@nextcloud/router": "^1.2.0",
-		"@nextcloud/vue": "^2.9.0",
+		"@nextcloud/vue": "^3.5.4",
 		"chart.js": "^2.9.4",
-		"dayjs": "^1.10.4",
 		"moment": "^2.29.1",
 		"nextcloud-l10n": "^0.1.1",
 		"vue": "^2.6.12",
 		"vue-chartjs": "^3.5.1",
 		"vue-json-csv": "^1.2.12",
-		"vue-table-dynamic": "^0.2.8",
-		"vue2-datepicker": "^3.9.0",
 		"vuex": "^3.6.2"
 	},
 	"browserslist": [
@@ -54,36 +50,36 @@
 		"node": ">=10.0.0"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.12.13",
+		"@babel/core": "^7.12.17",
 		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
-		"@babel/preset-env": "^7.12.13",
+		"@babel/preset-env": "^7.12.17",
 		"@nextcloud/browserslist-config": "^1.0.0",
+		"@nextcloud/eslint-config": "^2.2.0",
+		"@nextcloud/eslint-plugin": "^1.5.0",
+		"@nextcloud/webpack-vue-config": "^1.1.0",
 		"@vue/test-utils": "^1.1.3",
 		"babel-eslint": "^10.1.0",
 		"babel-loader": "^8.2.2",
 		"css-loader": "^3.6.0",
-		"eslint": "^5.16.0",
-		"eslint-config-nextcloud": "0.1.1",
+		"eslint": "^6.8.0",
 		"eslint-config-standard": "^14.1.1",
-		"eslint-import-resolver-webpack": "^0.12.2",
+		"eslint-import-resolver-webpack": "^0.13.0",
 		"eslint-loader": "^4.0.2",
 		"eslint-plugin-import": "^2.22.1",
-		"eslint-plugin-nextcloud": "^0.3.0",
 		"eslint-plugin-node": "^11.1.0",
 		"eslint-plugin-promise": "^4.3.1",
 		"eslint-plugin-standard": "^4.1.0",
 		"eslint-plugin-vue": "^6.2.2",
 		"node-sass": "^4.14.1",
 		"sass-loader": "^8.0.2",
-		"stylelint": "^13.9.0",
-		"stylelint-config-recommended-scss": "^3.3.0",
+		"stylelint": "^13.11.0",
+		"stylelint-config-recommended-scss": "^4.2.0",
 		"stylelint-scss": "^3.19.0",
-		"stylelint-webpack-plugin": "^1.2.3",
+		"stylelint-webpack-plugin": "^2.1.1",
 		"vue-loader": "^15.9.6",
 		"vue-template-compiler": "^2.6.12",
 		"webpack": "^4.46.0",
 		"webpack-cli": "^3.3.12",
-		"webpack-merge": "^4.2.2",
-		"webpack-node-externals": "^1.7.2"
+		"webpack-merge": "^5.7.3"
 	}
 }
diff --git a/src/App.vue b/src/App.vue
index d28a069d..eeb485f8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -116,7 +116,7 @@ import SleepContent from './modules/sleep/SleepContent'
 import MeasurementContent from './modules/measurement/MeasurementContent'
 import MeasurementSidebar from './modules/measurement/MeasurementSidebar'
 import SleepSidebar from './modules/sleep/SleepSidebar'
-import moment from '@nextcloud/moment'
+import moment from 'moment'
 import SmokingSidebar from './modules/smoking/SmokingSidebar'
 import SmokingContent from './modules/smoking/SmokingContent'
 
@@ -143,7 +143,7 @@ export default {
 		SmokingSidebar,
 		SmokingContent,
 	},
-	data: function() {
+	data() {
 		return {
 			loading: true,
 		}
@@ -158,7 +158,7 @@ export default {
 		this.loading = false
 	},
 	methods: {
-		formatMyDate: function(v) {
+		formatMyDate(v) {
 			return moment(v).format('DD.MM.YYYY')
 		},
 	},
diff --git a/src/general/Chart.vue b/src/general/Chart.vue
index 5967d85e..850a927a 100644
--- a/src/general/Chart.vue
+++ b/src/general/Chart.vue
@@ -85,7 +85,7 @@
 <script>
 import LineChart from './charts/LineChart'
 import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
-import moment from '@nextcloud/moment'
+import moment from 'moment'
 
 export default {
 	name: 'Chart',
@@ -119,13 +119,13 @@ export default {
 			default: null,
 		},
 	},
-	data: function() {
+	data() {
 		return {
 			range: this.rangeDefinition,
 		}
 	},
 	computed: {
-		getOptions: function() {
+		getOptions() {
 			if (!this.options) {
 				return []
 			}
@@ -141,12 +141,13 @@ export default {
 			// console.debug('axesIds', axesIds)
 			AllYAxes.forEach((axes, i) => {
 				if (axes.id in axesIds && axesIds[axes.id]) {
+					// eslint-disable-next-line vue/no-side-effects-in-computed-properties
 					this.options.scales.yAxes.push(AllYAxes[i])
 				}
 			})
 			return this.options
 		},
-		getChartData: function() {
+		getChartData() {
 			if (!this.definition || !this.data) {
 				return []
 			}
@@ -201,10 +202,10 @@ export default {
 			// console.debug('chartData', result)
 			return result
 		},
-		isDetailRange: function() {
+		isDetailRange() {
 			return !(this.rangeDefinition === 'week' || this.rangeDefinition === 'month' || this.rangeDefinition === 'year')
 		},
-		rangeDays: function() {
+		rangeDays() {
 			if (this.range === 'week') {
 				return 7
 			} else if (this.range === 'month') {
@@ -215,7 +216,7 @@ export default {
 				return -1
 			}
 		},
-		rangeHours: function() {
+		rangeHours() {
 			if (this.range === '1hour') {
 				return 1
 			} else if (this.range === '4hours') {
@@ -232,7 +233,7 @@ export default {
 		},
 	},
 	methods: {
-		isInTimeRange: function(date) {
+		isInTimeRange(date) {
 			if (this.rangeDays !== -1 && !this.isDetailRange) {
 				return Math.abs(moment(date).diff(moment(), 'days')) <= this.rangeDays
 			} else if (this.rangeHours !== -1 && this.isDetailRange) {
diff --git a/src/general/DataTable.vue b/src/general/DataTable.vue
index 7054eb87..d527fa20 100644
--- a/src/general/DataTable.vue
+++ b/src/general/DataTable.vue
@@ -135,6 +135,7 @@
 			{{ n('health', '%n item is hidden, because it is out of the chosen time range.', '%n items are hidden, because they are out of the chosen time range.', data.length - datasets.length, {}) }}
 		</div>
 		<JsonCSV
+			v-if="getExportData.length > 0"
 			:data="getExportData"
 			:name="entityName + '.csv'">
 			<button class="export">
@@ -161,18 +162,18 @@
 <script>
 import ModalItem from './ModalItem'
 import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
-import moment from '@nextcloud/moment'
+import moment from 'moment'
 import JsonCSV from 'vue-json-csv'
 
 export default {
 	name: 'DataTable',
 	filters: {
-		formatMyDate: function(v) {
+		formatMyDate(v) {
 			// return new Date(v).toLocaleDateString() === new Date().toLocaleDateString() ? t('health', 'today') : new Date(v).toLocaleDateString()
 			// console.debug('is valid date', { date: moment(v), valid: moment(v).isValid() })
 			return moment(v) === moment() ? t('health', 'today') : moment(v).format('lll')
 		},
-		formatMyDatetime: function(v) {
+		formatMyDatetime(v) {
 			return moment(v).format('L') === moment().format('L') ? t('health', 'today') + ' ' + moment(v).format('LT') : moment(v).format('lll')
 			// const date = new Date(v).toLocaleDateString() === new Date().toLocaleDateString() ? t('health', 'today') : new Date(v).toLocaleDateString()
 			// return date + ' ' + new Date(v).toLocaleTimeString().slice(0, 5)
@@ -201,13 +202,13 @@ export default {
 			default: false,
 		},
 	},
-	data: function() {
+	data() {
 		return {
 			range: 'week',
 		}
 	},
 	computed: {
-		datasets: function() {
+		datasets() {
 			const d = []
 			// console.debug('try to return', this.data)
 			this.data.forEach(item => {
@@ -224,7 +225,7 @@ export default {
 			})
 			return d
 		},
-		rangeDays: function() {
+		rangeDays() {
 			if (this.range === 'week') {
 				return 7
 			} else if (this.range === 'month') {
@@ -235,7 +236,7 @@ export default {
 				return -1
 			}
 		},
-		getExportData: function() {
+		getExportData() {
 			if (!this.datasets && this.datasets.length > 0 && !this.header) {
 				console.debug('error datasets', this.datasets)
 				return []
@@ -254,7 +255,7 @@ export default {
 		},
 	},
 	methods: {
-		isInTimeRange: function(date) {
+		isInTimeRange(date) {
 			if (this.rangeDays !== -1) {
 				// console.debug('diff', Math.abs(moment(date).diff(moment(), 'days')))
 				return Math.abs(moment(date).diff(moment(), 'days')) <= this.rangeDays
@@ -262,10 +263,10 @@ export default {
 				return true
 			}
 		},
-		calcCount: function(items) {
+		calcCount(items) {
 			return items.length
 		},
-		deleteItem: function(id) {
+		deleteItem(id) {
 			this.$emit('deleteItem', this.datasets[id])
 		},
 		handleDataIncome(item) {
@@ -277,10 +278,10 @@ export default {
 				this.addItem(item)
 			}
 		},
-		addItem: function(item) {
+		addItem(item) {
 			this.$emit('addItem', item)
 		},
-		updateItem: function(item) {
+		updateItem(item) {
 			this.$emit('updateItem', item)
 		},
 	},
diff --git a/src/general/ModalItem.vue b/src/general/ModalItem.vue
index d60f72c6..939a24e1 100644
--- a/src/general/ModalItem.vue
+++ b/src/general/ModalItem.vue
@@ -139,7 +139,7 @@
 <script>
 import Modal from '@nextcloud/vue/dist/Components/Modal'
 import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
-import moment from '@nextcloud/moment'
+import moment from 'moment'
 
 export default {
 	name: 'ModalItem',
@@ -158,7 +158,7 @@ export default {
 		},
 		itemData: {
 			type: Object,
-			default: function() { return {} },
+			default() { return {} },
 		},
 		icon: {
 			type: String,
@@ -173,14 +173,14 @@ export default {
 			default: 'add', // add or edit
 		},
 	},
-	data: function() {
+	data() {
 		return {
 			values: {},
 			showModal: false,
 		}
 	},
 	watch: {
-		itemData: function(newItemData) {
+		itemData(newItemData) {
 			// console.debug('newItemData', newItemData)
 			this.resetValues()
 		},
@@ -189,7 +189,7 @@ export default {
 		this.resetValues()
 	},
 	methods: {
-		sendData: function() {
+		sendData() {
 			// console.debug('modal transform values', this.values)
 			for (const [key] of Object.entries(this.values)) {
 				if (this.values[key] && this.values[key].id) {
@@ -209,7 +209,7 @@ export default {
 			this.resetValues()
 			this.showModal = false
 		},
-		isNewSection: function(index) {
+		isNewSection(index) {
 			// try to get header data
 			if (!this.header[index]) {
 				return false
@@ -237,11 +237,11 @@ export default {
 
 			return false
 		},
-		closeModal: function() {
+		closeModal() {
 			this.resetValues()
 			this.showModal = false
 		},
-		resetValues: function() {
+		resetValues() {
 			// console.debug('reset values in modal')
 			this.values = Object.assign({}, this.itemData)
 			this.header.forEach(h => {
diff --git a/src/modules/feeling/FeelingChart.vue b/src/modules/feeling/FeelingChart.vue
index aac849eb..3511001c 100644
--- a/src/modules/feeling/FeelingChart.vue
+++ b/src/modules/feeling/FeelingChart.vue
@@ -49,14 +49,14 @@ export default {
 		},
 	},
 	computed: {
-		setDefinitions: function() {
+		setDefinitions() {
 			return [
 				{
 					title: t('health', 'Mood', {}),
 					columnId: 'mood',
 					timeId: 'datetime',
 					valueId: 'mood',
-					getValueY: function(v) {
+					getValueY(v) {
 						const maxIndex = 3
 						return Math.round((v + 1) / (maxIndex + 1) * 100)
 					},
@@ -71,7 +71,7 @@ export default {
 					columnId: 'sadnessLevel',
 					timeId: 'datetime',
 					valueId: 'sadnessLevel',
-					getValueY: function(v) {
+					getValueY(v) {
 						const maxIndex = 3
 						return Math.round((v + 1) / (maxIndex + 1) * 100)
 					},
@@ -85,7 +85,7 @@ export default {
 					columnId: 'symptoms',
 					timeId: 'datetime',
 					valueId: 'symptoms',
-					getValueY: function(v) {
+					getValueY(v) {
 						const maxIndex = 6
 						return Math.round((v + 1) / (maxIndex + 1) * 100)
 					},
@@ -100,7 +100,7 @@ export default {
 					columnId: 'attacks',
 					timeId: 'datetime',
 					valueId: 'attacks',
-					getValueY: function(v) {
+					getValueY(v) {
 						const maxIndex = 6
 						return Math.round((v + 1) / (maxIndex + 1) * 100)
 					},
@@ -115,7 +115,7 @@ export default {
 					columnId: 'pain',
 					timeId: 'datetime',
 					valueId: 'pain',
-					getValueY: function(v) {
+					getValueY(v) {
 						const maxIndex = 10
 						return Math.round((v + 1) / (maxIndex + 1) * 100)
 					},
@@ -129,7 +129,7 @@ export default {
 					columnId: 'energy',
 					timeId: 'datetime',
 					valueId: 'energy',
-					getValueY: function(v) {
+					getValueY(v) {
 						const maxIndex = 10
 						return Math.round((v + 1) / (maxIndex + 1) * 100)
 					},
@@ -140,7 +140,7 @@ export default {
 				},
 			]
 		},
-		options: function() {
+		options() {
 			return {
 				title: {
 					text: t('health', 'Chart'),
diff --git a/src/modules/feeling/FeelingTable.vue b/src/modules/feeling/FeelingTable.vue
index c73cb8f9..0861465e 100644
--- a/src/modules/feeling/FeelingTable.vue
+++ b/src/modules/feeling/FeelingTable.vue
@@ -34,7 +34,7 @@
 
 <script>
 import DataTable from '../../general/DataTable'
-import moment from '@nextcloud/moment'
+import moment from 'moment'
 
 export default {
 	name: 'FeelingTable',
@@ -59,7 +59,7 @@ export default {
 					columnId: 'datetime',
 					type: 'datetime',
 					show: true,
-					default: function() {
+					default() {
 						return moment().format('YYYY-MM-DDTHH:mm')
 					},
 				},
diff --git a/src/modules/measurement/MeasurementChart.vue b/src/modules/measurement/MeasurementChart.vue
index e35f1275..a4c73a15 100644
--- a/src/modules/measurement/MeasurementChart.vue
+++ b/src/modules/measurement/MeasurementChart.vue
@@ -49,14 +49,14 @@ export default {
 		},
 	},
 	computed: {
-		setDefinitions: function() {
+		setDefinitions() {
 			return [
 				{
 					title: t('health', 'Temperature', {}),
 					columnId: 'temperature',
 					timeId: 'datetime',
 					valueId: 'temperature',
-					getValueY: function(v) {
+					getValueY(v) {
 						return v
 					},
 					borderColor: 'darkblue',
@@ -70,7 +70,7 @@ export default {
 					columnId: 'heartRate',
 					timeId: 'datetime',
 					valueId: 'heartRate',
-					getValueY: function(v) {
+					getValueY(v) {
 						return v
 					},
 					borderColor: 'darkgreen',
@@ -84,7 +84,7 @@ export default {
 					columnId: 'bloodPressureS',
 					timeId: 'datetime',
 					valueId: 'bloodPressureS',
-					getValueY: function(v) {
+					getValueY(v) {
 						return v
 					},
 					borderColor: 'rgb(110,20,128)',
@@ -98,7 +98,7 @@ export default {
 					columnId: 'bloodPressureD',
 					timeId: 'datetime',
 					valueId: 'bloodPressureD',
-					getValueY: function(v) {
+					getValueY(v) {
 						return v
 					},
 					borderColor: 'rgb(188,4,219)',
@@ -112,7 +112,7 @@ export default {
 					columnId: 'oxygenSat',
 					timeId: 'datetime',
 					valueId: 'oxygenSat',
-					getValueY: function(v) {
+					getValueY(v) {
 						return v
 					},
 					borderColor: 'rgb(12,147,159)',
@@ -126,7 +126,7 @@ export default {
 					columnId: 'bloodSugar',
 					timeId: 'datetime',
 					valueId: 'bloodSugar',
-					getValueY: function(v) {
+					getValueY(v) {
 						return v
 					},
 					borderColor: 'rgb(181,80,17)',
@@ -140,7 +140,7 @@ export default {
 					columnId: 'defecation',
 					timeId: 'datetime',
 					valueId: 'defecation',
-					getValueY: function(v) {
+					getValueY(v) {
 						// console.debug('v for chart data', v)
 						return (v + 1)
 						// const maxIndex = 3
@@ -155,7 +155,7 @@ export default {
 				},
 			]
 		},
-		options: function() {
+		options() {
 			return {
 				title: {
 					text: t('health', 'Chart'),
diff --git a/src/modules/measurement/MeasurementContent.vue b/src/modules/measurement/MeasurementContent.vue
index c2842a4d..aad4125b 100644
--- a/src/modules/measurement/MeasurementContent.vue
+++ b/src/modules/measurement/MeasurementContent.vue
@@ -64,7 +64,7 @@ import { mapState, mapGetters } from 'vuex'
 import MeasurementTable from './MeasurementTable'
 import MeasurementChart from './MeasurementChart'
 import MeasurementDetailChart from './MeasurementDetailChart'
-import moment from '@nextcloud/moment'
+import moment from 'moment'
 
 export default {
 	name: 'MeasurementContent',
diff --git a/src/modules/measurement/MeasurementDetailChart.vue b/src/modules/measurement/MeasurementDetailChart.vue
index 47015bd9..3f106e68 100644
--- a/src/modules/measurement/MeasurementDetailChart.vue
+++ b/src/modules/measurement/MeasurementDetailChart.vue
@@ -50,14 +50,14 @@ export default {
 		},
 	},
 	computed: {
-		setDefinitions: function() {
+		setDefinitions() {
 			return [
 				{
 					title: t('health', 'Temperature', {}),
 					columnId: 'temperature',
 					timeId: 'datetime',
 					valueId: 'temperature',
-					getValueY: function(v) {
+					getValueY(v) {
 						return v
 					},
 					borderColor: 'darkblue',
@@ -70,7 +70,7 @@ export default {
 					columnId: 'heartRate',
 					timeId: 'datetime',
 					valueId: 'heartRate',
-					getValueY: function(v) {
+					getValueY(v) {
 						return v
 					},
 					borderColor: 'darkgreen',
@@ -83,7 +83,7 @@ export default {
 					columnId: 'bloodPressureS',
 					timeId: 'datetime',
 					valueId: 'bloodPressureS',
-					getValueY: function(v) {
+					getValueY(v) {
 						return v
 					},
 					borderColor: 'rgb(110,20,128)',
@@ -96,7 +96,7 @@ export default {
 					columnId: 'bloodPressureD',
 					timeId: 'datetime',
 					valueId: 'bloodPressureD',
-					getValueY: function(v) {
+					getValueY(v) {
 						return v
 					},
 					borderColor: 'rgb(188,4,219)',
@@ -109,7 +109,7 @@ export default {
 					columnId: 'oxygenSat',
 					timeId: 'datetime',
 					valueId: 'oxygenSat',
-					getValueY: function(v) {
+					getValueY(v) {
 						return v
 					},
 					borderColor: 'rgb(12,147,159)',
@@ -122,7 +122,7 @@ export default {
 					columnId: 'bloodSugar',
 					timeId: 'datetime',
 					valueId: 'bloodSugar',
-					getValueY: function(v) {
+					getValueY(v) {
 						return v
 					},
 					borderColor: 'rgb(181,80,17)',
@@ -135,7 +135,7 @@ export default {
 					columnId: 'defecation',
 					timeId: 'datetime',
 					valueId: 'defecation',
-					getValueY: function(v) {
+					getValueY(v) {
 						const maxIndex = 3
 						return Math.round((v + 1) / (maxIndex + 1) * 100)
 					},
@@ -147,7 +147,7 @@ export default {
 				},
 			]
 		},
-		options: function() {
+		options() {
 			return {
 				title: {
 					text: t('health', 'Chart'),
diff --git a/src/modules/measurement/MeasurementTable.vue b/src/modules/measurement/MeasurementTable.vue
index 04a15e21..38fcc405 100644
--- a/src/modules/measurement/MeasurementTable.vue
+++ b/src/modules/measurement/MeasurementTable.vue
@@ -34,7 +34,7 @@
 
 <script>
 import DataTable from '../../general/DataTable'
-import moment from '@nextcloud/moment'
+import moment from 'moment'
 
 export default {
 	name: 'MeasurementTable',
@@ -59,7 +59,7 @@ export default {
 					columnId: 'datetime',
 					type: 'datetime',
 					show: true,
-					default: function() {
+					default() {
 						return moment().format('YYYY-MM-DDTHH:mm')
 					},
 				},
@@ -100,7 +100,7 @@ export default {
 					min: 80,
 					max: 100,
 					// unter 90 ist dramatisch
-					style: function(value) {
+					style(value) {
 						if (value < 90) {
 							return 'color: darkred; font-weight: bolder;'
 						} else {
@@ -116,7 +116,7 @@ export default {
 					min: 40,
 					max: 600,
 					// 80-120 ist normal
-					style: function(value) {
+					style(value) {
 						if (value < 80 || value > 120) {
 							return 'color: darkred; font-weight: bolder;'
 						} else {
@@ -135,7 +135,7 @@ export default {
 						{ id: 2, label: t('health', 'high', {}) },
 						{ id: 3, label: t('health', 'extreme', {}) },
 					],
-					style: function(value) {
+					style(value) {
 						if (value === 3) {
 							return 'color: darkred; font-weight: bolder;'
 						} else {
@@ -146,18 +146,40 @@ export default {
 				{
 					name: t('health', 'Appetite'),
 					columnId: 'appetite',
-					type: 'longtext',
+					type: 'select',
 					show: this.person.measurementColumnAppetite,
-					placeholder: t('health', 'What about your appetite...', {}),
-					maxlength: 1000,
+					options: [
+						{ id: 0, label: t('health', 'low', {}) },
+						{ id: 1, label: t('health', 'middle', {}) },
+						{ id: 2, label: t('health', 'high', {}) },
+						{ id: 3, label: t('health', 'extreme', {}) },
+					],
+					style(value) {
+						if (value === 3) {
+							return 'color: darkred; font-weight: bolder;'
+						} else {
+							return ''
+						}
+					},
 				},
 				{
 					name: t('health', 'Allergies'),
 					columnId: 'allergies',
-					type: 'longtext',
+					type: 'select',
 					show: this.person.measurementColumnAllergies,
-					placeholder: t('health', 'What about your allergies...', {}),
-					maxlength: 1000,
+					options: [
+						{ id: 0, label: t('health', 'low', {}) },
+						{ id: 1, label: t('health', 'middle', {}) },
+						{ id: 2, label: t('health', 'high', {}) },
+						{ id: 3, label: t('health', 'extreme', {}) },
+					],
+					style(value) {
+						if (value === 3) {
+							return 'color: darkred; font-weight: bolder;'
+						} else {
+							return ''
+						}
+					},
 				},
 				{
 					name: t('health', 'Comment'),
diff --git a/src/modules/persons/PersonsContent.vue b/src/modules/persons/PersonsContent.vue
index 4ad43799..6a9ebb00 100644
--- a/src/modules/persons/PersonsContent.vue
+++ b/src/modules/persons/PersonsContent.vue
@@ -40,12 +40,12 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import moment from '@nextcloud/moment'
+import moment from 'moment'
 
 export default {
 	name: 'PersonsContent',
 	filters: {
-		formatMyDate: function(v) {
+		formatMyDate(v) {
 			return moment(v).format('DD.MM.YYYY')
 		},
 	},
@@ -54,7 +54,7 @@ export default {
 		...mapGetters(['person']),
 	},
 	methods: {
-		updateMission: function() {
+		updateMission() {
 			this.$store.dispatch('setValue', { key: 'personalMission', value: this.$refs.mission.value })
 		},
 	},
diff --git a/src/modules/persons/PersonsNavigation.vue b/src/modules/persons/PersonsNavigation.vue
index c866b124..3df5bddd 100644
--- a/src/modules/persons/PersonsNavigation.vue
+++ b/src/modules/persons/PersonsNavigation.vue
@@ -120,7 +120,7 @@ export default {
 		ActionButton,
 		Actions,
 	},
-	data: function() {
+	data() {
 		return {
 			menuOpenPersonId: 0,
 			showNewPersonForm: false,
@@ -137,17 +137,17 @@ export default {
 		},
 	},
 	methods: {
-		createPerson: function(e) {
+		createPerson(e) {
 			const name = e.currentTarget.childNodes[0].value
 			this.$store.dispatch('addPerson', name)
 			this.$store.commit('showSidebar', true)
 			this.showNewPersonForm = false
 			e.currentTarget.childNodes[0].value = ''
 		},
-		personUpdateName: function(v) {
+		personUpdateName(v) {
 			this.$store.dispatch('setValue', { id: this.persons[this.menuOpenPersonId].id, key: 'name', value: v })
 		},
-		closeNewPersonForm: function() {
+		closeNewPersonForm() {
 			this.$refs.newPersonName.value = ''
 			this.showNewPersonForm = false
 		},
diff --git a/src/modules/persons/PersonsSidebar.vue b/src/modules/persons/PersonsSidebar.vue
index 3f240b57..8f233169 100644
--- a/src/modules/persons/PersonsSidebar.vue
+++ b/src/modules/persons/PersonsSidebar.vue
@@ -140,13 +140,13 @@ export default {
 		...mapGetters(['person']),
 	},
 	methods: {
-		updateAge: function(e) {
+		updateAge(e) {
 			this.$store.dispatch('setValue', { key: 'age', value: e.target[1].value })
 		},
-		updateSize: function(e) {
+		updateSize(e) {
 			this.$store.dispatch('setValue', { key: 'size', value: e.target[1].value })
 		},
-		updateSex: function(sex) {
+		updateSex(sex) {
 			this.$store.dispatch('setValue', { key: 'sex', value: sex })
 		},
 	},
diff --git a/src/modules/sleep/SleepChart.vue b/src/modules/sleep/SleepChart.vue
index 1b98bb09..1ac1388e 100644
--- a/src/modules/sleep/SleepChart.vue
+++ b/src/modules/sleep/SleepChart.vue
@@ -32,7 +32,7 @@
 
 <script>
 import Chart from '../../general/Chart'
-import moment from '@nextcloud/moment'
+import moment from 'moment'
 
 export default {
 	name: 'SleepChart',
@@ -50,14 +50,14 @@ export default {
 		},
 	},
 	computed: {
-		setDefinitions: function() {
+		setDefinitions() {
 			return [
 				{
 					title: t('health', 'Duration', {}),
 					columnId: 'duration',
 					timeId: 'asleep',
 					valueId: 'calculate',
-					getValueY: function(dataset) {
+					getValueY(dataset) {
 						if (!dataset || !dataset.asleep || !dataset.wakeup) {
 							console.debug('dataset not good')
 							return ''
@@ -70,7 +70,7 @@ export default {
 							if ('durationWakeups' in dataset && dataset.durationWakeups) {
 								duration = duration.subtract(dataset.durationWakeups, 'minutes')
 							}
-							console.debug('duration', { duration: duration, h: duration.asHours(), m: duration.asMinutes() })
+							console.debug('duration', { duration, h: duration.asHours(), m: duration.asMinutes() })
 							return duration.isValid() ? duration.asHours() : ''
 						}
 						return ''
@@ -87,7 +87,7 @@ export default {
 					columnId: 'quality',
 					timeId: 'asleep',
 					valueId: 'quality',
-					getValueY: function(v) {
+					getValueY(v) {
 						const maxIndex = 4
 						return Math.round((v + 1) / (maxIndex + 1) * 5)
 					},
@@ -101,7 +101,7 @@ export default {
 					columnId: 'countedWakeups',
 					timeId: 'asleep',
 					valueId: 'countedWakeups',
-					getValueY: function(v) {
+					getValueY(v) {
 						return v * 2
 					},
 					borderColor: 'rgb(115,32,32)',
@@ -111,7 +111,7 @@ export default {
 				},
 			]
 		},
-		options: function() {
+		options() {
 			return {
 				title: {
 					text: t('health', 'Chart'),
diff --git a/src/modules/sleep/SleepTable.vue b/src/modules/sleep/SleepTable.vue
index 27a1c83e..34288e22 100644
--- a/src/modules/sleep/SleepTable.vue
+++ b/src/modules/sleep/SleepTable.vue
@@ -34,7 +34,7 @@
 
 <script>
 import DataTable from '../../general/DataTable'
-import moment from '@nextcloud/moment'
+import moment from 'moment'
 
 export default {
 	name: 'SleepTable',
@@ -59,7 +59,7 @@ export default {
 					columnId: 'asleep',
 					type: 'datetime',
 					show: true,
-					default: function() {
+					default() {
 						return moment().format('YYYY-MM-DDTHH:mm')
 					},
 				},
@@ -68,7 +68,7 @@ export default {
 					columnId: 'wakeup',
 					type: 'datetime',
 					show: true,
-					default: function() {
+					default() {
 						return moment().format('YYYY-MM-DDTHH:mm')
 					},
 				},
@@ -77,7 +77,7 @@ export default {
 					columnId: 'duration',
 					type: 'calculate',
 					show: true,
-					calc: function(dataset) {
+					calc(dataset) {
 						if (!dataset || !dataset.asleep || !dataset.wakeup) {
 							return ''
 						}
diff --git a/src/modules/smoking/SmokingChart.vue b/src/modules/smoking/SmokingChart.vue
index db8c3ebd..4d8a0d07 100644
--- a/src/modules/smoking/SmokingChart.vue
+++ b/src/modules/smoking/SmokingChart.vue
@@ -49,14 +49,14 @@ export default {
 		},
 	},
 	computed: {
-		setDefinitions: function() {
+		setDefinitions() {
 			return [
 				{
 					title: t('health', 'Cigarettes', {}),
 					columnId: 'cigarettes',
 					timeId: 'date',
 					valueId: 'cigarettes',
-					getValueY: function(v) {
+					getValueY(v) {
 						return v
 					},
 					borderColor: 'darkblue',
@@ -69,7 +69,7 @@ export default {
 					columnId: 'desireLevel',
 					timeId: 'date',
 					valueId: 'desireLevel',
-					getValueY: function(v) {
+					getValueY(v) {
 						const maxIndex = 6
 						return Math.round((v + 1) / (maxIndex + 1) * 10)
 					},
@@ -83,7 +83,7 @@ export default {
 					columnId: 'savedMoney',
 					timeId: 'date',
 					valueId: 'calculate',
-					getValueY: function(v) {
+					getValueY(v) {
 						if (!this.calcData.price || !this.calcData.start || v.cigarettes >= this.calcData.start) {
 							return null
 						} else {
@@ -128,7 +128,7 @@ export default {
 				},
 			]
 		},
-		options: function() {
+		options() {
 			return {
 				title: {
 					text: t('health', 'Chart'),
diff --git a/src/modules/smoking/SmokingSavedMoney.vue b/src/modules/smoking/SmokingSavedMoney.vue
index 92cbd078..2a8ee49f 100644
--- a/src/modules/smoking/SmokingSavedMoney.vue
+++ b/src/modules/smoking/SmokingSavedMoney.vue
@@ -51,7 +51,7 @@ export default {
 		},
 	},
 	computed: {
-		sum: function() {
+		sum() {
 			if (!this.price || !this.startValue) {
 				return null
 			} else {
diff --git a/src/modules/smoking/SmokingTable.vue b/src/modules/smoking/SmokingTable.vue
index 2423cbd6..d86648a5 100644
--- a/src/modules/smoking/SmokingTable.vue
+++ b/src/modules/smoking/SmokingTable.vue
@@ -58,7 +58,7 @@ export default {
 					columnId: 'date',
 					type: 'date',
 					show: true,
-					default: function() {
+					default() {
 						return new Date().toISOString().slice(0, 10)
 					},
 				},
@@ -87,7 +87,7 @@ export default {
 					name: t('health', 'Saved money'),
 					columnId: 'savedMoney',
 					type: 'calculate',
-					calc: function(dataset) {
+					calc(dataset) {
 						// console.debug('calc', { this: this, dataset: dataset })
 						if (!this.calcData.price || !this.calcData.start) {
 							return null
diff --git a/src/modules/weight/WeightBmi.vue b/src/modules/weight/WeightBmi.vue
index 63956df7..6ac361d6 100644
--- a/src/modules/weight/WeightBmi.vue
+++ b/src/modules/weight/WeightBmi.vue
@@ -45,7 +45,7 @@ import MixinBmi from './MixinBmi'
 export default {
 	name: 'WeightBmi',
 	filters: {
-		formatMyDate: function(v) {
+		formatMyDate(v) {
 			return new Date(v).toLocaleDateString()
 		},
 	},
diff --git a/src/modules/weight/WeightChart.vue b/src/modules/weight/WeightChart.vue
index d08f197c..1e0e2ef0 100644
--- a/src/modules/weight/WeightChart.vue
+++ b/src/modules/weight/WeightChart.vue
@@ -50,14 +50,14 @@ export default {
 		},
 	},
 	computed: {
-		setDefinitions: function() {
+		setDefinitions() {
 			return [
 				{
 					title: t('health', 'Weight', {}),
 					columnId: 'weight',
 					timeId: 'date',
 					valueId: 'weight',
-					getValueY: function(v) {
+					getValueY(v) {
 						return v
 					},
 					borderColor: 'darkblue',
@@ -71,7 +71,7 @@ export default {
 					columnId: 'bmi',
 					timeId: 'date',
 					valueId: 'calculate',
-					getValueY: function(d) {
+					getValueY(d) {
 						return this.calcData.bmiApi.methods.bmi(this.calcData.person, d.weight)
 					},
 					calcData: {
@@ -115,7 +115,7 @@ export default {
 					columnId: 'bodyfat',
 					timeId: 'date',
 					valueId: 'bodyfat',
-					getValueY: function(v) {
+					getValueY(v) {
 						return v
 					},
 					borderColor: 'rgb(99,22,122)',
@@ -129,7 +129,7 @@ export default {
 					columnId: 'measurement',
 					timeId: 'date',
 					valueId: 'measurement',
-					getValueY: function(v) {
+					getValueY(v) {
 						return v
 					},
 					borderColor: 'darkorange',
@@ -144,7 +144,7 @@ export default {
 					columnId: 'waistSize',
 					timeId: 'date',
 					valueId: 'waistSize',
-					getValueY: function(v) {
+					getValueY(v) {
 						return v
 					},
 					borderColor: 'gray',
@@ -158,7 +158,7 @@ export default {
 					columnId: 'hipSize',
 					timeId: 'date',
 					valueId: 'hipSize',
-					getValueY: function(v) {
+					getValueY(v) {
 						return v
 					},
 					borderColor: 'darkgray',
@@ -172,7 +172,7 @@ export default {
 					columnId: 'musclePart',
 					timeId: 'date',
 					valueId: 'musclePart',
-					getValueY: function(v) {
+					getValueY(v) {
 						return v
 					},
 					borderColor: 'lightgreen',
@@ -183,7 +183,7 @@ export default {
 				},
 			]
 		},
-		options: function() {
+		options() {
 			return {
 				title: {
 					text: t('health', 'Chart'),
diff --git a/src/modules/weight/WeightContent.vue b/src/modules/weight/WeightContent.vue
index b902994a..a43e75bc 100644
--- a/src/modules/weight/WeightContent.vue
+++ b/src/modules/weight/WeightContent.vue
@@ -128,7 +128,7 @@ export default {
 	computed: {
 		...mapState(['activeModule', 'showSidebar', 'rWeightDatasets', 'loading']),
 		...mapGetters(['person']),
-		getProgressbarValue: function() {
+		getProgressbarValue() {
 			const lostAlready = this.weightTargetInitialWeight - this.lastWeight
 			const wantToLost = this.weightTargetInitialWeight - this.weightTarget
 			const result = Math.round((100 - ((lostAlready / wantToLost)) * 100) * 100) / 100
@@ -146,13 +146,13 @@ export default {
 		weightUnit() {
 			return 'weightUnit' in this.person ? this.person.weightUnit : null
 		},
-		lastWeight: function() {
+		lastWeight() {
 			if (this.weightData && this.weightData.length >= 1) {
 				return this.weightData[0].weight
 			}
 			return null
 		},
-		lastWeightDataset: function() {
+		lastWeightDataset() {
 			if (!this.weightData || this.weightData.length === 0) {
 				return null
 			}
diff --git a/src/modules/weight/WeightSidebar.vue b/src/modules/weight/WeightSidebar.vue
index 0f3660d8..3aee4087 100644
--- a/src/modules/weight/WeightSidebar.vue
+++ b/src/modules/weight/WeightSidebar.vue
@@ -143,19 +143,19 @@ export default {
 		...mapGetters(['person']),
 	},
 	methods: {
-		updateWeightUnit: function(e) {
+		updateWeightUnit(e) {
 			this.$store.dispatch('setValue', { key: 'weightUnit', value: e.target[1].value })
 		},
-		updateWeightTarget: function(e) {
+		updateWeightTarget(e) {
 			this.$store.dispatch('setValue', { key: 'weightTarget', value: e.target[1].value })
 		},
-		updateWeightTargetInitialWeight: function(e) {
+		updateWeightTargetInitialWeight(e) {
 			this.$store.dispatch('setValue', { key: 'weightTargetInitialWeight', value: e.target[1].value })
 		},
-		updateMeasurementName: function(e) {
+		updateMeasurementName(e) {
 			this.$store.dispatch('setValue', { key: 'weightMeasurementName', value: e.target[1].value })
 		},
-		updateWeightTargetBounty: function() {
+		updateWeightTargetBounty() {
 			this.$store.dispatch('setValue', { key: 'weightTargetBounty', value: this.$refs.weightTargetBounty.value })
 		},
 	},
diff --git a/src/modules/weight/WeightTable.vue b/src/modules/weight/WeightTable.vue
index 374fc180..34c052c1 100644
--- a/src/modules/weight/WeightTable.vue
+++ b/src/modules/weight/WeightTable.vue
@@ -60,7 +60,7 @@ export default {
 					columnId: 'date',
 					type: 'date',
 					show: true,
-					default: function() {
+					default() {
 						return new Date().toISOString().slice(0, 10)
 					},
 				},
@@ -75,7 +75,7 @@ export default {
 					name: t('health', 'BMI'),
 					columnId: 'bmi',
 					type: 'calculate',
-					calc: function(dataset) {
+					calc(dataset) {
 						return this.calcData.bmiApi.methods.bmi(this.calcData.person, dataset.weight)
 					},
 					calcData: {
diff --git a/src/modules/weight/contentParts/TextResultsGainWeight.vue b/src/modules/weight/contentParts/TextResultsGainWeight.vue
index 35758e06..8d220676 100644
--- a/src/modules/weight/contentParts/TextResultsGainWeight.vue
+++ b/src/modules/weight/contentParts/TextResultsGainWeight.vue
@@ -83,14 +83,14 @@ export default {
 			default: '',
 		},
 	},
-	data: function() {
+	data() {
 		return {
 		}
 	},
 	computed: {
 		...mapState(['activeModule', 'showSidebar', 'weightData']),
 		...mapGetters(['person']),
-		getProgressbarValue: function() {
+		getProgressbarValue() {
 			if (!this.weight || !this.initialWeight) {
 				return null
 			}
@@ -98,13 +98,13 @@ export default {
 			const result = Math.round((100 - ((this.diff / wantToAdd)) * 100) * 100) / 100
 			return (result > 100) ? 100 : result
 		},
-		diff: function() {
+		diff() {
 			return Math.round((this.weight - this.initialWeight) * 100) / 100
 		},
-		toGo: function() {
+		toGo() {
 			return Math.round((this.target - this.weight) * 100) / 100
 		},
-		transValues: function() {
+		transValues() {
 			return {
 				unit: this.unit,
 				weight: this.weight,
diff --git a/src/modules/weight/contentParts/TextResultsLooseWeight.vue b/src/modules/weight/contentParts/TextResultsLooseWeight.vue
index dc6743c2..c608000b 100644
--- a/src/modules/weight/contentParts/TextResultsLooseWeight.vue
+++ b/src/modules/weight/contentParts/TextResultsLooseWeight.vue
@@ -86,7 +86,7 @@ export default {
 	computed: {
 		...mapState(['activeModule', 'showSidebar', 'weightData']),
 		...mapGetters(['person']),
-		getProgressbarValue: function() {
+		getProgressbarValue() {
 			if (!this.weight || !this.initialWeight) {
 				return null
 			}
@@ -94,13 +94,13 @@ export default {
 			const result = Math.round((100 - ((this.diff / wantToLoose)) * 100) * 100) / 100
 			return (result > 100) ? 100 : result
 		},
-		diff: function() {
+		diff() {
 			return Math.round((this.initialWeight - this.weight) * 100) / 100
 		},
-		toGo: function() {
+		toGo() {
 			return Math.round((this.weight - this.target) * 100) / 100
 		},
-		transValues: function() {
+		transValues() {
 			return {
 				unit: this.unit,
 				weight: this.weight,
diff --git a/src/store/PersonApi.js b/src/store/PersonApi.js
index 9e4f0f40..e654b56f 100644
--- a/src/store/PersonApi.js
+++ b/src/store/PersonApi.js
@@ -46,7 +46,7 @@ export class PersonApi {
 	}
 
 	addPerson(name) {
-		return axios.post(this.url(''), { name: name })
+		return axios.post(this.url(''), { name })
 			.then(
 				(response) => {
 					return Promise.resolve(response.data)
@@ -76,7 +76,7 @@ export class PersonApi {
 	}
 
 	updateValue(personId, key, value) {
-		return axios.put(this.url(`/${personId}`), { key: key, value: '' + value })
+		return axios.put(this.url(`/${personId}`), { key, value: '' + value })
 			.then(
 				(response) => {
 					return Promise.resolve(response.data)
diff --git a/stylelint.config.js b/stylelint.config.js
new file mode 100644
index 00000000..dccfca1b
--- /dev/null
+++ b/stylelint.config.js
@@ -0,0 +1,32 @@
+module.exports = {
+	extends: 'stylelint-config-recommended-scss',
+	rules: {
+		indentation: 'tab',
+		'selector-type-no-unknown': null,
+		'number-leading-zero': null,
+		'rule-empty-line-before': [
+			'always',
+			{
+				ignore: ['after-comment', 'inside-block'],
+			}
+		],
+		'declaration-empty-line-before': [
+			'never',
+			{
+				ignore: ['after-declaration'],
+			},
+		],
+		'comment-empty-line-before': null,
+		'selector-type-case': null,
+		'selector-list-comma-newline-after': null,
+		'no-descending-specificity': null,
+		'string-quotes': 'single',
+		'selector-pseudo-element-no-unknown': [
+			true,
+			{
+				ignorePseudoElements: ['v-deep'],
+			},
+		],
+	},
+	plugins: ['stylelint-scss'],
+}
diff --git a/webpack.common.js b/webpack.common.js
deleted file mode 100644
index 0c93294b..00000000
--- a/webpack.common.js
+++ /dev/null
@@ -1,56 +0,0 @@
-const path = require('path')
-const { VueLoaderPlugin } = require('vue-loader')
-const StyleLintPlugin = require('stylelint-webpack-plugin')
-const BundleAnalyzerPlugin = require('@bundle-analyzer/webpack-plugin')
-
-const config = {
-	entry: path.join(__dirname, 'src', 'main.js'),
-	output: {
-		path: path.resolve(__dirname, './js'),
-		publicPath: '/js/',
-		filename: `health.js`,
-		chunkFilename: 'chunks/[name]-[hash].js',
-	},
-	module: {
-		rules: [
-			{
-				test: /\.css$/,
-				use: ['vue-style-loader', 'css-loader'],
-			},
-			{
-				test: /\.scss$/,
-				use: ['vue-style-loader', 'css-loader', 'sass-loader'],
-			},
-			{
-				test: /\.(js|vue)$/,
-				use: 'eslint-loader',
-				exclude: /node_modules/,
-				enforce: 'pre',
-			},
-			{
-				test: /\.vue$/,
-				loader: 'vue-loader',
-				exclude: /node_modules/,
-			},
-			{
-				test: /\.js$/,
-				loader: 'babel-loader',
-				exclude: /node_modules/,
-			},
-		],
-	},
-	plugins: [
-		new VueLoaderPlugin(),
-		new StyleLintPlugin(),
-	],
-	resolve: {
-		extensions: ['*', '.js', '.vue'],
-		symlinks: false,
-	},
-}
-
-if (process.env.BUNDLE_ANALYZER_TOKEN) {
-	config.plugins.push(new BundleAnalyzerPlugin({ token: process.env.BUNDLE_ANALYZER_TOKEN }))
-}
-
-module.exports = config
diff --git a/webpack.dev.js b/webpack.dev.js
deleted file mode 100644
index 9db5011a..00000000
--- a/webpack.dev.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const merge = require('webpack-merge');
-const common = require('./webpack.common.js');
-
-module.exports = merge(common, {
-  mode: 'development',
-  devtool: '#cheap-source-map',
-})
diff --git a/webpack.js b/webpack.js
new file mode 100644
index 00000000..e5daa927
--- /dev/null
+++ b/webpack.js
@@ -0,0 +1,3 @@
+const webpackConfig = require('@nextcloud/webpack-vue-config')
+
+module.exports = webpackConfig
diff --git a/webpack.prod.js b/webpack.prod.js
deleted file mode 100644
index 7e633710..00000000
--- a/webpack.prod.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const merge = require('webpack-merge')
-const common = require('./webpack.common.js')
-
-module.exports = merge(common, {
-	mode: 'production',
-	devtool: '#source-map'
-})