diff --git a/src/App.vue b/src/App.vue
index b1d044f38..cefef4845 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -43,11 +43,10 @@
 
 <script>
 import { mapState } from 'vuex'
-import AppNavigation from './components/navigation/AppNavigation'
 import { Modal, Content, AppContent } from '@nextcloud/vue'
-import { BoardApi } from './services/BoardApi'
 import { emit, subscribe } from '@nextcloud/event-bus'
-
+import AppNavigation from './components/navigation/AppNavigation.vue'
+import { BoardApi } from './services/BoardApi.js'
 const boardApi = new BoardApi()
 
 export default {
diff --git a/src/CardCreateDialog.vue b/src/CardCreateDialog.vue
index 113e6e867..0340b7cae 100644
--- a/src/CardCreateDialog.vue
+++ b/src/CardCreateDialog.vue
@@ -96,7 +96,7 @@ import Modal from '@nextcloud/vue/dist/Components/Modal'
 import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
 import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
 import axios from '@nextcloud/axios'
-import { CardApi } from './services/CardApi'
+import { CardApi } from './services/CardApi.js'
 
 const cardApi = new CardApi()
 
diff --git a/src/components/ActivityEntry.vue b/src/components/ActivityEntry.vue
index a88dee680..d32d496ed 100644
--- a/src/components/ActivityEntry.vue
+++ b/src/components/ActivityEntry.vue
@@ -30,7 +30,9 @@
 			</div>
 		</div>
 		<!-- FIXME ins/del tags do no longer work with activity so we should get rid of that -->
+		<!-- eslint-disable vue/no-v-html -->
 		<p v-if="activity.message" class="activity--message" v-html="sanitizedMessage" />
+		<!-- eslint-enable -->
 	</div>
 </template>
 
@@ -39,7 +41,7 @@ import RichText from '@juliushaertl/vue-richtext'
 import { UserBubble } from '@nextcloud/vue'
 import moment from '@nextcloud/moment'
 import DOMPurify from 'dompurify'
-import relativeDate from '../mixins/relativeDate'
+import relativeDate from '../mixins/relativeDate.js'
 
 const InternalLink = {
 	name: 'InternalLink',
diff --git a/src/components/ActivityList.vue b/src/components/ActivityList.vue
index 597058527..fa1eb7df2 100644
--- a/src/components/ActivityList.vue
+++ b/src/components/ActivityList.vue
@@ -37,7 +37,7 @@
 <script>
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
-import ActivityEntry from './ActivityEntry'
+import ActivityEntry from './ActivityEntry.vue'
 import InfiniteLoading from 'vue-infinite-loading'
 
 const ACTIVITY_FETCH_LIMIT = 50
diff --git a/src/components/AttachmentDragAndDrop.vue b/src/components/AttachmentDragAndDrop.vue
index 37f31722c..49f60d3f5 100644
--- a/src/components/AttachmentDragAndDrop.vue
+++ b/src/components/AttachmentDragAndDrop.vue
@@ -63,7 +63,7 @@
 
 <script>
 import { Modal } from '@nextcloud/vue'
-import attachmentUpload from '../mixins/attachmentUpload'
+import attachmentUpload from '../mixins/attachmentUpload.js'
 import { loadState } from '@nextcloud/initial-state'
 
 let maxUploadSizeState
diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index b70c36759..06152096a 100644
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -203,8 +203,8 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 import { Actions, ActionButton, Popover, Avatar } from '@nextcloud/vue'
-import labelStyle from '../mixins/labelStyle'
-import CardCreateDialog from '../CardCreateDialog'
+import labelStyle from '../mixins/labelStyle.js'
+import CardCreateDialog from '../CardCreateDialog.vue'
 import ArchiveIcon from 'vue-material-design-icons/Archive'
 import FilterIcon from 'vue-material-design-icons/Filter'
 import FilterOffIcon from 'vue-material-design-icons/FilterOff'
diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index d29570ce3..43e938dc1 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -72,12 +72,12 @@
 <script>
 
 import { Container, Draggable } from 'vue-smooth-dnd'
-import { mapState, mapGetters } from 'vuex'
-import Controls from '../Controls'
-import Stack from './Stack'
 import { EmptyContent } from '@nextcloud/vue'
-import GlobalSearchResults from '../search/GlobalSearchResults'
-import { showError } from '../../helpers/errors'
+import { mapState, mapGetters } from 'vuex'
+import Controls from '../Controls.vue'
+import Stack from './Stack.vue'
+import GlobalSearchResults from '../search/GlobalSearchResults.vue'
+import { showError } from '../../helpers/errors.js'
 
 export default {
 	name: 'Board',
diff --git a/src/components/board/BoardSidebar.vue b/src/components/board/BoardSidebar.vue
index 85f29c90f..9e943bd44 100644
--- a/src/components/board/BoardSidebar.vue
+++ b/src/components/board/BoardSidebar.vue
@@ -59,10 +59,10 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import SharingTabSidebar from './SharingTabSidebar'
-import TagsTabSidebar from './TagsTabSidebar'
-import DeletedTabSidebar from './DeletedTabSidebar'
-import TimelineTabSidebar from './TimelineTabSidebar'
+import SharingTabSidebar from './SharingTabSidebar.vue'
+import TagsTabSidebar from './TagsTabSidebar.vue'
+import DeletedTabSidebar from './DeletedTabSidebar.vue'
+import TimelineTabSidebar from './TimelineTabSidebar.vue'
 import { AppSidebar, AppSidebarTab } from '@nextcloud/vue'
 
 const capabilities = window.OC.getCapabilities()
diff --git a/src/components/board/DeletedTabSidebar.vue b/src/components/board/DeletedTabSidebar.vue
index a2df35953..4e0d307e9 100644
--- a/src/components/board/DeletedTabSidebar.vue
+++ b/src/components/board/DeletedTabSidebar.vue
@@ -32,7 +32,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import relativeDate from '../../mixins/relativeDate'
+import relativeDate from '../../mixins/relativeDate.js'
 
 export default {
 	name: 'DeletedTabSidebar',
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 154380b48..ea4d25b39 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -121,7 +121,7 @@ import { Container, Draggable } from 'vue-smooth-dnd'
 
 import { Actions, ActionButton, Modal } from '@nextcloud/vue'
 import { showError, showUndo } from '@nextcloud/dialogs'
-import CardItem from '../cards/CardItem'
+import CardItem from '../cards/CardItem.vue'
 
 import '@nextcloud/dialogs/styles/toast.scss'
 import ArchiveIcon from 'vue-material-design-icons/Archive'
diff --git a/src/components/board/TagsTabSidebar.vue b/src/components/board/TagsTabSidebar.vue
index 4087addbb..603f04c74 100644
--- a/src/components/board/TagsTabSidebar.vue
+++ b/src/components/board/TagsTabSidebar.vue
@@ -70,7 +70,7 @@
 <script>
 
 import { mapGetters } from 'vuex'
-import Color from '../../mixins/color'
+import Color from '../../mixins/color.js'
 import { ColorPicker, Actions, ActionButton } from '@nextcloud/vue'
 
 export default {
diff --git a/src/components/board/TimelineTabSidebar.vue b/src/components/board/TimelineTabSidebar.vue
index a65ff3853..5b71f4d24 100644
--- a/src/components/board/TimelineTabSidebar.vue
+++ b/src/components/board/TimelineTabSidebar.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import ActivityList from '../ActivityList'
+import ActivityList from '../ActivityList.vue'
 
 export default {
 	name: 'TimelineTabSidebar',
diff --git a/src/components/boards/Boards.vue b/src/components/boards/Boards.vue
index 0cd8133a5..512052e91 100644
--- a/src/components/boards/Boards.vue
+++ b/src/components/boards/Boards.vue
@@ -43,8 +43,8 @@
 
 <script>
 
-import BoardItem from './BoardItem'
-import Controls from '../Controls'
+import BoardItem from './BoardItem.vue'
+import Controls from '../Controls.vue'
 
 export default {
 	name: 'Boards',
diff --git a/src/components/card/AttachmentList.vue b/src/components/card/AttachmentList.vue
index f6cbd7053..2b256f201 100644
--- a/src/components/card/AttachmentList.vue
+++ b/src/components/card/AttachmentList.vue
@@ -104,15 +104,16 @@
 <script>
 import axios from '@nextcloud/axios'
 import { Actions, ActionButton, ActionLink } from '@nextcloud/vue'
-import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
-import relativeDate from '../../mixins/relativeDate'
 import { formatFileSize } from '@nextcloud/files'
 import { getCurrentUser } from '@nextcloud/auth'
 import { generateUrl, generateOcsUrl, generateRemoteUrl } from '@nextcloud/router'
 import { mapState, mapActions } from 'vuex'
 import { loadState } from '@nextcloud/initial-state'
-import attachmentUpload from '../../mixins/attachmentUpload'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
+import AttachmentDragAndDrop from '../AttachmentDragAndDrop.vue'
+import relativeDate from '../../mixins/relativeDate.js'
+import attachmentUpload from '../../mixins/attachmentUpload.js'
+
 const maxUploadSizeState = loadState('deck', 'maxUploadSize')
 
 const picker = getFilePickerBuilder(t('deck', 'File to share'))
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index c5fca4157..f3ffb6d4c 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -84,17 +84,16 @@
 <script>
 import { ActionButton, AppSidebar, AppSidebarTab } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
-import { mapState, mapGetters } from 'vuex'
-import CardSidebarTabDetails from './CardSidebarTabDetails'
-import CardSidebarTabAttachments from './CardSidebarTabAttachments'
-import CardSidebarTabComments from './CardSidebarTabComments'
-import CardSidebarTabActivity from './CardSidebarTabActivity'
-import relativeDate from '../../mixins/relativeDate'
-import moment from '@nextcloud/moment'
-import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
-
 import { showError } from '@nextcloud/dialogs'
 import { getLocale } from '@nextcloud/l10n'
+import moment from '@nextcloud/moment'
+import { mapState, mapGetters } from 'vuex'
+import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
+import CardSidebarTabDetails from './CardSidebarTabDetails.vue'
+import CardSidebarTabAttachments from './CardSidebarTabAttachments.vue'
+import CardSidebarTabComments from './CardSidebarTabComments.vue'
+import CardSidebarTabActivity from './CardSidebarTabActivity.vue'
+import relativeDate from '../../mixins/relativeDate.js'
 
 const capabilities = window.OC.getCapabilities()
 
diff --git a/src/components/card/CardSidebarTabActivity.vue b/src/components/card/CardSidebarTabActivity.vue
index 60d18790d..8b6e1f0cb 100644
--- a/src/components/card/CardSidebarTabActivity.vue
+++ b/src/components/card/CardSidebarTabActivity.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import ActivityList from '../ActivityList'
+import ActivityList from '../ActivityList.vue'
 
 export default {
 	name: 'CardSidebarTabActivity',
diff --git a/src/components/card/CardSidebarTabAttachments.vue b/src/components/card/CardSidebarTabAttachments.vue
index 06dbd6662..54e03be8e 100644
--- a/src/components/card/CardSidebarTabAttachments.vue
+++ b/src/components/card/CardSidebarTabAttachments.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import AttachmentList from './AttachmentList'
+import AttachmentList from './AttachmentList.vue'
 export default {
 	name: 'CardSidebarTabAttachments',
 	components: {
diff --git a/src/components/card/CardSidebarTabComments.vue b/src/components/card/CardSidebarTabComments.vue
index d10260cb6..7b07cc1d3 100644
--- a/src/components/card/CardSidebarTabComments.vue
+++ b/src/components/card/CardSidebarTabComments.vue
@@ -36,8 +36,8 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 import { Avatar } from '@nextcloud/vue'
-import CommentItem from './CommentItem'
-import CommentForm from './CommentForm'
+import CommentItem from './CommentItem.vue'
+import CommentForm from './CommentForm.vue'
 import InfiniteLoading from 'vue-infinite-loading'
 import { getCurrentUser } from '@nextcloud/auth'
 
diff --git a/src/components/card/CardSidebarTabDetails.vue b/src/components/card/CardSidebarTabDetails.vue
index c7d6ad053..72e3156f7 100644
--- a/src/components/card/CardSidebarTabDetails.vue
+++ b/src/components/card/CardSidebarTabDetails.vue
@@ -128,14 +128,14 @@ import moment from '@nextcloud/moment'
 import { Avatar, Actions, ActionButton, Multiselect, DatetimePicker } from '@nextcloud/vue'
 
 import { CollectionList } from 'nextcloud-vue-collections'
-import Color from '../../mixins/color'
+import Color from '../../mixins/color.js'
 import {
 	getLocale,
 	getDayNamesMin,
 	getFirstDay,
 	getMonthNamesShort,
 } from '@nextcloud/l10n'
-import Description from './Description'
+import Description from './Description.vue'
 
 export default {
 	name: 'CardSidebarTabDetails',
diff --git a/src/components/card/CommentForm.vue b/src/components/card/CommentForm.vue
index 6d5a14a41..c1d0fe3b2 100644
--- a/src/components/card/CommentForm.vue
+++ b/src/components/card/CommentForm.vue
@@ -65,7 +65,7 @@
 import { mapState } from 'vuex'
 import { UserBubble, Avatar } from '@nextcloud/vue'
 import At from 'vue-at'
-import { rawToParsed } from '../../helpers/mentions'
+import { rawToParsed } from '../../helpers/mentions.js'
 
 export default {
 	name: 'CommentForm',
diff --git a/src/components/card/CommentItem.vue b/src/components/card/CommentItem.vue
index 5b1ad9f67..fc3c1f112 100644
--- a/src/components/card/CommentItem.vue
+++ b/src/components/card/CommentItem.vue
@@ -66,10 +66,10 @@
 <script>
 import { Avatar, Actions, ActionButton, UserBubble } from '@nextcloud/vue'
 import RichText from '@juliushaertl/vue-richtext'
-import CommentForm from './CommentForm'
+import CommentForm from './CommentForm.vue'
 import { getCurrentUser } from '@nextcloud/auth'
 import md5 from 'blueimp-md5'
-import relativeDate from '../../mixins/relativeDate'
+import relativeDate from '../../mixins/relativeDate.js'
 import ReplyIcon from 'vue-material-design-icons/Reply'
 
 const AtMention = {
diff --git a/src/components/card/Description.vue b/src/components/card/Description.vue
index 8b83fa584..835ca6f83 100644
--- a/src/components/card/Description.vue
+++ b/src/components/card/Description.vue
@@ -48,10 +48,12 @@
 			</Actions>
 		</h5>
 
+		<!-- eslint-disable vue/no-v-html -->
 		<div v-if="!descriptionEditing && hasDescription"
 			id="description-preview"
 			@click="clickedPreview"
 			v-html="renderedDescription" />
+		<!-- eslint-enable -->
 		<p v-else-if="!descriptionEditing" class="placeholder" @click="showEditor()">
 			{{ t('deck', 'Write a description …') }}
 		</p>
@@ -78,7 +80,7 @@
 import MarkdownIt from 'markdown-it'
 import MarkdownItTaskLists from 'markdown-it-task-lists'
 import MarkdownItLinkAttributes from 'markdown-it-link-attributes'
-import AttachmentList from './AttachmentList'
+import AttachmentList from './AttachmentList.vue'
 import { Actions, ActionButton, Modal } from '@nextcloud/vue'
 import { formatFileSize } from '@nextcloud/files'
 import { generateUrl } from '@nextcloud/router'
diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index 643ec4358..5d7b207d6 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -49,8 +49,8 @@
 	</div>
 </template>
 <script>
-import AvatarList from './AvatarList'
-import CardMenu from './CardMenu'
+import AvatarList from './AvatarList.vue'
+import CardMenu from './CardMenu.vue'
 import TextIcon from 'vue-material-design-icons/Text.vue'
 import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
 import CheckmarkIcon from 'vue-material-design-icons/CheckboxMarked.vue'
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index f82f78001..1932011b3 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -79,12 +79,12 @@
 <script>
 import ClickOutside from 'vue-click-outside'
 import { mapState, mapGetters } from 'vuex'
-import CardBadges from './CardBadges'
-import Color from '../../mixins/color'
-import labelStyle from '../../mixins/labelStyle'
-import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
-import CardMenu from './CardMenu'
-import DueDate from './badges/DueDate'
+import CardBadges from './CardBadges.vue'
+import Color from '../../mixins/color.js'
+import labelStyle from '../../mixins/labelStyle.js'
+import AttachmentDragAndDrop from '../AttachmentDragAndDrop.vue'
+import CardMenu from './CardMenu.vue'
+import DueDate from './badges/DueDate.vue'
 
 export default {
 	name: 'CardItem',
diff --git a/src/components/navigation/AppNavigation.vue b/src/components/navigation/AppNavigation.vue
index 2f10317d3..20ffd3f41 100644
--- a/src/components/navigation/AppNavigation.vue
+++ b/src/components/navigation/AppNavigation.vue
@@ -96,8 +96,8 @@ import axios from '@nextcloud/axios'
 import { mapGetters } from 'vuex'
 import ClickOutside from 'vue-click-outside'
 import { AppNavigation as AppNavigationVue, AppNavigationItem, AppNavigationSettings, Multiselect } from '@nextcloud/vue'
-import AppNavigationAddBoard from './AppNavigationAddBoard'
-import AppNavigationBoardCategory from './AppNavigationBoardCategory'
+import AppNavigationAddBoard from './AppNavigationAddBoard.vue'
+import AppNavigationBoardCategory from './AppNavigationBoardCategory.vue'
 import { loadState } from '@nextcloud/initial-state'
 import { generateOcsUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
diff --git a/src/components/navigation/AppNavigationBoardCategory.vue b/src/components/navigation/AppNavigationBoardCategory.vue
index be308e6c7..58e538b9b 100644
--- a/src/components/navigation/AppNavigationBoardCategory.vue
+++ b/src/components/navigation/AppNavigationBoardCategory.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import AppNavigationBoard from './AppNavigationBoard'
+import AppNavigationBoard from './AppNavigationBoard.vue'
 import { AppNavigationItem } from '@nextcloud/vue'
 
 export default {
diff --git a/src/components/overview/Overview.vue b/src/components/overview/Overview.vue
index f097034c3..a7dedef39 100644
--- a/src/components/overview/Overview.vue
+++ b/src/components/overview/Overview.vue
@@ -80,11 +80,11 @@
 
 <script>
 
-import Controls from '../Controls'
-import CardItem from '../cards/CardItem'
+import Controls from '../Controls.vue'
+import CardItem from '../cards/CardItem.vue'
 import { mapGetters } from 'vuex'
 import moment from '@nextcloud/moment'
-import GlobalSearchResults from '../search/GlobalSearchResults'
+import GlobalSearchResults from '../search/GlobalSearchResults.vue'
 
 const FILTER_UPCOMING = 'upcoming'
 
diff --git a/src/components/search/GlobalSearchResults.vue b/src/components/search/GlobalSearchResults.vue
index b18bc5089..2239ec846 100644
--- a/src/components/search/GlobalSearchResults.vue
+++ b/src/components/search/GlobalSearchResults.vue
@@ -52,13 +52,13 @@
 </template>
 
 <script>
-import CardItem from '../cards/CardItem'
+import CardItem from '../cards/CardItem.vue'
 import { mapState } from 'vuex'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import InfiniteLoading from 'vue-infinite-loading'
 import RichText from '@juliushaertl/vue-richtext'
-import Placeholder from './Placeholder'
+import Placeholder from './Placeholder.vue'
 import { Actions, ActionButton } from '@nextcloud/vue'
 
 const createCancelToken = () => axios.CancelToken.source()
diff --git a/src/init-collections.js b/src/init-collections.js
index 8c1f2024c..f26565ee4 100644
--- a/src/init-collections.js
+++ b/src/init-collections.js
@@ -23,8 +23,8 @@
 import Vue from 'vue'
 
 import './../css/collections.css'
-import FileSharingPicker from './views/FileSharingPicker'
-import { buildSelector } from './helpers/selector'
+import FileSharingPicker from './views/FileSharingPicker.js'
+import { buildSelector } from './helpers/selector.js'
 
 // eslint-disable-next-line
 __webpack_nonce__ = btoa(OC.requestToken);
@@ -44,7 +44,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
 	window.OCP.Collaboration.registerType('deck', {
 		action: () => {
-			const BoardSelector = () => import('./BoardSelector')
+			const BoardSelector = () => import('./BoardSelector.vue')
 			return buildSelector(BoardSelector)
 		},
 		typeString: t('deck', 'Link to a board'),
@@ -53,7 +53,7 @@ window.addEventListener('DOMContentLoaded', () => {
 
 	window.OCP.Collaboration.registerType('deck-card', {
 		action: () => {
-			const CardSelector = () => import('./CardSelector')
+			const CardSelector = () => import('./CardSelector.vue')
 			return buildSelector(CardSelector)
 		},
 		typeString: t('deck', 'Link to a card'),
diff --git a/src/init-dashboard.js b/src/init-dashboard.js
index e4f6a741b..0be9e3021 100644
--- a/src/init-dashboard.js
+++ b/src/init-dashboard.js
@@ -21,9 +21,9 @@
  */
 
 import Vue from 'vue'
-import Vuex from 'vuex'
+import Vuex, { Store } from 'vuex'
 
-import overview from './store/overview'
+import overview from './store/overview.js'
 
 import './css/dashboard.scss'
 
@@ -33,7 +33,7 @@ Vue.use(Vuex)
 
 const debug = process.env.NODE_ENV !== 'production'
 
-const store = new Vuex.Store({
+const store = new Store({
 	modules: {
 		overview,
 	},
diff --git a/src/init-talk.js b/src/init-talk.js
index 3998a4a88..943cbe22b 100644
--- a/src/init-talk.js
+++ b/src/init-talk.js
@@ -23,9 +23,9 @@
 import Vue from 'vue'
 import { generateUrl } from '@nextcloud/router'
 
-import CardCreateDialog from './CardCreateDialog'
-import { buildSelector } from './helpers/selector'
-import './init-collections'
+import CardCreateDialog from './CardCreateDialog.vue'
+import { buildSelector } from './helpers/selector.js'
+import './init-collections.js'
 
 // eslint-disable-next-line
 __webpack_nonce__ = btoa(OC.requestToken);
diff --git a/src/main.js b/src/main.js
index 70741d06d..ae73e1b4a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -20,9 +20,6 @@
  *
  */
 import Vue from 'vue'
-import App from './App'
-import router from './router'
-import store from './store/main'
 import { sync } from 'vuex-router-sync'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import { generateFilePath } from '@nextcloud/router'
@@ -30,7 +27,10 @@ import { showError } from '@nextcloud/dialogs'
 import { subscribe } from '@nextcloud/event-bus'
 import { Tooltip } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
-import './models'
+import App from './App.vue'
+import router from './router.js'
+import store from './store/main.js'
+import './models/index.js'
 
 // the server snap.js conflicts with vertical scrolling so we disable it
 document.body.setAttribute('data-snap-ignore', 'true')
diff --git a/src/mixins/labelStyle.js b/src/mixins/labelStyle.js
index 8fe1d62b9..3f91b68bb 100644
--- a/src/mixins/labelStyle.js
+++ b/src/mixins/labelStyle.js
@@ -20,7 +20,7 @@
  *
  */
 
-import Color from './color'
+import Color from './color.js'
 
 export default {
 	mixins: [Color],
diff --git a/src/router.js b/src/router.js
index ca0657395..4a4fa961a 100644
--- a/src/router.js
+++ b/src/router.js
@@ -23,13 +23,13 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import { generateUrl } from '@nextcloud/router'
-import { BOARD_FILTERS } from './store/main'
-import Boards from './components/boards/Boards'
-import Board from './components/board/Board'
-import Sidebar from './components/Sidebar'
-import BoardSidebar from './components/board/BoardSidebar'
-import CardSidebar from './components/card/CardSidebar'
-import Overview from './components/overview/Overview'
+import { BOARD_FILTERS } from './store/main.js'
+import Boards from './components/boards/Boards.vue'
+import Board from './components/board/Board.vue'
+import Sidebar from './components/Sidebar.vue'
+import BoardSidebar from './components/board/BoardSidebar.vue'
+import CardSidebar from './components/card/CardSidebar.vue'
+import Overview from './components/overview/Overview.vue'
 
 Vue.use(Router)
 
diff --git a/src/services/BoardApi.js b/src/services/BoardApi.js
index f6e2e8091..3667f9eaf 100644
--- a/src/services/BoardApi.js
+++ b/src/services/BoardApi.js
@@ -22,7 +22,7 @@
 
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
-import './../models'
+import './../models/index.js'
 
 /**
  * This class handles all the api communication with the Deck backend.
diff --git a/src/services/StackApi.js b/src/services/StackApi.js
index 5e2322f93..b55730e15 100644
--- a/src/services/StackApi.js
+++ b/src/services/StackApi.js
@@ -22,7 +22,7 @@
 
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
-import './../models'
+import './../models/index.js'
 
 export class StackApi {
 
diff --git a/src/store/attachment.js b/src/store/attachment.js
index 1115b3405..c0db49e37 100644
--- a/src/store/attachment.js
+++ b/src/store/attachment.js
@@ -20,7 +20,7 @@
  *
  */
 
-import { AttachmentApi } from './../services/AttachmentApi'
+import { AttachmentApi } from './../services/AttachmentApi.js'
 import Vue from 'vue'
 
 const apiClient = new AttachmentApi()
diff --git a/src/store/card.js b/src/store/card.js
index 1c339ece0..4c2a902a6 100644
--- a/src/store/card.js
+++ b/src/store/card.js
@@ -20,7 +20,7 @@
  *
  */
 
-import { CardApi } from './../services/CardApi'
+import { CardApi } from './../services/CardApi.js'
 import moment from 'moment'
 import Vue from 'vue'
 
diff --git a/src/store/comment.js b/src/store/comment.js
index ad58a5719..69a0b35b4 100644
--- a/src/store/comment.js
+++ b/src/store/comment.js
@@ -20,7 +20,7 @@
  *
  */
 
-import { CommentApi } from '../services/CommentApi'
+import { CommentApi } from '../services/CommentApi.js'
 import Vue from 'vue'
 
 const apiClient = new CommentApi()
diff --git a/src/store/main.js b/src/store/main.js
index 9c65509bc..446895067 100644
--- a/src/store/main.js
+++ b/src/store/main.js
@@ -24,17 +24,17 @@ import 'url-search-params-polyfill'
 
 import { loadState } from '@nextcloud/initial-state'
 import Vue from 'vue'
-import Vuex from 'vuex'
+import Vuex, { Store } from 'vuex'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl, generateUrl } from '@nextcloud/router'
-import { BoardApi } from '../services/BoardApi'
-import actions from './actions'
-import stack from './stack'
-import card from './card'
-import comment from './comment'
-import trashbin from './trashbin'
-import attachment from './attachment'
-import overview from './overview'
+import { BoardApi } from '../services/BoardApi.js'
+import actions from './actions.js'
+import stack from './stack.js'
+import card from './card.js'
+import comment from './comment.js'
+import trashbin from './trashbin.js'
+import attachment from './attachment.js'
+import overview from './overview.js'
 Vue.use(Vuex)
 
 const apiClient = new BoardApi()
@@ -46,7 +46,7 @@ export const BOARD_FILTERS = {
 	SHARED: 'shared',
 }
 
-export default new Vuex.Store({
+export default new Store({
 	modules: {
 		actions,
 		stack,
diff --git a/src/store/overview.js b/src/store/overview.js
index 214ec2901..e6eeb3c02 100644
--- a/src/store/overview.js
+++ b/src/store/overview.js
@@ -22,7 +22,7 @@
 
 import Vue from 'vue'
 import Vuex from 'vuex'
-import { OverviewApi } from '../services/OverviewApi'
+import { OverviewApi } from '../services/OverviewApi.js'
 Vue.use(Vuex)
 
 const apiClient = new OverviewApi()
diff --git a/src/store/stack.js b/src/store/stack.js
index bbb0486be..f55d6211d 100644
--- a/src/store/stack.js
+++ b/src/store/stack.js
@@ -21,8 +21,8 @@
  */
 
 import Vue from 'vue'
-import { StackApi } from './../services/StackApi'
-import applyOrderToArray from './../helpers/applyOrderToArray'
+import { StackApi } from './../services/StackApi.js'
+import applyOrderToArray from './../helpers/applyOrderToArray.js'
 
 const apiClient = new StackApi()
 
diff --git a/src/store/trashbin.js b/src/store/trashbin.js
index c508b88a5..fc90df623 100644
--- a/src/store/trashbin.js
+++ b/src/store/trashbin.js
@@ -20,8 +20,8 @@
  *
  */
 
-import { StackApi } from '../services/StackApi'
-import { CardApi } from '../services/CardApi'
+import { StackApi } from '../services/StackApi.js'
+import { CardApi } from '../services/CardApi.js'
 
 const stackApi = new StackApi()
 const cardApi = new CardApi()
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index e49851a62..1cf5909ac 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -59,10 +59,10 @@
 <script>
 import { DashboardWidget } from '@nextcloud/vue-dashboard'
 import { mapGetters } from 'vuex'
-import labelStyle from './../mixins/labelStyle'
-import DueDate from '../components/cards/badges/DueDate'
+import labelStyle from './../mixins/labelStyle.js'
+import DueDate from '../components/cards/badges/DueDate.vue'
 import { generateUrl } from '@nextcloud/router'
-import CardCreateDialog from '../CardCreateDialog'
+import CardCreateDialog from '../CardCreateDialog.vue'
 
 export default {
 	name: 'Dashboard',
diff --git a/src/views/FileSharingPicker.js b/src/views/FileSharingPicker.js
index 099d1f4b9..af6eeb90b 100644
--- a/src/views/FileSharingPicker.js
+++ b/src/views/FileSharingPicker.js
@@ -21,7 +21,7 @@
  */
 
 import Vue from 'vue'
-import { createShare } from '../services/SharingApi'
+import { createShare } from '../services/SharingApi.js'
 
 export default {
 	icon: 'icon-deck',
@@ -33,7 +33,7 @@ export default {
 			container.id = 'deck-board-select'
 			const body = document.getElementById('body-user')
 			body.append(container)
-			const CardSelector = () => import('./../CardSelector')
+			const CardSelector = () => import('./../CardSelector.vue')
 			const ComponentVM = new Vue({
 				render: (h) => h(CardSelector, {
 					title: t('deck', 'Share {file} with a Deck card', { file: decodeURIComponent(self.fileInfo.name) }),