diff --git a/resources/assets/js/annotations/api/exportArea.js b/resources/assets/js/annotations/api/exportArea.js
index 71c1db590..04d86d961 100644
--- a/resources/assets/js/annotations/api/exportArea.js
+++ b/resources/assets/js/annotations/api/exportArea.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for editing the export area of a volume
*
@@ -13,4 +15,4 @@
* resource.delete({id: columeId}).then(...);
*
*/
-export default Vue.resource('/api/v1/volumes{/id}/export-area');
+export default Resource('/api/v1/volumes{/id}/export-area');
diff --git a/resources/assets/js/annotations/api/volumes.js b/resources/assets/js/annotations/api/volumes.js
index a6f8a2021..b85f5fa9f 100644
--- a/resources/assets/js/annotations/api/volumes.js
+++ b/resources/assets/js/annotations/api/volumes.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for the area of images of a volume.
*
@@ -5,7 +7,6 @@
*
* Get the area in m² of all images of the volume:
* resource.get({id: 1}).then(...);
- *
- * @type {Vue.resource}
*/
-export default Vue.resource('api/v1/volumes{/id}/images/area');
+export default Resource('api/v1/volumes{/id}/images/area');
+
diff --git a/resources/assets/js/bootstrap.js b/resources/assets/js/bootstrap.js
index 926a41094..2b113985e 100644
--- a/resources/assets/js/bootstrap.js
+++ b/resources/assets/js/bootstrap.js
@@ -1,20 +1,33 @@
import Vue from 'vue';
-import VueResource from 'vue-resource';
import { configureCompat } from 'vue'
+import { Resource, Http } from 'vue-resource';
configureCompat({
FILTERS: false,
});
window.Vue = Vue;
-window.Vue.use(VueResource);
+
+// Vue resource is not officially supported with Vue 3 and it no longer works as Vue
+// plugin. It can be used stand-alone, though, and this is what we do for now. Any
+// change here would require significant work with the existing resource definitions.
+Vue.resource = function () {
+ console.trace('Vue.resource is deprecated. Import Resource directly.');
+ return Resource(...arguments);
+};
+
+const httpRootElement = document.querySelector('meta[name="http-root"]');
+
+if (httpRootElement) {
+ Http.options.root = httpRootElement.getAttribute('content');
+}
const csrfTokenElement = document.querySelector('meta[name="csrf-token"]');
if (csrfTokenElement) {
const readMethods = ['HEAD', 'GET', 'OPTIONS'];
- Vue.http.interceptors.push(function(request) {
+ Http.interceptors.push(function(request) {
// Only add the CSRF token for non-read requests. This is important for
// remote volume locations and CORS, as it would require a special CORS
// configuration to allow this header.
diff --git a/resources/assets/js/core/api/annotations.js b/resources/assets/js/core/api/annotations.js
index 4b303d4ac..4cafdf7cf 100644
--- a/resources/assets/js/core/api/annotations.js
+++ b/resources/assets/js/core/api/annotations.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for annotations.
*
@@ -15,10 +17,8 @@
* Detach a label from an annotation:
* resource.detachLabel({annotation_label_id: id}).then(...);
* Note that the annotation label ID is required for this and not the annotation ID!
- *
- * @type {Vue.resource}
*/
-export default Vue.resource('api/v1/annotations{/id}', {}, {
+export default Resource('api/v1/annotations{/id}', {}, {
attachLabel: {
method: 'POST',
url: 'api/v1/annotations{/id}/labels',
diff --git a/resources/assets/js/core/api/images.js b/resources/assets/js/core/api/images.js
index 61997de6c..e0a2a1649 100644
--- a/resources/assets/js/core/api/images.js
+++ b/resources/assets/js/core/api/images.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for images.
*
@@ -25,10 +27,8 @@
*
* Delete an image:
* resource.delete({id: 1}).then(...);
- *
- * @type {Vue.resource}
*/
-export default Vue.resource('api/v1/images{/id}', {}, {
+export default Resource('api/v1/images{/id}', {}, {
getFile: {
method: 'GET',
url: 'api/v1/images{/id}/file',
diff --git a/resources/assets/js/core/api/labelSource.js b/resources/assets/js/core/api/labelSource.js
index 04319250c..8604cc548 100644
--- a/resources/assets/js/core/api/labelSource.js
+++ b/resources/assets/js/core/api/labelSource.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for finding labels from an external source.
*
@@ -6,7 +8,5 @@
* Find labels:
*
* resource.query({id: 1, query: 'Kolga'}).then(...);
- *
- * @type {Vue.resource}
*/
-export default Vue.resource('api/v1/label-sources{/id}/find');
+export default Resource('api/v1/label-sources{/id}/find');
diff --git a/resources/assets/js/core/api/labelTree.js b/resources/assets/js/core/api/labelTree.js
index 64eaac6bb..5631ebde0 100644
--- a/resources/assets/js/core/api/labelTree.js
+++ b/resources/assets/js/core/api/labelTree.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for label trees.
*
@@ -29,10 +31,8 @@
*
* Detach a user from a label tree:
* resource.delete({id: 1, user_id: 1}).then(...);
- *
- * @type {Vue.resource}
*/
-export default Vue.resource('api/v1/label-trees{/id}', {}, {
+export default Resource('api/v1/label-trees{/id}', {}, {
addAuthorizedProject: {
method: 'POST',
url: 'api/v1/label-trees{/id}/authorized-projects',
diff --git a/resources/assets/js/core/api/labelTreeVersion.js b/resources/assets/js/core/api/labelTreeVersion.js
index c43a8026d..11fb77de0 100644
--- a/resources/assets/js/core/api/labelTreeVersion.js
+++ b/resources/assets/js/core/api/labelTreeVersion.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for label tree versions.
*
@@ -8,10 +10,8 @@
* Delete a label tree version:
* resource.delete({id: 1}).then(...);
- *
- * @type {Vue.resource}
*/
-export default Vue.resource('api/v1/label-tree-versions{/id}', {}, {
+export default Resource('api/v1/label-tree-versions{/id}', {}, {
save: {
method: 'POST',
url: 'api/v1/label-trees{/id}/version',
diff --git a/resources/assets/js/core/api/labels.js b/resources/assets/js/core/api/labels.js
index 801c41b30..21330abb3 100644
--- a/resources/assets/js/core/api/labels.js
+++ b/resources/assets/js/core/api/labels.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for labels.
*
@@ -20,10 +22,8 @@
* Delete a label:
*
* resource.delete({id: labelId}).then(...);
- *
- * @type {Vue.resource}
*/
-export default Vue.resource('api/v1/labels{/id}', {}, {
+export default Resource('api/v1/labels{/id}', {}, {
save: {
method: 'POST',
url: 'api/v1/label-trees{/label_tree_id}/labels',
diff --git a/resources/assets/js/core/api/notifications.js b/resources/assets/js/core/api/notifications.js
index f4a89c12f..98c89929d 100644
--- a/resources/assets/js/core/api/notifications.js
+++ b/resources/assets/js/core/api/notifications.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for DB notifications.
*
@@ -10,10 +12,8 @@
* Delete:
*
* resource.delete({id: notificationId}).then(...)
- *
- * @type {Vue.resource}
*/
-export default Vue.resource('api/v1/notifications{/id}', {}, {
+export default Resource('api/v1/notifications{/id}', {}, {
markRead: {method: 'PUT'},
markReadAll: {
method: 'PUT',
diff --git a/resources/assets/js/core/api/projects.js b/resources/assets/js/core/api/projects.js
index 3c2b9f6c4..96b91af80 100644
--- a/resources/assets/js/core/api/projects.js
+++ b/resources/assets/js/core/api/projects.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for projects.
*
@@ -52,10 +54,8 @@
*
* Detach a label tree from a project:
* resource.detachLabelTree({id: 1, label_tree_id: 31}).then(...);
- *
- * @type {Vue.resource}
*/
-export default Vue.resource('api/v1/projects{/id}', {}, {
+export default Resource('api/v1/projects{/id}', {}, {
queryVolumes: {
method: 'GET',
url: 'api/v1/projects{/id}/volumes',
diff --git a/resources/assets/js/core/api/users.js b/resources/assets/js/core/api/users.js
index aa4e5a3f0..766f7f9f1 100644
--- a/resources/assets/js/core/api/users.js
+++ b/resources/assets/js/core/api/users.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for users.
*
@@ -29,10 +31,8 @@
*
* Query users by name:
* resource.find({query: 'jo'}).then(...);
- *
- * @type {Vue.resource}
*/
-export default Vue.resource('api/v1/users{/id}', {}, {
+export default Resource('api/v1/users{/id}', {}, {
find: {
method: 'GET',
url: 'api/v1/users/find{/query}',
diff --git a/resources/assets/js/core/api/volumes.js b/resources/assets/js/core/api/volumes.js
index d6fa4b6bb..dd03545c9 100644
--- a/resources/assets/js/core/api/volumes.js
+++ b/resources/assets/js/core/api/volumes.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for volumes.
*
@@ -11,7 +13,5 @@
*
* Update a volume:
* resource.update({id: 1}, {name: 'New Name'}).then(...);
- *
- * @type {Vue.resource}
*/
-export default Vue.resource('api/v1/volumes{/id}');
+export default Resource('api/v1/volumes{/id}');
diff --git a/resources/assets/js/label-trees/api/mergeLabelTrees.js b/resources/assets/js/label-trees/api/mergeLabelTrees.js
index 63ecd656a..9da066177 100644
--- a/resources/assets/js/label-trees/api/mergeLabelTrees.js
+++ b/resources/assets/js/label-trees/api/mergeLabelTrees.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for merging of label trees.
*
@@ -5,7 +7,5 @@
*
* Merge label trees:
* resource.save({id: 1}, {add: [...], remove: [...]}).then(...);
- *
- * @type {Vue.resource}
*/
-export default Vue.resource('api/v1/label-trees{/id}/merge-labels');
+export default Resource('api/v1/label-trees{/id}/merge-labels');
diff --git a/resources/assets/js/projects/api/attachableVolumes.js b/resources/assets/js/projects/api/attachableVolumes.js
index e39a8fb1d..0afbc2a4a 100644
--- a/resources/assets/js/projects/api/attachableVolumes.js
+++ b/resources/assets/js/projects/api/attachableVolumes.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for volume that can be attached to a project.
*
@@ -8,4 +10,4 @@
* var resource = biigle.$require('api.attachableVolumes');
* resource.get({id: projectId}).then(...);
*/
-export default Vue.resource('api/v1/projects{/id}/attachable-volumes{/name}');
+export default Resource('api/v1/projects{/id}/attachable-volumes{/name}');
diff --git a/resources/assets/js/projects/api/projectInvitations.js b/resources/assets/js/projects/api/projectInvitations.js
index 54875cfac..fca99d720 100644
--- a/resources/assets/js/projects/api/projectInvitations.js
+++ b/resources/assets/js/projects/api/projectInvitations.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for project invitations.
*
@@ -7,7 +9,7 @@
* Delete an invitations.
* resource.delete({id: invitationId}).then(...);
*/
-export default Vue.resource('api/v1/projects{/id}/invitations', {}, {
+export default Resource('api/v1/projects{/id}/invitations', {}, {
delete: {
method: 'DELETE',
url: 'api/v1/project-invitations{/id}',
diff --git a/resources/assets/js/projects/api/volumeStatistics.js b/resources/assets/js/projects/api/volumeStatistics.js
index 570aff611..5c3ed4849 100644
--- a/resources/assets/js/projects/api/volumeStatistics.js
+++ b/resources/assets/js/projects/api/volumeStatistics.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for volume statistics.
*
@@ -8,4 +10,4 @@
* var resource = biigle.$require('api.volumeStatistics');
* resource.get({id: volumeId}).then(...);
*/
-export default Vue.resource('api/v1/volumes{/id}/statistics');
+export default Resource('api/v1/volumes{/id}/statistics');
diff --git a/resources/assets/js/reports/api/projectReports.js b/resources/assets/js/reports/api/projectReports.js
index 90ed04737..722dfd38f 100644
--- a/resources/assets/js/reports/api/projectReports.js
+++ b/resources/assets/js/reports/api/projectReports.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for requesting reports for projects
*
@@ -12,4 +14,4 @@
* }).then(...)
*
*/
-export default Vue.resource('/api/v1/projects{/id}/reports');
+export default Resource('/api/v1/projects{/id}/reports');
diff --git a/resources/assets/js/reports/api/volumeReports.js b/resources/assets/js/reports/api/volumeReports.js
index 779047f17..f268c2ad9 100644
--- a/resources/assets/js/reports/api/volumeReports.js
+++ b/resources/assets/js/reports/api/volumeReports.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for requesting reports for volumes
*
@@ -13,4 +15,4 @@
* }).then(...)
*
*/
-export default Vue.resource('/api/v1/volumes{/id}/reports');
+export default Resource('/api/v1/volumes{/id}/reports');
diff --git a/resources/assets/js/sync/api/import.js b/resources/assets/js/sync/api/import.js
index 774c14bb7..c9718bd05 100644
--- a/resources/assets/js/sync/api/import.js
+++ b/resources/assets/js/sync/api/import.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for imports.
*
@@ -8,7 +10,5 @@
*
* Delete an import:
* resource.delete({token: '123abc'}).then(...);
- *
- * @type {Vue.resource}
*/
-export default Vue.resource('api/v1/import{/token}');
+export default Resource('api/v1/import{/token}');
diff --git a/resources/assets/js/videos/api/videoAnnotations.js b/resources/assets/js/videos/api/videoAnnotations.js
index a0ae97726..4c931e8cf 100644
--- a/resources/assets/js/videos/api/videoAnnotations.js
+++ b/resources/assets/js/videos/api/videoAnnotations.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for video annotations.
*
@@ -29,10 +31,8 @@
*
* Detach a label:
* resource.detachLabel({id: annotationLabelId}).then(...);
- *
- * @type {Vue.resource}
*/
-export default Vue.resource('api/v1/video-annotations{/id}', {}, {
+export default Resource('api/v1/video-annotations{/id}', {}, {
query: {
method: 'GET',
url: 'api/v1/videos{/id}/annotations',
diff --git a/resources/assets/js/videos/api/videos.js b/resources/assets/js/videos/api/videos.js
index 35cf59adf..cab526ca4 100644
--- a/resources/assets/js/videos/api/videos.js
+++ b/resources/assets/js/videos/api/videos.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for videos.
*
@@ -11,10 +13,8 @@
*
* Delete a video:
* resource.delete({id: videoId}, {force: false}).then(...);
- *
- * @type {Vue.resource}
*/
-export default Vue.resource('api/v1/videos{/id}', {}, {
+export default Resource('api/v1/videos{/id}', {}, {
save: {
method: 'POST',
url: 'api/v1/projects{/id}/videos',
diff --git a/resources/assets/js/volumes/api/annotationSessions.js b/resources/assets/js/volumes/api/annotationSessions.js
index c45324a8b..bfb8dd3f4 100644
--- a/resources/assets/js/volumes/api/annotationSessions.js
+++ b/resources/assets/js/volumes/api/annotationSessions.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for annotation sessions.
*
@@ -21,10 +23,8 @@
*
* Delete a session:
* resource.delete({id: 2}).then(...);
- *
- * @type {Vue.resource}
*/
-export default Vue.resource('api/v1/annotation-sessions{/id}', {}, {
+export default Resource('api/v1/annotation-sessions{/id}', {}, {
query: {
method: 'GET',
url: 'api/v1/volumes{/volume_id}/annotation-sessions',
diff --git a/resources/assets/js/volumes/api/browser.js b/resources/assets/js/volumes/api/browser.js
index b26292cea..81e1f5ac8 100644
--- a/resources/assets/js/volumes/api/browser.js
+++ b/resources/assets/js/volumes/api/browser.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for the volume file browser
*
@@ -14,10 +16,8 @@
*
* Show videos:
* resource.getVideos({disk: storageDisk, path: subDirectory}).then(...);
- *
- * @type {Vue.resource}
*/
-export default Vue.resource('api/v1/volumes/browser/directories{/disk}', {}, {
+export default Resource('api/v1/volumes/browser/directories{/disk}', {}, {
getImages: {
method: 'GET',
url: 'api/v1/volumes/browser/images{/disk}',
diff --git a/resources/assets/js/volumes/api/imageLabels.js b/resources/assets/js/volumes/api/imageLabels.js
index b6a9908b7..a615f987a 100644
--- a/resources/assets/js/volumes/api/imageLabels.js
+++ b/resources/assets/js/volumes/api/imageLabels.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for image labels.
*
@@ -11,10 +13,8 @@
*
* Detach a label:
* resource.delete({id: label_id}).then(...);
- *
- * @type {Vue.resource}
*/
-export default Vue.resource('api/v1/image-labels{/id}', {}, {
+export default Resource('api/v1/image-labels{/id}', {}, {
query: {
method: 'GET',
url: 'api/v1/images{/image_id}/labels',
diff --git a/resources/assets/js/volumes/api/videoLabels.js b/resources/assets/js/volumes/api/videoLabels.js
index e72a7ea09..c555dd89d 100644
--- a/resources/assets/js/volumes/api/videoLabels.js
+++ b/resources/assets/js/volumes/api/videoLabels.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for video labels.
*
@@ -11,10 +13,8 @@
*
* Detach a label:
* resource.delete({id: label_id}).then(...);
- *
- * @type {Vue.resource}
*/
-export default Vue.resource('api/v1/video-labels{/id}', {}, {
+export default Resource('api/v1/video-labels{/id}', {}, {
query: {
method: 'GET',
url: 'api/v1/videos{/video_id}/labels',
diff --git a/resources/assets/js/volumes/api/volumeMetadata.js b/resources/assets/js/volumes/api/volumeMetadata.js
index 5c5bb9f66..b62237f8c 100644
--- a/resources/assets/js/volumes/api/volumeMetadata.js
+++ b/resources/assets/js/volumes/api/volumeMetadata.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for uploading volume image metadata as CSV.
*
@@ -7,4 +9,4 @@
*
* resource.save({id: volumeId}, data).then(...);
*/
-export default Vue.resource('api/v1/volumes{/id}/metadata');
+export default Resource('api/v1/volumes{/id}/metadata');
diff --git a/resources/assets/js/volumes/api/volumes.js b/resources/assets/js/volumes/api/volumes.js
index d8ba94b7b..b2de56a19 100644
--- a/resources/assets/js/volumes/api/volumes.js
+++ b/resources/assets/js/volumes/api/volumes.js
@@ -1,3 +1,5 @@
+import {Resource} from 'vue-resource';
+
/**
* Resource for volumes.
*
@@ -29,10 +31,8 @@
*
* Add files to a volume:
* resource.saveFiles({id: 1}, {files: '1.jpg, 2.jpg'}).then(...);
- *
- * @type {Vue.resource}
*/
-export default Vue.resource('api/v1/volumes{/id}', {}, {
+export default Resource('api/v1/volumes{/id}', {}, {
queryFilesWithFileLabels: {
method: 'GET',
url: 'api/v1/volumes{/id}/files/filter/labels',
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index fa3b0d417..fefb6ffbf 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -5,6 +5,7 @@
+
@hasSection('title')
@yield('title') - BIIGLE
@@ -28,9 +29,6 @@
@yield('content')
@vite(['resources/assets/js/main.js'])
-
@stack('scripts')