[Vue] Fix other warnings and set compat mode to 3

app/javascript/src/javascripts/related_tag.js

@@ -19,25 +19,16 @@ RelatedTag.initialize_all = function() {
 }
 
 import TagEditor from './tag_editor.vue';
-import Vue from 'vue';
+import { createApp } from 'vue';
 
 RelatedTag.tag_editor_setup = false;
 RelatedTag.init_post_show_editor = function() {
   if (RelatedTag.tag_editor_setup)
     return;
   RelatedTag.tag_editor_setup = true;
-  const app = new Vue({
-    render: (h) => h(TagEditor)
-  });
 
-  app.$mount('#tag-string-editor');
-  setTimeout(function() {
-    // Work around that browsers seem to take a few frames to acknowledge that the element is there before it can be focused.
-    const el = app.$children[0].$refs['otherTags'];
-    el.style.height = el.scrollHeight + "px";
-    el.focus();
-    el.scrollIntoView();
-  }, 20);
+  const app = createApp(TagEditor);
+  app.mount('#tag-string-editor');
 }
 
 RelatedTag.on_click_related_tags_button = function (event) {

app/javascript/src/javascripts/tag_editor.vue

@@ -2,7 +2,7 @@
     <div>
         <div v-show="!preview.show">
             <textarea class="tag-textarea" id="post_tag_string" v-model="tags" rows="5" data-autocomplete="tag-edit"
-                      ref="otherTags" name="post[tag_string]" spellcheck="false" @keyup="updateTagCount"></textarea>
+                      ref="otherTags" name="post[tag_string]" :spellcheck="false" @keyup="updateTagCount"></textarea>
         </div>
         <div v-show="preview.show">
             <tag-preview :tags="preview.tags" :loading="preview.loading" @close="previewFinalTags"></tag-preview>
@@ -27,7 +27,7 @@
 </template>
 
 <script>
-  import Vue from 'vue';
+  import { nextTick } from 'vue';
   import relatedTags from './uploader/related.vue';
   import tagPreview from './uploader/tag_preview.vue';
   import Post from './posts';
@@ -57,6 +57,13 @@
       };
     },
     mounted() {
+      setTimeout(() => {
+        // Work around that browsers seem to take a few frames to acknowledge that the element is there before it can be focused.
+        const el = this.$refs.otherTags;
+        el.style.height = el.scrollHeight + "px";
+        el.focus();
+        el.scrollIntoView();
+      }, 20);
       if(Utility.meta("enable-auto-complete") !== "true")
         return;
       Autocomplete.initialize_tag_autocomplete();
@@ -105,7 +112,7 @@
           }
           this.tags = groups.join('\n') + ' ';
         }
-        Vue.nextTick(function() {
+        nextTick(function() {
           Post.update_tag_count({target: $("#post_tag_string")});
         })
       },
@@ -152,9 +159,7 @@
           return sortedRelated;
         };
         const getSelectedTags = function () {
-          const field = self.$refs['otherTags'];
-          console.log(field.hasOwnProperty('selectionStart'));
-          console.log(field.selectionStart);
+          const field = self.$refs.otherTags;
           if (typeof field['selectionStart'] === 'undefined')
             return null;
           const length = field.selectionEnd - field.selectionStart;

app/javascript/src/javascripts/uploader.js

@@ -1,12 +1,9 @@
 import Uploader from './uploader/uploader.vue';
-import Vue from 'vue';
+import { createApp } from 'vue';
 
 export default {
   init() {
-    const app = new Vue({
-      render: (h) => h(Uploader)
-    });
-
-    app.$mount('#uploader');
+    const app = createApp(Uploader);
+    app.mount('#uploader');
   }
 }

app/javascript/src/javascripts/uploader/source.vue

@@ -8,10 +8,10 @@
 
 <script>
   export default {
-    props: ['value', 'index', 'last'],
+    props: ['modelValue', 'index', 'last'],
     data() {
       return {
-        backendValue: this.value
+        backendValue: this.modelValue
       };
     },
     computed: {
@@ -21,7 +21,7 @@
         },
         set: function (v) {
           this.backendValue = v;
-          this.$emit('input', v);
+          this.$emit('update:modelValue', v);
         }
       }
     },
@@ -34,7 +34,7 @@
       }
     },
     watch: {
-      value(v) {
+      modelValue(v) {
         this.backendValue = v;
       }
     }

app/javascript/src/javascripts/uploader/uploader.vue

@@ -255,7 +255,6 @@
 </template>
 
 <script>
-  import Vue from 'vue';
   import source from './source.vue';
   import checkbox from './checkbox.vue';
   import relatedTags from './related.vue';
@@ -435,7 +434,7 @@
           this.sources.push('');
       },
       setCheck(tag, value) {
-        Vue.set(this.checkboxes.selected, tag, value);
+        this.checkboxes.selected[tag] = value;
       },
       submit() {
         this.showErrors = true;

app/views/posts/partials/show/_edit.html.erb

@@ -24,13 +24,11 @@
       </span>
     </div>
 
-    <div id="tag-string-editor">
-      <%= f.text_area :tag_string, :size => "60x5", :spellcheck => false, :"data-autocomplete" => "tag-edit", :"data-shortcut" => "e", :value => post.presenter.split_tag_list_text + " " %>
-    </div>
+    <div id="tag-string-editor"></div>
 
     <div>
       <%= f.label :locked_tags, "Locked Tags" %>
-      <%= f.text_area :locked_tags, :size => "60x2", :spellcheck => false, :"data-autocomplete" => "tag-edit", :"data-shortcut" => "e", :value => (post.locked_tags || ""), disabled: !CurrentUser.is_admin? %>
+      <%= f.text_area :locked_tags, :size => "60x2", :spellcheck => false, :"data-autocomplete" => "tag-edit", :value => (post.locked_tags || ""), disabled: !CurrentUser.is_admin? %>
     </div>
   </div>
 

config/webpack/loaders/vue.js

@@ -1,5 +1,6 @@
 // config/webpack/rules/vue.js
 const { VueLoaderPlugin } = require('vue-loader')
+const { DefinePlugin } = require('webpack')
 
 module.exports = {
   module: {
@@ -9,15 +10,22 @@ module.exports = {
         loader: 'vue-loader',
         options: {
           compilerOptions: {
+            whitespace: "preserve",
             compatConfig: {
-              MODE: 2
+              MODE: 3
             }
           }
         },
       },
     ]
   },
-  plugins: [new VueLoaderPlugin()],
+  plugins: [
+    new VueLoaderPlugin(),
+    new DefinePlugin({
+      __VUE_OPTIONS_API__: true,
+      __VUE_PROD_DEVTOOLS__: false,
+    })
+  ],
   resolve: {
     extensions: ['.vue'],
     alias: {