diff --git a/front/src/audio/volume.js b/front/src/audio/volume.js
index 1b7e2bc62..5a9ad05f6 100644
--- a/front/src/audio/volume.js
+++ b/front/src/audio/volume.js
@@ -1,6 +1,6 @@
 const DYNAMIC_RANGE = 40 // dB
 
-function toLinearVolumeScale (v) {
+export function toLinearVolumeScale (v) {
   if (v <= 0.0) {
     return 0.0
   }
@@ -11,7 +11,7 @@ function toLinearVolumeScale (v) {
   return Math.pow(10, dB / 20)
 }
 
-function toLogarithmicVolumeScale (v) {
+export function toLogarithmicVolumeScale (v) {
   if (v <= 0.0) {
     return 0.0
   }
diff --git a/front/src/components/Footer.vue b/front/src/components/Footer.vue
index 3f9641e18..b78d4844b 100644
--- a/front/src/components/Footer.vue
+++ b/front/src/components/Footer.vue
@@ -212,7 +212,7 @@
 
 <script>
 import { mapState } from 'vuex'
-import ThemesMixin from '@/components/mixins/Themes'
+import ThemesMixin from '@/components/mixins/Themes.vue'
 import _ from '@/lodash'
 
 export default {
diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index b823deee5..921927f9e 100644
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -346,7 +346,7 @@ import { mapState, mapGetters, mapActions } from 'vuex'
 import $ from 'jquery'
 import moment from 'moment'
 import lodash from '@/lodash'
-import time from '@/utils/time'
+import time from '@/utils/time.js'
 import { createFocusTrap } from 'focus-trap'
 
 export default {
diff --git a/front/src/components/admin/SettingsGroup.vue b/front/src/components/admin/SettingsGroup.vue
index 94e7620e8..4ee4603cd 100644
--- a/front/src/components/admin/SettingsGroup.vue
+++ b/front/src/components/admin/SettingsGroup.vue
@@ -162,7 +162,7 @@ import lodash from '@/lodash'
 
 export default {
   components: {
-    SignupFormBuilder: () => import(/* webpackChunkName: "signup-form-builder" */ '@/components/admin/SignupFormBuilder')
+    SignupFormBuilder: () => import(/* webpackChunkName: "signup-form-builder" */ '@/components/admin/SignupFormBuilder.vue')
   },
   props: {
     group: { type: Object, required: true },
diff --git a/front/src/components/admin/SignupFormBuilder.vue b/front/src/components/admin/SignupFormBuilder.vue
index 1eb29f632..90c0a87bb 100644
--- a/front/src/components/admin/SignupFormBuilder.vue
+++ b/front/src/components/admin/SignupFormBuilder.vue
@@ -163,7 +163,7 @@
 <script>
 import lodash from '@/lodash'
 
-import SignupForm from '@/components/auth/SignupForm'
+import SignupForm from '@/components/auth/SignupForm.vue'
 
 function arrayMove (arr, oldIndex, newIndex) {
   if (newIndex >= arr.length) {
diff --git a/front/src/components/audio/ChannelCard.vue b/front/src/components/audio/ChannelCard.vue
index 8578e69ff..382928b19 100644
--- a/front/src/components/audio/ChannelCard.vue
+++ b/front/src/components/audio/ChannelCard.vue
@@ -75,8 +75,8 @@
 </template>
 
 <script>
-import PlayButton from '@/components/audio/PlayButton'
-import TagsList from '@/components/tags/List'
+import PlayButton from '@/components/audio/PlayButton.vue'
+import TagsList from '@/components/tags/List.vue'
 
 import { momentFormat } from '@/filters'
 import moment from 'moment'
diff --git a/front/src/components/audio/ChannelEntries.vue b/front/src/components/audio/ChannelEntries.vue
index 21c4dc1c8..ff9e1ea7d 100644
--- a/front/src/components/audio/ChannelEntries.vue
+++ b/front/src/components/audio/ChannelEntries.vue
@@ -56,8 +56,8 @@
 <script>
 import _ from '@/lodash'
 import axios from 'axios'
-import PodcastTable from '@/components/audio/podcast/Table'
-import TrackTable from '@/components/audio/track/Table'
+import PodcastTable from '@/components/audio/podcast/Table.vue'
+import TrackTable from '@/components/audio/track/Table.vue'
 
 export default {
   components: {
diff --git a/front/src/components/audio/ChannelEntryCard.vue b/front/src/components/audio/ChannelEntryCard.vue
index 2ca1f93e0..b190f7519 100644
--- a/front/src/components/audio/ChannelEntryCard.vue
+++ b/front/src/components/audio/ChannelEntryCard.vue
@@ -77,8 +77,8 @@
 </template>
 
 <script>
-import PlayButton from '@/components/audio/PlayButton'
-import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
+import PlayButton from '@/components/audio/PlayButton.vue'
+import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon.vue'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/front/src/components/audio/ChannelForm.vue b/front/src/components/audio/ChannelForm.vue
index 3c96a9319..8426a8646 100644
--- a/front/src/components/audio/ChannelForm.vue
+++ b/front/src/components/audio/ChannelForm.vue
@@ -249,8 +249,8 @@
 <script>
 import axios from 'axios'
 
-import AttachmentInput from '@/components/common/AttachmentInput'
-import TagsSelector from '@/components/library/TagsSelector'
+import AttachmentInput from '@/components/common/AttachmentInput.vue'
+import TagsSelector from '@/components/library/TagsSelector.vue'
 
 function slugify (text) {
   return text.toString().toLowerCase()
diff --git a/front/src/components/audio/ChannelSerieCard.vue b/front/src/components/audio/ChannelSerieCard.vue
index ab5542f75..269cc4107 100644
--- a/front/src/components/audio/ChannelSerieCard.vue
+++ b/front/src/components/audio/ChannelSerieCard.vue
@@ -62,7 +62,7 @@
 </template>
 
 <script>
-import PlayButton from '@/components/audio/PlayButton'
+import PlayButton from '@/components/audio/PlayButton.vue'
 
 export default {
   components: {
diff --git a/front/src/components/audio/ChannelSeries.vue b/front/src/components/audio/ChannelSeries.vue
index 26b0aa0be..ed20b5e3a 100644
--- a/front/src/components/audio/ChannelSeries.vue
+++ b/front/src/components/audio/ChannelSeries.vue
@@ -55,8 +55,8 @@
 <script>
 import _ from '@/lodash'
 import axios from 'axios'
-import ChannelSerieCard from '@/components/audio/ChannelSerieCard'
-import AlbumCard from '@/components/audio/album/Card'
+import ChannelSerieCard from '@/components/audio/ChannelSerieCard.vue'
+import AlbumCard from '@/components/audio/album/Card.vue'
 
 export default {
   components: {
diff --git a/front/src/components/audio/ChannelsWidget.vue b/front/src/components/audio/ChannelsWidget.vue
index 68b26feaa..5974c5e75 100644
--- a/front/src/components/audio/ChannelsWidget.vue
+++ b/front/src/components/audio/ChannelsWidget.vue
@@ -39,7 +39,7 @@
 <script>
 import _ from '@/lodash'
 import axios from 'axios'
-import ChannelCard from '@/components/audio/ChannelCard'
+import ChannelCard from '@/components/audio/ChannelCard.vue'
 
 export default {
   components: {
diff --git a/front/src/components/audio/PlayButton.vue b/front/src/components/audio/PlayButton.vue
index 079faafc6..f7165d840 100644
--- a/front/src/components/audio/PlayButton.vue
+++ b/front/src/components/audio/PlayButton.vue
@@ -126,8 +126,8 @@
 <script>
 import jQuery from 'jquery'
 
-import ReportMixin from '@/components/mixins/Report'
-import PlayOptionsMixin from '@/components/mixins/PlayOptions'
+import ReportMixin from '@/components/mixins/Report.vue'
+import PlayOptionsMixin from '@/components/mixins/PlayOptions.vue'
 
 export default {
   mixins: [ReportMixin, PlayOptionsMixin],
diff --git a/front/src/components/audio/Search.vue b/front/src/components/audio/Search.vue
index a27018da5..0fd5fe1e2 100644
--- a/front/src/components/audio/Search.vue
+++ b/front/src/components/audio/Search.vue
@@ -72,8 +72,8 @@
 import _ from '@/lodash'
 import axios from 'axios'
 import logger from '@/logging'
-import AlbumCard from '@/components/audio/album/Card'
-import ArtistCard from '@/components/audio/artist/Card'
+import AlbumCard from '@/components/audio/album/Card.vue'
+import ArtistCard from '@/components/audio/artist/Card.vue'
 
 export default {
   components: {
diff --git a/front/src/components/audio/SearchBar.vue b/front/src/components/audio/SearchBar.vue
index 5690aa742..f3a153b22 100644
--- a/front/src/components/audio/SearchBar.vue
+++ b/front/src/components/audio/SearchBar.vue
@@ -24,7 +24,7 @@
 import jQuery from 'jquery'
 import router from '@/router'
 import lodash from '@/lodash'
-import GlobalEvents from '@/components/utils/global-events'
+import GlobalEvents from '@/components/utils/global-events.vue'
 
 export default {
   components: {
diff --git a/front/src/components/audio/album/Card.vue b/front/src/components/audio/album/Card.vue
index 7f5afac63..381d39613 100644
--- a/front/src/components/audio/album/Card.vue
+++ b/front/src/components/audio/album/Card.vue
@@ -54,7 +54,7 @@
 </template>
 
 <script>
-import PlayButton from '@/components/audio/PlayButton'
+import PlayButton from '@/components/audio/PlayButton.vue'
 
 export default {
   components: {
diff --git a/front/src/components/audio/artist/Card.vue b/front/src/components/audio/artist/Card.vue
index c02d825f7..bfff6a684 100644
--- a/front/src/components/audio/artist/Card.vue
+++ b/front/src/components/audio/artist/Card.vue
@@ -61,8 +61,8 @@
 </template>
 
 <script>
-import PlayButton from '@/components/audio/PlayButton'
-import TagsList from '@/components/tags/List'
+import PlayButton from '@/components/audio/PlayButton.vue'
+import TagsList from '@/components/tags/List.vue'
 
 export default {
   components: {
diff --git a/front/src/components/audio/artist/Widget.vue b/front/src/components/audio/artist/Widget.vue
index 9cf3ae0cc..f12c960c0 100644
--- a/front/src/components/audio/artist/Widget.vue
+++ b/front/src/components/audio/artist/Widget.vue
@@ -52,7 +52,7 @@
 
 <script>
 import axios from 'axios'
-import ArtistCard from '@/components/audio/artist/Card'
+import ArtistCard from '@/components/audio/artist/Card.vue'
 
 export default {
   components: {
diff --git a/front/src/components/audio/podcast/MobileRow.vue b/front/src/components/audio/podcast/MobileRow.vue
index e4f0db980..40bf88389 100644
--- a/front/src/components/audio/podcast/MobileRow.vue
+++ b/front/src/components/audio/podcast/MobileRow.vue
@@ -139,9 +139,9 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
-import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
-import TrackModal from '@/components/audio/track/Modal'
-import PlayOptionsMixin from '@/components/mixins/PlayOptions'
+import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon.vue'
+import TrackModal from '@/components/audio/track/Modal.vue'
+import PlayOptionsMixin from '@/components/mixins/PlayOptions.vue'
 
 export default {
 
diff --git a/front/src/components/audio/podcast/Modal.vue b/front/src/components/audio/podcast/Modal.vue
index e1de0cdb1..0a5e396fa 100644
--- a/front/src/components/audio/podcast/Modal.vue
+++ b/front/src/components/audio/podcast/Modal.vue
@@ -226,9 +226,9 @@
 </template>
 
 <script>
-import Modal from '@/components/semantic/Modal'
-import ReportMixin from '@/components/mixins/Report'
-import PlayOptionsMixin from '@/components/mixins/PlayOptions'
+import Modal from '@/components/semantic/Modal.vue'
+import ReportMixin from '@/components/mixins/Report.vue'
+import PlayOptionsMixin from '@/components/mixins/PlayOptions.vue'
 
 export default {
   components: {
diff --git a/front/src/components/audio/podcast/Row.vue b/front/src/components/audio/podcast/Row.vue
index 06bec4855..1f9eb60c1 100644
--- a/front/src/components/audio/podcast/Row.vue
+++ b/front/src/components/audio/podcast/Row.vue
@@ -83,8 +83,8 @@
 <script>
 import axios from 'axios'
 import { mapActions, mapGetters } from 'vuex'
-import PlayButton from '@/components/audio/PlayButton'
-import PlayOptions from '@/components/mixins/PlayOptions'
+import PlayButton from '@/components/audio/PlayButton.vue'
+import PlayOptions from '@/components/mixins/PlayOptions.vue'
 
 export default {
 
diff --git a/front/src/components/audio/podcast/Table.vue b/front/src/components/audio/podcast/Table.vue
index a2407801f..df737da8a 100644
--- a/front/src/components/audio/podcast/Table.vue
+++ b/front/src/components/audio/podcast/Table.vue
@@ -77,9 +77,9 @@
 </template>
 
 <script>
-import PodcastRow from '@/components/audio/podcast/Row'
-import TrackMobileRow from '@/components/audio/track/MobileRow'
-import Pagination from '@/components/Pagination'
+import PodcastRow from '@/components/audio/podcast/Row.vue'
+import TrackMobileRow from '@/components/audio/track/MobileRow.vue'
+import Pagination from '@/components/Pagination.vue'
 
 export default {
   components: {
diff --git a/front/src/components/audio/track/MobileRow.vue b/front/src/components/audio/track/MobileRow.vue
index 98005ff9d..bf1f552af 100644
--- a/front/src/components/audio/track/MobileRow.vue
+++ b/front/src/components/audio/track/MobileRow.vue
@@ -122,9 +122,9 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
-import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
-import TrackModal from '@/components/audio/track/Modal'
-import PlayOptionsMixin from '@/components/mixins/PlayOptions'
+import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon.vue'
+import TrackModal from '@/components/audio/track/Modal.vue'
+import PlayOptionsMixin from '@/components/mixins/PlayOptions.vue'
 
 export default {
 
diff --git a/front/src/components/audio/track/Modal.vue b/front/src/components/audio/track/Modal.vue
index e1de0cdb1..0a5e396fa 100644
--- a/front/src/components/audio/track/Modal.vue
+++ b/front/src/components/audio/track/Modal.vue
@@ -226,9 +226,9 @@
 </template>
 
 <script>
-import Modal from '@/components/semantic/Modal'
-import ReportMixin from '@/components/mixins/Report'
-import PlayOptionsMixin from '@/components/mixins/PlayOptions'
+import Modal from '@/components/semantic/Modal.vue'
+import ReportMixin from '@/components/mixins/Report.vue'
+import PlayOptionsMixin from '@/components/mixins/PlayOptions.vue'
 
 export default {
   components: {
diff --git a/front/src/components/audio/track/Row.vue b/front/src/components/audio/track/Row.vue
index 12c69f955..64f9d7f2f 100644
--- a/front/src/components/audio/track/Row.vue
+++ b/front/src/components/audio/track/Row.vue
@@ -180,11 +180,11 @@
 </template>
 
 <script>
-import PlayIndicator from '@/components/audio/track/PlayIndicator'
+import PlayIndicator from '@/components/audio/track/PlayIndicator.vue'
 import { mapActions, mapGetters } from 'vuex'
-import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
-import PlayButton from '@/components/audio/PlayButton'
-import PlayOptions from '@/components/mixins/PlayOptions'
+import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon.vue'
+import PlayButton from '@/components/audio/PlayButton.vue'
+import PlayOptions from '@/components/mixins/PlayOptions.vue'
 
 export default {
 
diff --git a/front/src/components/audio/track/Table.vue b/front/src/components/audio/track/Table.vue
index 038371de8..e0f5c9a21 100644
--- a/front/src/components/audio/track/Table.vue
+++ b/front/src/components/audio/track/Table.vue
@@ -160,9 +160,9 @@
 <script>
 import _ from '@/lodash'
 import axios from 'axios'
-import TrackRow from '@/components/audio/track/Row'
-import TrackMobileRow from '@/components/audio/track/MobileRow'
-import Pagination from '@/components/Pagination'
+import TrackRow from '@/components/audio/track/Row.vue'
+import TrackMobileRow from '@/components/audio/track/MobileRow.vue'
+import Pagination from '@/components/Pagination.vue'
 
 export default {
   components: {
diff --git a/front/src/components/audio/track/Widget.vue b/front/src/components/audio/track/Widget.vue
index 85b7c6104..8caf5bd50 100644
--- a/front/src/components/audio/track/Widget.vue
+++ b/front/src/components/audio/track/Widget.vue
@@ -137,8 +137,8 @@
 <script>
 import _ from '@/lodash'
 import axios from 'axios'
-import PlayButton from '@/components/audio/PlayButton'
-import TagsList from '@/components/tags/List'
+import PlayButton from '@/components/audio/PlayButton.vue'
+import TagsList from '@/components/tags/List.vue'
 
 export default {
   components: {
diff --git a/front/src/components/auth/ApplicationEdit.vue b/front/src/components/auth/ApplicationEdit.vue
index 4d04f9cdb..2e86ba285 100644
--- a/front/src/components/auth/ApplicationEdit.vue
+++ b/front/src/components/auth/ApplicationEdit.vue
@@ -78,7 +78,7 @@
 <script>
 import axios from 'axios'
 
-import ApplicationForm from '@/components/auth/ApplicationForm'
+import ApplicationForm from '@/components/auth/ApplicationForm.vue'
 
 export default {
   components: {
diff --git a/front/src/components/auth/ApplicationForm.vue b/front/src/components/auth/ApplicationForm.vue
index bfbcd5808..3233a3068 100644
--- a/front/src/components/auth/ApplicationForm.vue
+++ b/front/src/components/auth/ApplicationForm.vue
@@ -121,7 +121,7 @@
 <script>
 import _ from '@/lodash'
 import axios from 'axios'
-import TranslationsMixin from '@/components/mixins/Translations'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
 
 export default {
   mixins: [TranslationsMixin],
diff --git a/front/src/components/auth/ApplicationNew.vue b/front/src/components/auth/ApplicationNew.vue
index 8ffa13fe3..ec95ddcd4 100644
--- a/front/src/components/auth/ApplicationNew.vue
+++ b/front/src/components/auth/ApplicationNew.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import ApplicationForm from '@/components/auth/ApplicationForm'
+import ApplicationForm from '@/components/auth/ApplicationForm.vue'
 
 export default {
   components: {
diff --git a/front/src/components/auth/Authorize.vue b/front/src/components/auth/Authorize.vue
index d86252009..004dbc680 100644
--- a/front/src/components/auth/Authorize.vue
+++ b/front/src/components/auth/Authorize.vue
@@ -142,7 +142,7 @@
 </template>
 
 <script>
-import TranslationsMixin from '@/components/mixins/Translations'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
 
 import axios from 'axios'
 
diff --git a/front/src/components/auth/Settings.vue b/front/src/components/auth/Settings.vue
index d614cf4b3..92b3e724a 100644
--- a/front/src/components/auth/Settings.vue
+++ b/front/src/components/auth/Settings.vue
@@ -699,10 +699,10 @@
 import $ from 'jquery'
 import axios from 'axios'
 import logger from '@/logging'
-import PasswordInput from '@/components/forms/PasswordInput'
-import SubsonicTokenForm from '@/components/auth/SubsonicTokenForm'
-import TranslationsMixin from '@/components/mixins/Translations'
-import AttachmentInput from '@/components/common/AttachmentInput'
+import PasswordInput from '@/components/forms/PasswordInput.vue'
+import SubsonicTokenForm from '@/components/auth/SubsonicTokenForm.vue'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
+import AttachmentInput from '@/components/common/AttachmentInput.vue'
 
 export default {
   components: {
diff --git a/front/src/components/auth/SignupForm.vue b/front/src/components/auth/SignupForm.vue
index 0711178ae..a21f1c88a 100644
--- a/front/src/components/auth/SignupForm.vue
+++ b/front/src/components/auth/SignupForm.vue
@@ -156,8 +156,8 @@
 import axios from 'axios'
 import logger from '@/logging'
 
-import LoginForm from '@/components/auth/LoginForm'
-import PasswordInput from '@/components/forms/PasswordInput'
+import LoginForm from '@/components/auth/LoginForm.vue'
+import PasswordInput from '@/components/forms/PasswordInput.vue'
 
 export default {
   components: {
diff --git a/front/src/components/auth/SubsonicTokenForm.vue b/front/src/components/auth/SubsonicTokenForm.vue
index fce863249..a5e56913c 100644
--- a/front/src/components/auth/SubsonicTokenForm.vue
+++ b/front/src/components/auth/SubsonicTokenForm.vue
@@ -145,7 +145,7 @@
 
 <script>
 import axios from 'axios'
-import PasswordInput from '@/components/forms/PasswordInput'
+import PasswordInput from '@/components/forms/PasswordInput.vue'
 
 export default {
   components: {
diff --git a/front/src/components/channels/AlbumModal.vue b/front/src/components/channels/AlbumModal.vue
index cf50cc031..586bcba85 100644
--- a/front/src/components/channels/AlbumModal.vue
+++ b/front/src/components/channels/AlbumModal.vue
@@ -48,8 +48,8 @@
 </template>
 
 <script>
-import Modal from '@/components/semantic/Modal'
-import ChannelAlbumForm from '@/components/channels/AlbumForm'
+import Modal from '@/components/semantic/Modal.vue'
+import ChannelAlbumForm from '@/components/channels/AlbumForm.vue'
 
 export default {
   components: {
diff --git a/front/src/components/channels/SubscribeButton.vue b/front/src/components/channels/SubscribeButton.vue
index 3d95305d8..3d371e97a 100644
--- a/front/src/components/channels/SubscribeButton.vue
+++ b/front/src/components/channels/SubscribeButton.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script>
-import LoginModal from '@/components/common/LoginModal'
+import LoginModal from '@/components/common/LoginModal.vue'
 
 export default {
   components: {
diff --git a/front/src/components/channels/UploadForm.vue b/front/src/components/channels/UploadForm.vue
index 712e9627b..79fc49dbf 100644
--- a/front/src/components/channels/UploadForm.vue
+++ b/front/src/components/channels/UploadForm.vue
@@ -239,10 +239,10 @@
 import axios from 'axios'
 import $ from 'jquery'
 
-import LicenseSelect from '@/components/channels/LicenseSelect'
-import AlbumSelect from '@/components/channels/AlbumSelect'
-import FileUploadWidget from '@/components/library/FileUploadWidget'
-import UploadMetadataForm from '@/components/channels/UploadMetadataForm'
+import LicenseSelect from '@/components/channels/LicenseSelect.vue'
+import AlbumSelect from '@/components/channels/AlbumSelect.vue'
+import FileUploadWidget from '@/components/library/FileUploadWidget.vue'
+import UploadMetadataForm from '@/components/channels/UploadMetadataForm.vue'
 
 function setIfEmpty (obj, k, v) {
   if (obj[k] !== undefined) {
diff --git a/front/src/components/channels/UploadMetadataForm.vue b/front/src/components/channels/UploadMetadataForm.vue
index f7535883c..127a275e6 100644
--- a/front/src/components/channels/UploadMetadataForm.vue
+++ b/front/src/components/channels/UploadMetadataForm.vue
@@ -58,8 +58,8 @@
 </template>
 
 <script>
-import TagsSelector from '@/components/library/TagsSelector'
-import AttachmentInput from '@/components/common/AttachmentInput'
+import TagsSelector from '@/components/library/TagsSelector.vue'
+import AttachmentInput from '@/components/common/AttachmentInput.vue'
 
 export default {
   components: {
diff --git a/front/src/components/common/DangerousButton.vue b/front/src/components/common/DangerousButton.vue
index 25a25d2fc..b15890da2 100644
--- a/front/src/components/common/DangerousButton.vue
+++ b/front/src/components/common/DangerousButton.vue
@@ -43,7 +43,7 @@
   </button>
 </template>
 <script>
-import Modal from '@/components/semantic/Modal'
+import Modal from '@/components/semantic/Modal.vue'
 
 export default {
   components: {
diff --git a/front/src/components/common/LoginModal.vue b/front/src/components/common/LoginModal.vue
index 5f2d5b7c2..5f51b3283 100644
--- a/front/src/components/common/LoginModal.vue
+++ b/front/src/components/common/LoginModal.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import Modal from '@/components/semantic/Modal'
+import Modal from '@/components/semantic/Modal.vue'
 
 export default {
   components: {
diff --git a/front/src/components/common/UserMenu.vue b/front/src/components/common/UserMenu.vue
index da1744004..e5c7a0537 100644
--- a/front/src/components/common/UserMenu.vue
+++ b/front/src/components/common/UserMenu.vue
@@ -155,7 +155,7 @@
 
 import { mapGetters } from 'vuex'
 
-import ThemesMixin from '@/components/mixins/Themes'
+import ThemesMixin from '@/components/mixins/Themes.vue'
 
 export default {
   mixins: [ThemesMixin],
diff --git a/front/src/components/common/UserModal.vue b/front/src/components/common/UserModal.vue
index 3d7c249a5..7b7cf377e 100644
--- a/front/src/components/common/UserModal.vue
+++ b/front/src/components/common/UserModal.vue
@@ -174,8 +174,8 @@
 </template>
 
 <script>
-import Modal from '@/components/semantic/Modal'
-import ThemesMixin from '@/components/mixins/Themes'
+import Modal from '@/components/semantic/Modal.vue'
+import ThemesMixin from '@/components/mixins/Themes.vue'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/front/src/components/favorites/List.vue b/front/src/components/favorites/List.vue
index 5b143c4f0..7a4ea9acb 100644
--- a/front/src/components/favorites/List.vue
+++ b/front/src/components/favorites/List.vue
@@ -136,13 +136,13 @@
 import axios from 'axios'
 import $ from 'jquery'
 import logger from '@/logging'
-import RadioButton from '@/components/radios/Button'
-import Pagination from '@/components/Pagination'
-import OrderingMixin from '@/components/mixins/Ordering'
-import PaginationMixin from '@/components/mixins/Pagination'
-import TranslationsMixin from '@/components/mixins/Translations'
+import RadioButton from '@/components/radios/Button.vue'
+import Pagination from '@/components/Pagination.vue'
+import OrderingMixin from '@/components/mixins/Ordering.vue'
+import PaginationMixin from '@/components/mixins/Pagination.vue'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
 import { checkRedirectToLogin } from '@/utils'
-import TrackTable from '@/components/audio/track/Table'
+import TrackTable from '@/components/audio/track/Table.vue'
 const FAVORITES_URL = 'tracks/'
 
 export default {
diff --git a/front/src/components/federation/FetchButton.vue b/front/src/components/federation/FetchButton.vue
index 699def21b..bb909a703 100644
--- a/front/src/components/federation/FetchButton.vue
+++ b/front/src/components/federation/FetchButton.vue
@@ -213,7 +213,7 @@
 
 <script>
 import axios from 'axios'
-import Modal from '@/components/semantic/Modal'
+import Modal from '@/components/semantic/Modal.vue'
 
 export default {
   components: {
diff --git a/front/src/components/federation/LibraryWidget.vue b/front/src/components/federation/LibraryWidget.vue
index 62683996a..7f2941ff9 100644
--- a/front/src/components/federation/LibraryWidget.vue
+++ b/front/src/components/federation/LibraryWidget.vue
@@ -55,7 +55,7 @@
 <script>
 import _ from '@/lodash'
 import axios from 'axios'
-import LibraryCard from '@/views/content/remote/Card'
+import LibraryCard from '@/views/content/remote/Card.vue'
 
 export default {
   components: {
diff --git a/front/src/components/library/AlbumDetail.vue b/front/src/components/library/AlbumDetail.vue
index 24ce4eca6..c8bb360cc 100644
--- a/front/src/components/library/AlbumDetail.vue
+++ b/front/src/components/library/AlbumDetail.vue
@@ -92,7 +92,7 @@
 
 <script>
 
-import time from '@/utils/time.vue'
+import time from '@/utils/time.js'
 import LibraryWidget from '@/components/federation/LibraryWidget.vue'
 import ChannelEntries from '@/components/audio/ChannelEntries.vue'
 import TrackTable from '@/components/audio/track/Table.vue'
diff --git a/front/src/components/library/AlbumDropdown.vue b/front/src/components/library/AlbumDropdown.vue
index a7f12e155..a5591bc4e 100644
--- a/front/src/components/library/AlbumDropdown.vue
+++ b/front/src/components/library/AlbumDropdown.vue
@@ -127,9 +127,9 @@
   </span>
 </template>
 <script>
-import EmbedWizard from '@/components/audio/EmbedWizard'
-import Modal from '@/components/semantic/Modal'
-import ReportMixin from '@/components/mixins/Report'
+import EmbedWizard from '@/components/audio/EmbedWizard.vue'
+import Modal from '@/components/semantic/Modal.vue'
+import ReportMixin from '@/components/mixins/Report.vue'
 
 import { getDomain } from '@/utils'
 
diff --git a/front/src/components/library/AlbumEdit.vue b/front/src/components/library/AlbumEdit.vue
index d4d9559c3..b5b800743 100644
--- a/front/src/components/library/AlbumEdit.vue
+++ b/front/src/components/library/AlbumEdit.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import EditForm from '@/components/library/EditForm'
+import EditForm from '@/components/library/EditForm.vue'
 export default {
   components: {
     EditForm
diff --git a/front/src/components/library/ArtistBase.vue b/front/src/components/library/ArtistBase.vue
index 95462c09d..5ec8f3efb 100644
--- a/front/src/components/library/ArtistBase.vue
+++ b/front/src/components/library/ArtistBase.vue
@@ -215,15 +215,15 @@
 
 <script>
 import axios from 'axios'
-import logger from '@/logging'
-import PlayButton from '@/components/audio/PlayButton'
-import EmbedWizard from '@/components/audio/EmbedWizard'
-import Modal from '@/components/semantic/Modal'
-import RadioButton from '@/components/radios/Button'
-import TagsList from '@/components/tags/List'
-import ReportMixin from '@/components/mixins/Report'
+import logger from '@/logging.js'
+import PlayButton from '@/components/audio/PlayButton.vue'
+import EmbedWizard from '@/components/audio/EmbedWizard.vue'
+import Modal from '@/components/semantic/Modal.vue'
+import RadioButton from '@/components/radios/Button.vue'
+import TagsList from '@/components/tags/List.vue'
+import ReportMixin from '@/components/mixins/Report.vue'
 
-import { getDomain } from '@/utils'
+import { getDomain } from '@/utils.js'
 
 export default {
   components: {
diff --git a/front/src/components/library/ArtistDetail.vue b/front/src/components/library/ArtistDetail.vue
index 7f8248925..98f0ad8d1 100644
--- a/front/src/components/library/ArtistDetail.vue
+++ b/front/src/components/library/ArtistDetail.vue
@@ -105,9 +105,9 @@
 
 <script>
 import axios from 'axios'
-import AlbumCard from '@/components/audio/album/Card'
-import TrackTable from '@/components/audio/track/Table'
-import LibraryWidget from '@/components/federation/LibraryWidget'
+import AlbumCard from '@/components/audio/album/Card.vue'
+import TrackTable from '@/components/audio/track/Table.vue'
+import LibraryWidget from '@/components/federation/LibraryWidget.vue'
 
 export default {
   components: {
diff --git a/front/src/components/library/ArtistEdit.vue b/front/src/components/library/ArtistEdit.vue
index 976918ab3..b1d0e5400 100644
--- a/front/src/components/library/ArtistEdit.vue
+++ b/front/src/components/library/ArtistEdit.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import EditForm from '@/components/library/EditForm'
+import EditForm from '@/components/library/EditForm.vue'
 export default {
   components: {
     EditForm
diff --git a/front/src/components/library/Artists.vue b/front/src/components/library/Artists.vue
index 24a7b09a0..56afd95a0 100644
--- a/front/src/components/library/Artists.vue
+++ b/front/src/components/library/Artists.vue
@@ -167,7 +167,7 @@ import qs from 'qs'
 import axios from 'axios'
 import $ from 'jquery'
 
-import logger from '@/logging'
+import logger from '@/logging.js'
 
 import OrderingMixin from '@/components/mixins/Ordering.vue'
 import PaginationMixin from '@/components/mixins/Pagination.vue'
diff --git a/front/src/components/library/EditCard.vue b/front/src/components/library/EditCard.vue
index a5e329414..21cdc71a9 100644
--- a/front/src/components/library/EditCard.vue
+++ b/front/src/components/library/EditCard.vue
@@ -215,7 +215,7 @@
 import axios from 'axios'
 import { diffWordsWithSpace } from 'diff'
 
-import edits from '@/edits'
+import edits from '@/edits.js'
 
 function castValue (value) {
   if (value === null || value === undefined) {
diff --git a/front/src/components/library/EditDetail.vue b/front/src/components/library/EditDetail.vue
index dd617e21e..375e6cbe1 100644
--- a/front/src/components/library/EditDetail.vue
+++ b/front/src/components/library/EditDetail.vue
@@ -12,8 +12,8 @@
 
 <script>
 import axios from 'axios'
-import edits from '@/edits'
-import EditCard from '@/components/library/EditCard'
+import edits from '@/edits.js'
+import EditCard from '@/components/library/EditCard.vue'
 export default {
   components: {
     EditCard
diff --git a/front/src/components/library/EditForm.vue b/front/src/components/library/EditForm.vue
index 90c6b22b6..d86fb1f23 100644
--- a/front/src/components/library/EditForm.vue
+++ b/front/src/components/library/EditForm.vue
@@ -240,13 +240,13 @@
 
 <script>
 import $ from 'jquery'
-import _ from '@/lodash'
+import _ from '@/lodash.js'
 import axios from 'axios'
-import AttachmentInput from '@/components/common/AttachmentInput'
-import EditList from '@/components/library/EditList'
-import EditCard from '@/components/library/EditCard'
-import TagsSelector from '@/components/library/TagsSelector'
-import edits from '@/edits'
+import AttachmentInput from '@/components/common/AttachmentInput.vue'
+import EditList from '@/components/library/EditList.vue'
+import EditCard from '@/components/library/EditCard.vue'
+import TagsSelector from '@/components/library/TagsSelector.vue'
+import edits from '@/edits.js'
 
 export default {
   components: {
diff --git a/front/src/components/library/EditList.vue b/front/src/components/library/EditList.vue
index e3efd0be3..9ca8aeb7e 100644
--- a/front/src/components/library/EditList.vue
+++ b/front/src/components/library/EditList.vue
@@ -42,10 +42,10 @@
 </template>
 
 <script>
-import _ from '@/lodash'
+import _ from '@/lodash.js'
 import axios from 'axios'
 
-import EditCard from '@/components/library/EditCard'
+import EditCard from '@/components/library/EditCard.vue'
 
 export default {
   components: {
diff --git a/front/src/components/library/FileUpload.vue b/front/src/components/library/FileUpload.vue
index ca171c65d..aaa602f0f 100644
--- a/front/src/components/library/FileUpload.vue
+++ b/front/src/components/library/FileUpload.vue
@@ -311,12 +311,12 @@
 </template>
 
 <script>
-import _ from '@/lodash'
+import _ from '@/lodash.js'
 import axios from 'axios'
-import FileUploadWidget from './FileUploadWidget'
-import FsBrowser from './FsBrowser'
-import FsLogs from './FsLogs'
-import LibraryFilesTable from '@/views/content/libraries/FilesTable'
+import FileUploadWidget from './FileUploadWidget.vue'
+import FsBrowser from './FsBrowser.vue'
+import FsLogs from './FsLogs.vue'
+import LibraryFilesTable from '@/views/content/libraries/FilesTable.vue'
 import moment from 'moment'
 
 export default {
diff --git a/front/src/components/library/FileUploadWidget.vue b/front/src/components/library/FileUploadWidget.vue
index 3f5077257..082e7adf4 100644
--- a/front/src/components/library/FileUploadWidget.vue
+++ b/front/src/components/library/FileUploadWidget.vue
@@ -1,6 +1,6 @@
 <script>
 import FileUpload from 'vue-upload-component'
-import { setCsrf } from '@/utils'
+import { setCsrf } from '@/utils.js'
 
 export default {
   extends: FileUpload,
diff --git a/front/src/components/library/Home.vue b/front/src/components/library/Home.vue
index e70eaebb8..a9482ed24 100644
--- a/front/src/components/library/Home.vue
+++ b/front/src/components/library/Home.vue
@@ -72,11 +72,11 @@
 
 <script>
 import axios from 'axios'
-import logger from '@/logging'
-import ChannelsWidget from '@/components/audio/ChannelsWidget'
-import TrackWidget from '@/components/audio/track/Widget'
-import AlbumWidget from '@/components/audio/album/Widget'
-import PlaylistWidget from '@/components/playlists/Widget'
+import logger from '@/logging.js'
+import ChannelsWidget from '@/components/audio/ChannelsWidget.vue'
+import TrackWidget from '@/components/audio/track/Widget.vue'
+import AlbumWidget from '@/components/audio/album/Widget.vue'
+import PlaylistWidget from '@/components/playlists/Widget.vue'
 
 const ARTISTS_URL = 'artists/'
 
diff --git a/front/src/components/library/ImportStatusModal.vue b/front/src/components/library/ImportStatusModal.vue
index 839c7fa3d..50e83b5d3 100644
--- a/front/src/components/library/ImportStatusModal.vue
+++ b/front/src/components/library/ImportStatusModal.vue
@@ -132,7 +132,7 @@
   </modal>
 </template>
 <script>
-import Modal from '@/components/semantic/Modal'
+import Modal from '@/components/semantic/Modal.vue'
 
 function getErrors (payload) {
   const errors = []
diff --git a/front/src/components/library/Podcasts.vue b/front/src/components/library/Podcasts.vue
index e6c01b6b6..c0730477b 100644
--- a/front/src/components/library/Podcasts.vue
+++ b/front/src/components/library/Podcasts.vue
@@ -199,7 +199,7 @@ import qs from 'qs'
 import axios from 'axios'
 import $ from 'jquery'
 
-import logger from '@/logging'
+import logger from '@/logging.js'
 
 import OrderingMixin from '@/components/mixins/Ordering.vue'
 import PaginationMixin from '@/components/mixins/Pagination.vue'
diff --git a/front/src/components/library/Radios.vue b/front/src/components/library/Radios.vue
index e81c25f58..c618cc0dc 100644
--- a/front/src/components/library/Radios.vue
+++ b/front/src/components/library/Radios.vue
@@ -177,7 +177,7 @@
 import axios from 'axios'
 import $ from 'jquery'
 
-import logger from '@/logging'
+import logger from '@/logging.js'
 
 import OrderingMixin from '@/components/mixins/Ordering.vue'
 import PaginationMixin from '@/components/mixins/Pagination.vue'
diff --git a/front/src/components/library/TagDetail.vue b/front/src/components/library/TagDetail.vue
index 60c557b93..0506b989d 100644
--- a/front/src/components/library/TagDetail.vue
+++ b/front/src/components/library/TagDetail.vue
@@ -89,11 +89,11 @@
 </template>
 
 <script>
-import ChannelsWidget from '@/components/audio/ChannelsWidget'
-import TrackWidget from '@/components/audio/track/Widget'
-import AlbumWidget from '@/components/audio/album/Widget'
-import ArtistWidget from '@/components/audio/artist/Widget'
-import RadioButton from '@/components/radios/Button'
+import ChannelsWidget from '@/components/audio/ChannelsWidget.vue'
+import TrackWidget from '@/components/audio/track/Widget.vue'
+import AlbumWidget from '@/components/audio/album/Widget.vue'
+import ArtistWidget from '@/components/audio/artist/Widget.vue'
+import RadioButton from '@/components/radios/Button.vue'
 
 export default {
   components: {
diff --git a/front/src/components/library/TagsSelector.vue b/front/src/components/library/TagsSelector.vue
index bdff58ee8..98a1e339e 100644
--- a/front/src/components/library/TagsSelector.vue
+++ b/front/src/components/library/TagsSelector.vue
@@ -20,7 +20,7 @@
 <script>
 import $ from 'jquery'
 
-import lodash from '@/lodash'
+import lodash from '@/lodash.js'
 export default {
   props: { value: { type: Array, required: true } },
   watch: {
diff --git a/front/src/components/library/TrackBase.vue b/front/src/components/library/TrackBase.vue
index fd809c74e..452632e50 100644
--- a/front/src/components/library/TrackBase.vue
+++ b/front/src/components/library/TrackBase.vue
@@ -219,17 +219,17 @@
 </template>
 
 <script>
-import time from '@/utils/time'
+import time from '@/utils/time.js'
 import axios from 'axios'
-import url from '@/utils/url'
-import { getDomain } from '@/utils'
-import logger from '@/logging'
-import PlayButton from '@/components/audio/PlayButton'
-import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon'
-import TrackPlaylistIcon from '@/components/playlists/TrackPlaylistIcon'
-import Modal from '@/components/semantic/Modal'
-import EmbedWizard from '@/components/audio/EmbedWizard'
-import ReportMixin from '@/components/mixins/Report'
+import url from '@/utils/url.js'
+import { getDomain } from '@/utils.js'
+import logger from '@/logging.js'
+import PlayButton from '@/components/audio/PlayButton.vue'
+import TrackFavoriteIcon from '@/components/favorites/TrackFavoriteIcon.vue'
+import TrackPlaylistIcon from '@/components/playlists/TrackPlaylistIcon.vue'
+import Modal from '@/components/semantic/Modal.vue'
+import EmbedWizard from '@/components/audio/EmbedWizard.vue'
+import ReportMixin from '@/components/mixins/Report.vue'
 import { momentFormat } from '@/filters'
 
 const FETCH_URL = 'tracks/'
diff --git a/front/src/components/library/TrackDetail.vue b/front/src/components/library/TrackDetail.vue
index 276edcba9..aa89b30ec 100644
--- a/front/src/components/library/TrackDetail.vue
+++ b/front/src/components/library/TrackDetail.vue
@@ -289,9 +289,9 @@
 
 <script>
 import axios from 'axios'
-import LibraryWidget from '@/components/federation/LibraryWidget'
-import TagsList from '@/components/tags/List'
-import PlaylistWidget from '@/components/playlists/Widget'
+import LibraryWidget from '@/components/federation/LibraryWidget.vue'
+import TagsList from '@/components/tags/List.vue'
+import PlaylistWidget from '@/components/playlists/Widget.vue'
 
 export default {
   components: {
diff --git a/front/src/components/library/TrackEdit.vue b/front/src/components/library/TrackEdit.vue
index ce5422796..6b28755d1 100644
--- a/front/src/components/library/TrackEdit.vue
+++ b/front/src/components/library/TrackEdit.vue
@@ -45,7 +45,7 @@
 <script>
 import axios from 'axios'
 
-import EditForm from '@/components/library/EditForm'
+import EditForm from '@/components/library/EditForm.vue'
 export default {
   components: {
     EditForm
diff --git a/front/src/components/manage/ChannelsTable.vue b/front/src/components/manage/ChannelsTable.vue
index 9399240be..5fb40c9c9 100644
--- a/front/src/components/manage/ChannelsTable.vue
+++ b/front/src/components/manage/ChannelsTable.vue
@@ -202,13 +202,13 @@
 <script>
 import axios from 'axios'
 import _ from '@/lodash'
-import time from '@/utils/time'
+import time from '@/utils/time.js'
 import { normalizeQuery, parseTokens } from '@/search'
-import Pagination from '@/components/Pagination'
-import ActionTable from '@/components/common/ActionTable'
-import OrderingMixin from '@/components/mixins/Ordering'
-import TranslationsMixin from '@/components/mixins/Translations'
-import SmartSearchMixin from '@/components/mixins/SmartSearch'
+import Pagination from '@/components/Pagination.vue'
+import ActionTable from '@/components/common/ActionTable.vue'
+import OrderingMixin from '@/components/mixins/Ordering.vue'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
+import SmartSearchMixin from '@/components/mixins/SmartSearch.vue'
 
 export default {
   components: {
diff --git a/front/src/components/manage/library/AlbumsTable.vue b/front/src/components/manage/library/AlbumsTable.vue
index 8ccc63d5e..d88d2d874 100644
--- a/front/src/components/manage/library/AlbumsTable.vue
+++ b/front/src/components/manage/library/AlbumsTable.vue
@@ -187,13 +187,13 @@
 <script>
 import axios from 'axios'
 import _ from '@/lodash'
-import time from '@/utils/time'
+import time from '@/utils/time.js'
 import { normalizeQuery, parseTokens } from '@/search'
-import Pagination from '@/components/Pagination'
-import ActionTable from '@/components/common/ActionTable'
-import OrderingMixin from '@/components/mixins/Ordering'
-import TranslationsMixin from '@/components/mixins/Translations'
-import SmartSearchMixin from '@/components/mixins/SmartSearch'
+import Pagination from '@/components/Pagination.vue'
+import ActionTable from '@/components/common/ActionTable.vue'
+import OrderingMixin from '@/components/mixins/Ordering.vue'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
+import SmartSearchMixin from '@/components/mixins/SmartSearch.vue'
 
 export default {
   components: {
diff --git a/front/src/components/manage/library/ArtistsTable.vue b/front/src/components/manage/library/ArtistsTable.vue
index ba2118287..600692073 100644
--- a/front/src/components/manage/library/ArtistsTable.vue
+++ b/front/src/components/manage/library/ArtistsTable.vue
@@ -186,13 +186,13 @@
 <script>
 import axios from 'axios'
 import _ from '@/lodash'
-import time from '@/utils/time'
+import time from '@/utils/time.js'
 import { normalizeQuery, parseTokens } from '@/search'
-import Pagination from '@/components/Pagination'
-import ActionTable from '@/components/common/ActionTable'
-import OrderingMixin from '@/components/mixins/Ordering'
-import TranslationsMixin from '@/components/mixins/Translations'
-import SmartSearchMixin from '@/components/mixins/SmartSearch'
+import Pagination from '@/components/Pagination.vue'
+import ActionTable from '@/components/common/ActionTable.vue'
+import OrderingMixin from '@/components/mixins/Ordering.vue'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
+import SmartSearchMixin from '@/components/mixins/SmartSearch.vue'
 
 export default {
   components: {
diff --git a/front/src/components/manage/library/EditsCardList.vue b/front/src/components/manage/library/EditsCardList.vue
index 7a19df986..f379d5d41 100644
--- a/front/src/components/manage/library/EditsCardList.vue
+++ b/front/src/components/manage/library/EditsCardList.vue
@@ -132,13 +132,13 @@
 <script>
 import axios from 'axios'
 import _ from '@/lodash'
-import time from '@/utils/time'
-import Pagination from '@/components/Pagination'
-import OrderingMixin from '@/components/mixins/Ordering'
-import TranslationsMixin from '@/components/mixins/Translations'
-import EditCard from '@/components/library/EditCard'
+import time from '@/utils/time.js'
+import Pagination from '@/components/Pagination.vue'
+import OrderingMixin from '@/components/mixins/Ordering.vue'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
+import EditCard from '@/components/library/EditCard.vue'
 import { normalizeQuery, parseTokens } from '@/search'
-import SmartSearchMixin from '@/components/mixins/SmartSearch'
+import SmartSearchMixin from '@/components/mixins/SmartSearch.vue'
 
 import edits from '@/edits'
 
diff --git a/front/src/components/manage/library/LibrariesTable.vue b/front/src/components/manage/library/LibrariesTable.vue
index 0700a5782..75b0cfd39 100644
--- a/front/src/components/manage/library/LibrariesTable.vue
+++ b/front/src/components/manage/library/LibrariesTable.vue
@@ -217,13 +217,13 @@
 <script>
 import axios from 'axios'
 import _ from '@/lodash'
-import time from '@/utils/time'
+import time from '@/utils/time.js'
 import { normalizeQuery, parseTokens } from '@/search'
-import Pagination from '@/components/Pagination'
-import ActionTable from '@/components/common/ActionTable'
-import OrderingMixin from '@/components/mixins/Ordering'
-import TranslationsMixin from '@/components/mixins/Translations'
-import SmartSearchMixin from '@/components/mixins/SmartSearch'
+import Pagination from '@/components/Pagination.vue'
+import ActionTable from '@/components/common/ActionTable.vue'
+import OrderingMixin from '@/components/mixins/Ordering.vue'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
+import SmartSearchMixin from '@/components/mixins/SmartSearch.vue'
 
 export default {
   components: {
diff --git a/front/src/components/manage/library/TagsTable.vue b/front/src/components/manage/library/TagsTable.vue
index 8a5bd87ea..5213a0529 100644
--- a/front/src/components/manage/library/TagsTable.vue
+++ b/front/src/components/manage/library/TagsTable.vue
@@ -148,14 +148,14 @@
 <script>
 import axios from 'axios'
 import _ from '@/lodash'
-import time from '@/utils/time'
+import time from '@/utils/time.js'
 import { normalizeQuery, parseTokens } from '@/search'
-import Pagination from '@/components/Pagination'
-import ActionTable from '@/components/common/ActionTable'
-import OrderingMixin from '@/components/mixins/Ordering'
-import TranslationsMixin from '@/components/mixins/Translations'
-import SmartSearchMixin from '@/components/mixins/SmartSearch'
-import ImportStatusModal from '@/components/library/ImportStatusModal'
+import Pagination from '@/components/Pagination.vue'
+import ActionTable from '@/components/common/ActionTable.vue'
+import OrderingMixin from '@/components/mixins/Ordering.vue'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
+import SmartSearchMixin from '@/components/mixins/SmartSearch.vue'
+import ImportStatusModal from '@/components/library/ImportStatusModal.vue'
 
 export default {
   components: {
diff --git a/front/src/components/manage/library/TracksTable.vue b/front/src/components/manage/library/TracksTable.vue
index 3989015b3..09410eb16 100644
--- a/front/src/components/manage/library/TracksTable.vue
+++ b/front/src/components/manage/library/TracksTable.vue
@@ -200,13 +200,13 @@
 <script>
 import axios from 'axios'
 import _ from '@/lodash'
-import time from '@/utils/time'
+import time from '@/utils/time.js'
 import { normalizeQuery, parseTokens } from '@/search'
-import Pagination from '@/components/Pagination'
-import ActionTable from '@/components/common/ActionTable'
-import OrderingMixin from '@/components/mixins/Ordering'
-import TranslationsMixin from '@/components/mixins/Translations'
-import SmartSearchMixin from '@/components/mixins/SmartSearch'
+import Pagination from '@/components/Pagination.vue'
+import ActionTable from '@/components/common/ActionTable.vue'
+import OrderingMixin from '@/components/mixins/Ordering.vue'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
+import SmartSearchMixin from '@/components/mixins/SmartSearch.vue'
 
 export default {
   components: {
diff --git a/front/src/components/manage/library/UploadsTable.vue b/front/src/components/manage/library/UploadsTable.vue
index f0d08794f..4881d89c5 100644
--- a/front/src/components/manage/library/UploadsTable.vue
+++ b/front/src/components/manage/library/UploadsTable.vue
@@ -309,14 +309,14 @@
 <script>
 import axios from 'axios'
 import _ from '@/lodash'
-import time from '@/utils/time'
+import time from '@/utils/time.js'
 import { normalizeQuery, parseTokens } from '@/search'
-import Pagination from '@/components/Pagination'
-import ActionTable from '@/components/common/ActionTable'
-import OrderingMixin from '@/components/mixins/Ordering'
-import TranslationsMixin from '@/components/mixins/Translations'
-import SmartSearchMixin from '@/components/mixins/SmartSearch'
-import ImportStatusModal from '@/components/library/ImportStatusModal'
+import Pagination from '@/components/Pagination.vue'
+import ActionTable from '@/components/common/ActionTable.vue'
+import OrderingMixin from '@/components/mixins/Ordering.vue'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
+import SmartSearchMixin from '@/components/mixins/SmartSearch.vue'
+import ImportStatusModal from '@/components/library/ImportStatusModal.vue'
 
 export default {
   components: {
diff --git a/front/src/components/manage/moderation/AccountsTable.vue b/front/src/components/manage/moderation/AccountsTable.vue
index 076689bb4..edcac3dc1 100644
--- a/front/src/components/manage/moderation/AccountsTable.vue
+++ b/front/src/components/manage/moderation/AccountsTable.vue
@@ -173,13 +173,13 @@
 <script>
 import axios from 'axios'
 import _ from '@/lodash'
-import time from '@/utils/time'
+import time from '@/utils/time.js'
 import { normalizeQuery, parseTokens } from '@/search'
-import Pagination from '@/components/Pagination'
-import ActionTable from '@/components/common/ActionTable'
-import OrderingMixin from '@/components/mixins/Ordering'
-import TranslationsMixin from '@/components/mixins/Translations'
-import SmartSearchMixin from '@/components/mixins/SmartSearch'
+import Pagination from '@/components/Pagination.vue'
+import ActionTable from '@/components/common/ActionTable.vue'
+import OrderingMixin from '@/components/mixins/Ordering.vue'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
+import SmartSearchMixin from '@/components/mixins/SmartSearch.vue'
 
 export default {
   components: {
diff --git a/front/src/components/manage/moderation/DomainsTable.vue b/front/src/components/manage/moderation/DomainsTable.vue
index a4c9c7d25..b68049575 100644
--- a/front/src/components/manage/moderation/DomainsTable.vue
+++ b/front/src/components/manage/moderation/DomainsTable.vue
@@ -184,11 +184,11 @@
 <script>
 import axios from 'axios'
 import _ from '@/lodash'
-import time from '@/utils/time'
-import Pagination from '@/components/Pagination'
-import ActionTable from '@/components/common/ActionTable'
-import OrderingMixin from '@/components/mixins/Ordering'
-import TranslationsMixin from '@/components/mixins/Translations'
+import time from '@/utils/time.js'
+import Pagination from '@/components/Pagination.vue'
+import ActionTable from '@/components/common/ActionTable.vue'
+import OrderingMixin from '@/components/mixins/Ordering.vue'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
 
 export default {
   components: {
diff --git a/front/src/components/manage/moderation/InstancePolicyModal.vue b/front/src/components/manage/moderation/InstancePolicyModal.vue
index 555c0df64..fb10b9143 100644
--- a/front/src/components/manage/moderation/InstancePolicyModal.vue
+++ b/front/src/components/manage/moderation/InstancePolicyModal.vue
@@ -66,9 +66,9 @@
 
 <script>
 import axios from 'axios'
-import InstancePolicyForm from '@/components/manage/moderation/InstancePolicyForm'
-import InstancePolicyCard from '@/components/manage/moderation/InstancePolicyCard'
-import Modal from '@/components/semantic/Modal'
+import InstancePolicyForm from '@/components/manage/moderation/InstancePolicyForm.vue'
+import InstancePolicyCard from '@/components/manage/moderation/InstancePolicyCard.vue'
+import Modal from '@/components/semantic/Modal.vue'
 
 export default {
   components: {
diff --git a/front/src/components/manage/moderation/ReportCard.vue b/front/src/components/manage/moderation/ReportCard.vue
index d2dd0a54c..d90bf4682 100644
--- a/front/src/components/manage/moderation/ReportCard.vue
+++ b/front/src/components/manage/moderation/ReportCard.vue
@@ -390,10 +390,10 @@
 
 <script>
 import axios from 'axios'
-import NoteForm from '@/components/manage/moderation/NoteForm'
-import NotesThread from '@/components/manage/moderation/NotesThread'
-import ReportCategoryDropdown from '@/components/moderation/ReportCategoryDropdown'
-import InstancePolicyModal from '@/components/manage/moderation/InstancePolicyModal'
+import NoteForm from '@/components/manage/moderation/NoteForm.vue'
+import NotesThread from '@/components/manage/moderation/NotesThread.vue'
+import ReportCategoryDropdown from '@/components/moderation/ReportCategoryDropdown.vue'
+import InstancePolicyModal from '@/components/manage/moderation/InstancePolicyModal.vue'
 import entities from '@/entities'
 import { setUpdate } from '@/utils'
 import showdown from 'showdown'
diff --git a/front/src/components/manage/moderation/UserRequestCard.vue b/front/src/components/manage/moderation/UserRequestCard.vue
index 8cf93a53b..8439d3554 100644
--- a/front/src/components/manage/moderation/UserRequestCard.vue
+++ b/front/src/components/manage/moderation/UserRequestCard.vue
@@ -225,8 +225,8 @@
 
 <script>
 import axios from 'axios'
-import NoteForm from '@/components/manage/moderation/NoteForm'
-import NotesThread from '@/components/manage/moderation/NotesThread'
+import NoteForm from '@/components/manage/moderation/NoteForm.vue'
+import NotesThread from '@/components/manage/moderation/NotesThread.vue'
 import showdown from 'showdown'
 
 export default {
diff --git a/front/src/components/manage/users/InvitationsTable.vue b/front/src/components/manage/users/InvitationsTable.vue
index b3b64cabc..53992c898 100644
--- a/front/src/components/manage/users/InvitationsTable.vue
+++ b/front/src/components/manage/users/InvitationsTable.vue
@@ -159,10 +159,10 @@
 import axios from 'axios'
 import moment from 'moment'
 import _ from '@/lodash'
-import Pagination from '@/components/Pagination'
-import ActionTable from '@/components/common/ActionTable'
-import OrderingMixin from '@/components/mixins/Ordering'
-import TranslationsMixin from '@/components/mixins/Translations'
+import Pagination from '@/components/Pagination.vue'
+import ActionTable from '@/components/common/ActionTable.vue'
+import OrderingMixin from '@/components/mixins/Ordering.vue'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
 
 export default {
   components: {
diff --git a/front/src/components/manage/users/UsersTable.vue b/front/src/components/manage/users/UsersTable.vue
index 4d8168428..a638c3e33 100644
--- a/front/src/components/manage/users/UsersTable.vue
+++ b/front/src/components/manage/users/UsersTable.vue
@@ -201,11 +201,11 @@
 <script>
 import axios from 'axios'
 import _ from '@/lodash'
-import time from '@/utils/time'
-import Pagination from '@/components/Pagination'
-import ActionTable from '@/components/common/ActionTable'
-import OrderingMixin from '@/components/mixins/Ordering'
-import TranslationsMixin from '@/components/mixins/Translations'
+import time from '@/utils/time.js'
+import Pagination from '@/components/Pagination.vue'
+import ActionTable from '@/components/common/ActionTable.vue'
+import OrderingMixin from '@/components/mixins/Ordering.vue'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
 
 export default {
   components: {
diff --git a/front/src/components/moderation/ReportCategoryDropdown.vue b/front/src/components/moderation/ReportCategoryDropdown.vue
index c3fcc552c..f9a5eceb3 100644
--- a/front/src/components/moderation/ReportCategoryDropdown.vue
+++ b/front/src/components/moderation/ReportCategoryDropdown.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import TranslationsMixin from '@/components/mixins/Translations'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
 import lodash from '@/lodash'
 export default {
   mixins: [TranslationsMixin],
diff --git a/front/src/components/playlists/Card.vue b/front/src/components/playlists/Card.vue
index d02aac56b..009794856 100644
--- a/front/src/components/playlists/Card.vue
+++ b/front/src/components/playlists/Card.vue
@@ -55,7 +55,7 @@
 </template>
 
 <script>
-import PlayButton from '@/components/audio/PlayButton'
+import PlayButton from '@/components/audio/PlayButton.vue'
 
 export default {
   components: {
diff --git a/front/src/components/playlists/CardList.vue b/front/src/components/playlists/CardList.vue
index e3c17e636..f88cf5f74 100644
--- a/front/src/components/playlists/CardList.vue
+++ b/front/src/components/playlists/CardList.vue
@@ -12,7 +12,7 @@
 
 <script>
 
-import PlaylistCard from '@/components/playlists/Card'
+import PlaylistCard from '@/components/playlists/Card.vue'
 
 export default {
   components: {
diff --git a/front/src/components/playlists/Editor.vue b/front/src/components/playlists/Editor.vue
index 68ce6a10c..dc74406b7 100644
--- a/front/src/components/playlists/Editor.vue
+++ b/front/src/components/playlists/Editor.vue
@@ -176,7 +176,7 @@
 <script>
 import { mapState } from 'vuex'
 import axios from 'axios'
-import PlaylistForm from '@/components/playlists/Form'
+import PlaylistForm from '@/components/playlists/Form.vue'
 
 import draggable from 'vuedraggable'
 
diff --git a/front/src/components/playlists/Form.vue b/front/src/components/playlists/Form.vue
index 9d5301388..1703bce91 100644
--- a/front/src/components/playlists/Form.vue
+++ b/front/src/components/playlists/Form.vue
@@ -100,7 +100,7 @@
 <script>
 import $ from 'jquery'
 import axios from 'axios'
-import TranslationsMixin from '@/components/mixins/Translations'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
 
 import logger from '@/logging'
 
diff --git a/front/src/components/radios/Card.vue b/front/src/components/radios/Card.vue
index e280a91a9..5ec351545 100644
--- a/front/src/components/radios/Card.vue
+++ b/front/src/components/radios/Card.vue
@@ -48,7 +48,7 @@
 </template>
 
 <script>
-import RadioButton from './Button'
+import RadioButton from './Button.vue'
 
 export default {
   components: {
diff --git a/front/src/views/Notifications.vue b/front/src/views/Notifications.vue
index 26bc12c39..1555a5d24 100644
--- a/front/src/views/Notifications.vue
+++ b/front/src/views/Notifications.vue
@@ -217,7 +217,7 @@ import axios from 'axios'
 import showdown from 'showdown'
 import moment from 'moment'
 
-import NotificationRow from '@/components/notifications/NotificationRow'
+import NotificationRow from '@/components/notifications/NotificationRow.vue'
 
 export default {
   components: {
diff --git a/front/src/views/Search.vue b/front/src/views/Search.vue
index 5fb6820ed..3ac5152d2 100644
--- a/front/src/views/Search.vue
+++ b/front/src/views/Search.vue
@@ -137,14 +137,14 @@
 </template>
 
 <script>
-import RemoteSearchForm from '@/components/RemoteSearchForm'
-import ArtistCard from '@/components/audio/artist/Card'
-import AlbumCard from '@/components/audio/album/Card'
-import TrackTable from '@/components/audio/track/Table'
-import Pagination from '@/components/Pagination'
-import PlaylistCardList from '@/components/playlists/CardList'
-import RadioCard from '@/components/radios/Card'
-import TagsList from '@/components/tags/List'
+import RemoteSearchForm from '@/components/RemoteSearchForm.vue'
+import ArtistCard from '@/components/audio/artist/Card.vue'
+import AlbumCard from '@/components/audio/album/Card.vue'
+import TrackTable from '@/components/audio/track/Table.vue'
+import Pagination from '@/components/Pagination.vue'
+import PlaylistCardList from '@/components/playlists/CardList.vue'
+import RadioCard from '@/components/radios/Card.vue'
+import TagsList from '@/components/tags/List.vue'
 
 import axios from 'axios'
 
diff --git a/front/src/views/admin/ChannelDetail.vue b/front/src/views/admin/ChannelDetail.vue
index 4f83947fe..da8f5d6fc 100644
--- a/front/src/views/admin/ChannelDetail.vue
+++ b/front/src/views/admin/ChannelDetail.vue
@@ -416,8 +416,8 @@
 <script>
 import axios from 'axios'
 
-import TagsList from '@/components/tags/List'
-import FetchButton from '@/components/federation/FetchButton'
+import TagsList from '@/components/tags/List.vue'
+import FetchButton from '@/components/federation/FetchButton.vue'
 
 export default {
   components: {
diff --git a/front/src/views/admin/ChannelsList.vue b/front/src/views/admin/ChannelsList.vue
index 2a86598ef..3ab794dd7 100644
--- a/front/src/views/admin/ChannelsList.vue
+++ b/front/src/views/admin/ChannelsList.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import ChannelsTable from '@/components/manage/ChannelsTable'
+import ChannelsTable from '@/components/manage/ChannelsTable.vue'
 
 export default {
   components: {
diff --git a/front/src/views/admin/Settings.vue b/front/src/views/admin/Settings.vue
index ade695e93..d1848c7a7 100644
--- a/front/src/views/admin/Settings.vue
+++ b/front/src/views/admin/Settings.vue
@@ -45,7 +45,7 @@
 import axios from 'axios'
 import $ from 'jquery'
 
-import SettingsGroup from '@/components/admin/SettingsGroup'
+import SettingsGroup from '@/components/admin/SettingsGroup.vue'
 
 export default {
   components: {
diff --git a/front/src/views/admin/library/AlbumDetail.vue b/front/src/views/admin/library/AlbumDetail.vue
index 50cba8da7..cb4c68261 100644
--- a/front/src/views/admin/library/AlbumDetail.vue
+++ b/front/src/views/admin/library/AlbumDetail.vue
@@ -399,8 +399,8 @@
 
 <script>
 import axios from 'axios'
-import FetchButton from '@/components/federation/FetchButton'
-import TagsList from '@/components/tags/List'
+import FetchButton from '@/components/federation/FetchButton.vue'
+import TagsList from '@/components/tags/List.vue'
 
 export default {
   components: {
diff --git a/front/src/views/admin/library/AlbumsList.vue b/front/src/views/admin/library/AlbumsList.vue
index 419449959..82ceca196 100644
--- a/front/src/views/admin/library/AlbumsList.vue
+++ b/front/src/views/admin/library/AlbumsList.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import AlbumsTable from '@/components/manage/library/AlbumsTable'
+import AlbumsTable from '@/components/manage/library/AlbumsTable.vue'
 
 export default {
   components: {
diff --git a/front/src/views/admin/library/ArtistDetail.vue b/front/src/views/admin/library/ArtistDetail.vue
index 8da0906cc..875082bbb 100644
--- a/front/src/views/admin/library/ArtistDetail.vue
+++ b/front/src/views/admin/library/ArtistDetail.vue
@@ -411,8 +411,8 @@
 <script>
 import axios from 'axios'
 
-import TagsList from '@/components/tags/List'
-import FetchButton from '@/components/federation/FetchButton'
+import TagsList from '@/components/tags/List.vue'
+import FetchButton from '@/components/federation/FetchButton.vue'
 
 export default {
   components: {
diff --git a/front/src/views/admin/library/ArtistsList.vue b/front/src/views/admin/library/ArtistsList.vue
index 7e07353e0..fcbca0f97 100644
--- a/front/src/views/admin/library/ArtistsList.vue
+++ b/front/src/views/admin/library/ArtistsList.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import ArtistsTable from '@/components/manage/library/ArtistsTable'
+import ArtistsTable from '@/components/manage/library/ArtistsTable.vue'
 
 export default {
   components: {
diff --git a/front/src/views/admin/library/EditsList.vue b/front/src/views/admin/library/EditsList.vue
index 2b67c69b6..9ce83dcd6 100644
--- a/front/src/views/admin/library/EditsList.vue
+++ b/front/src/views/admin/library/EditsList.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import EditsCardList from '@/components/manage/library/EditsCardList'
+import EditsCardList from '@/components/manage/library/EditsCardList.vue'
 
 export default {
   components: {
diff --git a/front/src/views/admin/library/LibrariesList.vue b/front/src/views/admin/library/LibrariesList.vue
index 7e06cf21c..7a9b03446 100644
--- a/front/src/views/admin/library/LibrariesList.vue
+++ b/front/src/views/admin/library/LibrariesList.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import LibrariesTable from '@/components/manage/library/LibrariesTable'
+import LibrariesTable from '@/components/manage/library/LibrariesTable.vue'
 
 export default {
   components: {
diff --git a/front/src/views/admin/library/LibraryDetail.vue b/front/src/views/admin/library/LibraryDetail.vue
index ee58f13fa..d7c56ab4a 100644
--- a/front/src/views/admin/library/LibraryDetail.vue
+++ b/front/src/views/admin/library/LibraryDetail.vue
@@ -360,7 +360,7 @@
 <script>
 import axios from 'axios'
 import logger from '@/logging'
-import TranslationsMixin from '@/components/mixins/Translations'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
 
 export default {
   mixins: [
diff --git a/front/src/views/admin/library/TagsList.vue b/front/src/views/admin/library/TagsList.vue
index 8f388cdf0..5ca37165a 100644
--- a/front/src/views/admin/library/TagsList.vue
+++ b/front/src/views/admin/library/TagsList.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import TagsTable from '@/components/manage/library/TagsTable'
+import TagsTable from '@/components/manage/library/TagsTable.vue'
 
 export default {
   components: {
diff --git a/front/src/views/admin/library/TrackDetail.vue b/front/src/views/admin/library/TrackDetail.vue
index 4a7789387..de8074cdf 100644
--- a/front/src/views/admin/library/TrackDetail.vue
+++ b/front/src/views/admin/library/TrackDetail.vue
@@ -452,8 +452,8 @@
 
 <script>
 import axios from 'axios'
-import FetchButton from '@/components/federation/FetchButton'
-import TagsList from '@/components/tags/List'
+import FetchButton from '@/components/federation/FetchButton.vue'
+import TagsList from '@/components/tags/List.vue'
 
 export default {
   components: {
diff --git a/front/src/views/admin/library/TracksList.vue b/front/src/views/admin/library/TracksList.vue
index 4588a4e5b..e171e8b01 100644
--- a/front/src/views/admin/library/TracksList.vue
+++ b/front/src/views/admin/library/TracksList.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import TracksTable from '@/components/manage/library/TracksTable'
+import TracksTable from '@/components/manage/library/TracksTable.vue'
 
 export default {
   components: {
diff --git a/front/src/views/admin/library/UploadDetail.vue b/front/src/views/admin/library/UploadDetail.vue
index 3c701c32a..6c5e41ca4 100644
--- a/front/src/views/admin/library/UploadDetail.vue
+++ b/front/src/views/admin/library/UploadDetail.vue
@@ -377,9 +377,9 @@
 
 <script>
 import axios from 'axios'
-import TranslationsMixin from '@/components/mixins/Translations'
-import ImportStatusModal from '@/components/library/ImportStatusModal'
-import time from '@/utils/time'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
+import ImportStatusModal from '@/components/library/ImportStatusModal.vue'
+import time from '@/utils/time.js'
 
 export default {
   components: {
diff --git a/front/src/views/admin/library/UploadsList.vue b/front/src/views/admin/library/UploadsList.vue
index 2e2a5d778..247e9fd4e 100644
--- a/front/src/views/admin/library/UploadsList.vue
+++ b/front/src/views/admin/library/UploadsList.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import UploadsTable from '@/components/manage/library/UploadsTable'
+import UploadsTable from '@/components/manage/library/UploadsTable.vue'
 
 export default {
   components: {
diff --git a/front/src/views/admin/moderation/AccountsDetail.vue b/front/src/views/admin/moderation/AccountsDetail.vue
index 03d6d8ec0..7e2b7f28a 100644
--- a/front/src/views/admin/moderation/AccountsDetail.vue
+++ b/front/src/views/admin/moderation/AccountsDetail.vue
@@ -571,8 +571,8 @@ import logger from '@/logging'
 import lodash from '@/lodash'
 import $ from 'jquery'
 
-import InstancePolicyForm from '@/components/manage/moderation/InstancePolicyForm'
-import InstancePolicyCard from '@/components/manage/moderation/InstancePolicyCard'
+import InstancePolicyForm from '@/components/manage/moderation/InstancePolicyForm.vue'
+import InstancePolicyCard from '@/components/manage/moderation/InstancePolicyCard.vue'
 
 export default {
   components: {
diff --git a/front/src/views/admin/moderation/AccountsList.vue b/front/src/views/admin/moderation/AccountsList.vue
index 559694464..fa5379891 100644
--- a/front/src/views/admin/moderation/AccountsList.vue
+++ b/front/src/views/admin/moderation/AccountsList.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import AccountsTable from '@/components/manage/moderation/AccountsTable'
+import AccountsTable from '@/components/manage/moderation/AccountsTable.vue'
 
 export default {
   components: {
diff --git a/front/src/views/admin/moderation/DomainsDetail.vue b/front/src/views/admin/moderation/DomainsDetail.vue
index 17293512d..1802149e0 100644
--- a/front/src/views/admin/moderation/DomainsDetail.vue
+++ b/front/src/views/admin/moderation/DomainsDetail.vue
@@ -460,8 +460,8 @@
 import axios from 'axios'
 import lodash from '@/lodash'
 
-import InstancePolicyForm from '@/components/manage/moderation/InstancePolicyForm'
-import InstancePolicyCard from '@/components/manage/moderation/InstancePolicyCard'
+import InstancePolicyForm from '@/components/manage/moderation/InstancePolicyForm.vue'
+import InstancePolicyCard from '@/components/manage/moderation/InstancePolicyCard.vue'
 
 export default {
   components: {
diff --git a/front/src/views/admin/moderation/DomainsList.vue b/front/src/views/admin/moderation/DomainsList.vue
index 0182961e9..3095817a2 100644
--- a/front/src/views/admin/moderation/DomainsList.vue
+++ b/front/src/views/admin/moderation/DomainsList.vue
@@ -73,7 +73,7 @@
 <script>
 import axios from 'axios'
 
-import DomainsTable from '@/components/manage/moderation/DomainsTable'
+import DomainsTable from '@/components/manage/moderation/DomainsTable.vue'
 export default {
   components: {
     DomainsTable
diff --git a/front/src/views/admin/moderation/ReportDetail.vue b/front/src/views/admin/moderation/ReportDetail.vue
index 37bdbbac7..b59192d75 100644
--- a/front/src/views/admin/moderation/ReportDetail.vue
+++ b/front/src/views/admin/moderation/ReportDetail.vue
@@ -17,7 +17,7 @@
 <script>
 import axios from 'axios'
 
-import ReportCard from '@/components/manage/moderation/ReportCard'
+import ReportCard from '@/components/manage/moderation/ReportCard.vue'
 
 export default {
   components: {
diff --git a/front/src/views/admin/moderation/ReportsList.vue b/front/src/views/admin/moderation/ReportsList.vue
index bf9bdca45..05721de74 100644
--- a/front/src/views/admin/moderation/ReportsList.vue
+++ b/front/src/views/admin/moderation/ReportsList.vue
@@ -128,14 +128,14 @@
 
 import axios from 'axios'
 import _ from '@/lodash'
-import time from '@/utils/time'
-import Pagination from '@/components/Pagination'
-import OrderingMixin from '@/components/mixins/Ordering'
-import TranslationsMixin from '@/components/mixins/Translations'
-import ReportCard from '@/components/manage/moderation/ReportCard'
-import ReportCategoryDropdown from '@/components/moderation/ReportCategoryDropdown'
+import time from '@/utils/time.js'
+import Pagination from '@/components/Pagination.vue'
+import OrderingMixin from '@/components/mixins/Ordering.vue'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
+import ReportCard from '@/components/manage/moderation/ReportCard.vue'
+import ReportCategoryDropdown from '@/components/moderation/ReportCategoryDropdown.vue'
 import { normalizeQuery, parseTokens } from '@/search'
-import SmartSearchMixin from '@/components/mixins/SmartSearch'
+import SmartSearchMixin from '@/components/mixins/SmartSearch.vue'
 
 export default {
   components: {
diff --git a/front/src/views/admin/moderation/RequestDetail.vue b/front/src/views/admin/moderation/RequestDetail.vue
index ca089ad8f..e25fb8360 100644
--- a/front/src/views/admin/moderation/RequestDetail.vue
+++ b/front/src/views/admin/moderation/RequestDetail.vue
@@ -17,7 +17,7 @@
 <script>
 import axios from 'axios'
 
-import UserRequestCard from '@/components/manage/moderation/UserRequestCard'
+import UserRequestCard from '@/components/manage/moderation/UserRequestCard.vue'
 
 export default {
   components: {
diff --git a/front/src/views/admin/moderation/RequestsList.vue b/front/src/views/admin/moderation/RequestsList.vue
index 0e88c2c1a..8fa8057b1 100644
--- a/front/src/views/admin/moderation/RequestsList.vue
+++ b/front/src/views/admin/moderation/RequestsList.vue
@@ -126,13 +126,13 @@
 
 import axios from 'axios'
 import _ from '@/lodash'
-import time from '@/utils/time'
-import Pagination from '@/components/Pagination'
-import OrderingMixin from '@/components/mixins/Ordering'
-import TranslationsMixin from '@/components/mixins/Translations'
-import UserRequestCard from '@/components/manage/moderation/UserRequestCard'
+import time from '@/utils/time.js'
+import Pagination from '@/components/Pagination.vue'
+import OrderingMixin from '@/components/mixins/Ordering.vue'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
+import UserRequestCard from '@/components/manage/moderation/UserRequestCard.vue'
 import { normalizeQuery, parseTokens } from '@/search'
-import SmartSearchMixin from '@/components/mixins/SmartSearch'
+import SmartSearchMixin from '@/components/mixins/SmartSearch.vue'
 
 export default {
   components: {
diff --git a/front/src/views/admin/users/InvitationsList.vue b/front/src/views/admin/users/InvitationsList.vue
index d95b387da..dd4cb4d63 100644
--- a/front/src/views/admin/users/InvitationsList.vue
+++ b/front/src/views/admin/users/InvitationsList.vue
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import InvitationForm from '@/components/manage/users/InvitationForm'
-import InvitationsTable from '@/components/manage/users/InvitationsTable'
+import InvitationForm from '@/components/manage/users/InvitationForm.vue'
+import InvitationsTable from '@/components/manage/users/InvitationsTable.vue'
 
 export default {
   components: {
diff --git a/front/src/views/admin/users/UsersList.vue b/front/src/views/admin/users/UsersList.vue
index 29141850f..42efc38fb 100644
--- a/front/src/views/admin/users/UsersList.vue
+++ b/front/src/views/admin/users/UsersList.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import UsersTable from '@/components/manage/users/UsersTable'
+import UsersTable from '@/components/manage/users/UsersTable.vue'
 
 export default {
   components: {
diff --git a/front/src/views/auth/PasswordResetConfirm.vue b/front/src/views/auth/PasswordResetConfirm.vue
index 3653135a0..bbc01870f 100644
--- a/front/src/views/auth/PasswordResetConfirm.vue
+++ b/front/src/views/auth/PasswordResetConfirm.vue
@@ -87,7 +87,7 @@
 
 <script>
 import axios from 'axios'
-import PasswordInput from '@/components/forms/PasswordInput'
+import PasswordInput from '@/components/forms/PasswordInput.vue'
 
 export default {
   components: {
diff --git a/front/src/views/auth/Plugins.vue b/front/src/views/auth/Plugins.vue
index 6e6400ffd..501a0377d 100644
--- a/front/src/views/auth/Plugins.vue
+++ b/front/src/views/auth/Plugins.vue
@@ -29,7 +29,7 @@
 
 <script>
 import axios from 'axios'
-import PluginForm from '@/components/auth/Plugin'
+import PluginForm from '@/components/auth/Plugin.vue'
 
 export default {
   components: {
diff --git a/front/src/views/auth/ProfileActivity.vue b/front/src/views/auth/ProfileActivity.vue
index 433bd6570..ca7f8dc64 100644
--- a/front/src/views/auth/ProfileActivity.vue
+++ b/front/src/views/auth/ProfileActivity.vue
@@ -50,9 +50,9 @@
 </template>
 
 <script>
-import TrackWidget from '@/components/audio/track/Widget'
-import PlaylistWidget from '@/components/playlists/Widget'
-import RadioButton from '@/components/radios/Button'
+import TrackWidget from '@/components/audio/track/Widget.vue'
+import PlaylistWidget from '@/components/playlists/Widget.vue'
+import RadioButton from '@/components/radios/Button.vue'
 
 export default {
   components: { TrackWidget, PlaylistWidget, RadioButton },
diff --git a/front/src/views/auth/ProfileBase.vue b/front/src/views/auth/ProfileBase.vue
index bf525640c..7650f8ab5 100644
--- a/front/src/views/auth/ProfileBase.vue
+++ b/front/src/views/auth/ProfileBase.vue
@@ -139,7 +139,7 @@
 <script>
 import axios from 'axios'
 
-import ReportMixin from '@/components/mixins/Report'
+import ReportMixin from '@/components/mixins/Report.vue'
 
 export default {
   mixins: [ReportMixin],
diff --git a/front/src/views/auth/ProfileOverview.vue b/front/src/views/auth/ProfileOverview.vue
index 43c1428f2..d71f45cec 100644
--- a/front/src/views/auth/ProfileOverview.vue
+++ b/front/src/views/auth/ProfileOverview.vue
@@ -139,10 +139,10 @@
 </template>
 
 <script>
-import Modal from '@/components/semantic/Modal'
-import LibraryWidget from '@/components/federation/LibraryWidget'
-import ChannelsWidget from '@/components/audio/ChannelsWidget'
-import ChannelForm from '@/components/audio/ChannelForm'
+import Modal from '@/components/semantic/Modal.vue'
+import LibraryWidget from '@/components/federation/LibraryWidget.vue'
+import ChannelsWidget from '@/components/audio/ChannelsWidget.vue'
+import ChannelForm from '@/components/audio/ChannelForm.vue'
 
 export default {
   components: { ChannelsWidget, LibraryWidget, ChannelForm, Modal },
diff --git a/front/src/views/auth/Signup.vue b/front/src/views/auth/Signup.vue
index 605658727..7a4353b73 100644
--- a/front/src/views/auth/Signup.vue
+++ b/front/src/views/auth/Signup.vue
@@ -21,7 +21,7 @@
 
 <script>
 
-import SignupForm from '@/components/auth/SignupForm'
+import SignupForm from '@/components/auth/SignupForm.vue'
 
 export default {
   components: {
diff --git a/front/src/views/channels/DetailBase.vue b/front/src/views/channels/DetailBase.vue
index 5e53474ed..d2e70d568 100644
--- a/front/src/views/channels/DetailBase.vue
+++ b/front/src/views/channels/DetailBase.vue
@@ -436,14 +436,14 @@
 
 <script>
 import axios from 'axios'
-import PlayButton from '@/components/audio/PlayButton'
-import EmbedWizard from '@/components/audio/EmbedWizard'
-import Modal from '@/components/semantic/Modal'
-import TagsList from '@/components/tags/List'
-import ReportMixin from '@/components/mixins/Report'
+import PlayButton from '@/components/audio/PlayButton.vue'
+import EmbedWizard from '@/components/audio/EmbedWizard.vue'
+import Modal from '@/components/semantic/Modal.vue'
+import TagsList from '@/components/tags/List.vue'
+import ReportMixin from '@/components/mixins/Report.vue'
 
-import SubscribeButton from '@/components/channels/SubscribeButton'
-import ChannelForm from '@/components/audio/ChannelForm'
+import SubscribeButton from '@/components/channels/SubscribeButton.vue'
+import ChannelForm from '@/components/audio/ChannelForm.vue'
 
 export default {
   components: {
diff --git a/front/src/views/channels/DetailEpisodes.vue b/front/src/views/channels/DetailEpisodes.vue
index 6d01f8736..6aafda2fc 100644
--- a/front/src/views/channels/DetailEpisodes.vue
+++ b/front/src/views/channels/DetailEpisodes.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import ChannelEntries from '@/components/audio/ChannelEntries'
+import ChannelEntries from '@/components/audio/ChannelEntries.vue'
 
 export default {
   components: {
diff --git a/front/src/views/channels/DetailOverview.vue b/front/src/views/channels/DetailOverview.vue
index cca63ded1..6e12a74cb 100644
--- a/front/src/views/channels/DetailOverview.vue
+++ b/front/src/views/channels/DetailOverview.vue
@@ -143,9 +143,9 @@
 import axios from 'axios'
 import qs from 'qs'
 
-import ChannelEntries from '@/components/audio/ChannelEntries'
-import ChannelSeries from '@/components/audio/ChannelSeries'
-import AlbumModal from '@/components/channels/AlbumModal'
+import ChannelEntries from '@/components/audio/ChannelEntries.vue'
+import ChannelSeries from '@/components/audio/ChannelSeries.vue'
+import AlbumModal from '@/components/channels/AlbumModal.vue'
 
 export default {
   components: {
diff --git a/front/src/views/channels/SubscriptionsList.vue b/front/src/views/channels/SubscriptionsList.vue
index 30fff8f27..c2f86df32 100644
--- a/front/src/views/channels/SubscriptionsList.vue
+++ b/front/src/views/channels/SubscriptionsList.vue
@@ -71,10 +71,10 @@
 
 <script>
 import axios from 'axios'
-import Modal from '@/components/semantic/Modal'
+import Modal from '@/components/semantic/Modal.vue'
 
-import ChannelsWidget from '@/components/audio/ChannelsWidget'
-import RemoteSearchForm from '@/components/RemoteSearchForm'
+import ChannelsWidget from '@/components/audio/ChannelsWidget.vue'
+import RemoteSearchForm from '@/components/RemoteSearchForm.vue'
 
 export default {
   components: {
diff --git a/front/src/views/content/libraries/Card.vue b/front/src/views/content/libraries/Card.vue
index d7cb065d6..837d0889c 100644
--- a/front/src/views/content/libraries/Card.vue
+++ b/front/src/views/content/libraries/Card.vue
@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import TranslationsMixin from '@/components/mixins/Translations'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
 
 export default {
   mixins: [TranslationsMixin],
diff --git a/front/src/views/content/libraries/FilesTable.vue b/front/src/views/content/libraries/FilesTable.vue
index e38e61344..4d1091cc6 100644
--- a/front/src/views/content/libraries/FilesTable.vue
+++ b/front/src/views/content/libraries/FilesTable.vue
@@ -268,15 +268,15 @@
 <script>
 import axios from 'axios'
 import _ from '@/lodash'
-import time from '@/utils/time'
+import time from '@/utils/time.js'
 import { normalizeQuery, parseTokens } from '@/search'
 
-import Pagination from '@/components/Pagination'
-import ActionTable from '@/components/common/ActionTable'
-import OrderingMixin from '@/components/mixins/Ordering'
-import TranslationsMixin from '@/components/mixins/Translations'
-import SmartSearchMixin from '@/components/mixins/SmartSearch'
-import ImportStatusModal from '@/components/library/ImportStatusModal'
+import Pagination from '@/components/Pagination.vue'
+import ActionTable from '@/components/common/ActionTable.vue'
+import OrderingMixin from '@/components/mixins/Ordering.vue'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
+import SmartSearchMixin from '@/components/mixins/SmartSearch.vue'
+import ImportStatusModal from '@/components/library/ImportStatusModal.vue'
 
 export default {
   components: {
diff --git a/front/src/views/content/remote/Card.vue b/front/src/views/content/remote/Card.vue
index 813ed48c0..ca890ba5f 100644
--- a/front/src/views/content/remote/Card.vue
+++ b/front/src/views/content/remote/Card.vue
@@ -224,8 +224,8 @@
 </template>
 <script>
 import axios from 'axios'
-import ReportMixin from '@/components/mixins/Report'
-import RadioButton from '@/components/radios/Button'
+import ReportMixin from '@/components/mixins/Report.vue'
+import RadioButton from '@/components/radios/Button.vue'
 
 export default {
   components: {
diff --git a/front/src/views/library/DetailAlbums.vue b/front/src/views/library/DetailAlbums.vue
index dcac36832..ac0e2f06b 100644
--- a/front/src/views/library/DetailAlbums.vue
+++ b/front/src/views/library/DetailAlbums.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import AlbumWidget from '@/components/audio/album/Widget'
+import AlbumWidget from '@/components/audio/album/Widget.vue'
 
 export default {
   components: {
diff --git a/front/src/views/library/DetailBase.vue b/front/src/views/library/DetailBase.vue
index 88b5cbc3b..e0068f8e2 100644
--- a/front/src/views/library/DetailBase.vue
+++ b/front/src/views/library/DetailBase.vue
@@ -227,9 +227,9 @@
 
 <script>
 import axios from 'axios'
-import LibraryFollowButton from '@/components/audio/LibraryFollowButton'
-import ReportMixin from '@/components/mixins/Report'
-import RadioButton from '@/components/radios/Button'
+import LibraryFollowButton from '@/components/audio/LibraryFollowButton.vue'
+import ReportMixin from '@/components/mixins/Report.vue'
+import RadioButton from '@/components/radios/Button.vue'
 
 export default {
   components: {
diff --git a/front/src/views/library/DetailOverview.vue b/front/src/views/library/DetailOverview.vue
index d66984814..574351589 100644
--- a/front/src/views/library/DetailOverview.vue
+++ b/front/src/views/library/DetailOverview.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script>
-import ArtistWidget from '@/components/audio/artist/Widget'
+import ArtistWidget from '@/components/audio/artist/Widget.vue'
 
 export default {
   components: {
diff --git a/front/src/views/library/DetailTracks.vue b/front/src/views/library/DetailTracks.vue
index 45f55addd..4271019a5 100644
--- a/front/src/views/library/DetailTracks.vue
+++ b/front/src/views/library/DetailTracks.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import TrackTable from '@/components/audio/track/Table'
+import TrackTable from '@/components/audio/track/Table.vue'
 
 export default {
   components: {
diff --git a/front/src/views/library/Edit.vue b/front/src/views/library/Edit.vue
index 00ba50c71..55d1bf2c3 100644
--- a/front/src/views/library/Edit.vue
+++ b/front/src/views/library/Edit.vue
@@ -114,8 +114,8 @@
 </template>
 
 <script>
-import LibraryFilesTable from '@/views/content/libraries/FilesTable'
-import LibraryForm from '@/views/content/libraries/Form'
+import LibraryFilesTable from '@/views/content/libraries/FilesTable.vue'
+import LibraryForm from '@/views/content/libraries/Form.vue'
 import axios from 'axios'
 
 export default {
diff --git a/front/src/views/library/Upload.vue b/front/src/views/library/Upload.vue
index 48dda7e29..08813503a 100644
--- a/front/src/views/library/Upload.vue
+++ b/front/src/views/library/Upload.vue
@@ -11,7 +11,7 @@
 
 <script>
 
-import FileUpload from '@/components/library/FileUpload'
+import FileUpload from '@/components/library/FileUpload.vue'
 
 export default {
   components: {
diff --git a/front/src/views/playlists/Detail.vue b/front/src/views/playlists/Detail.vue
index 8cc6fa6d2..b1ac12238 100644
--- a/front/src/views/playlists/Detail.vue
+++ b/front/src/views/playlists/Detail.vue
@@ -174,11 +174,11 @@
 </template>
 <script>
 import axios from 'axios'
-import TrackTable from '@/components/audio/track/Table'
-import PlayButton from '@/components/audio/PlayButton'
-import PlaylistEditor from '@/components/playlists/Editor'
-import EmbedWizard from '@/components/audio/EmbedWizard'
-import Modal from '@/components/semantic/Modal'
+import TrackTable from '@/components/audio/track/Table.vue'
+import PlayButton from '@/components/audio/PlayButton.vue'
+import PlaylistEditor from '@/components/playlists/Editor.vue'
+import EmbedWizard from '@/components/audio/EmbedWizard.vue'
+import Modal from '@/components/semantic/Modal.vue'
 
 export default {
   components: {
diff --git a/front/src/views/playlists/List.vue b/front/src/views/playlists/List.vue
index 4ad0cdb12..177775e32 100644
--- a/front/src/views/playlists/List.vue
+++ b/front/src/views/playlists/List.vue
@@ -140,11 +140,11 @@
 import axios from 'axios'
 import $ from 'jquery'
 
-import OrderingMixin from '@/components/mixins/Ordering'
-import PaginationMixin from '@/components/mixins/Pagination'
-import TranslationsMixin from '@/components/mixins/Translations'
-import PlaylistCardList from '@/components/playlists/CardList'
-import Pagination from '@/components/Pagination'
+import OrderingMixin from '@/components/mixins/Ordering.vue'
+import PaginationMixin from '@/components/mixins/Pagination.vue'
+import TranslationsMixin from '@/components/mixins/Translations.vue'
+import PlaylistCardList from '@/components/playlists/CardList.vue'
+import Pagination from '@/components/Pagination.vue'
 
 const FETCH_URL = 'playlists/'
 
diff --git a/front/src/views/radios/Detail.vue b/front/src/views/radios/Detail.vue
index 7c72ff87b..0fb038512 100644
--- a/front/src/views/radios/Detail.vue
+++ b/front/src/views/radios/Detail.vue
@@ -111,9 +111,9 @@
 
 <script>
 import axios from 'axios'
-import TrackTable from '@/components/audio/track/Table'
-import RadioButton from '@/components/radios/Button'
-import Pagination from '@/components/Pagination'
+import TrackTable from '@/components/audio/track/Table.vue'
+import RadioButton from '@/components/radios/Button.vue'
+import Pagination from '@/components/Pagination.vue'
 
 export default {
   components: {