[JSライブラリ][新着情報][いいね][ブログ][フレーム編集][フォーム][データベース][スライドショー][ページ管理][サイト管理][グループ管理] vue.js 2 → 3にアップデート対応 OW-2521

package.json

@@ -17,9 +17,11 @@
         "@eonasdan/tempus-dominus": "^6.10.2",
         "@fortawesome/fontawesome-free": "^6.7.2",
         "@popperjs/core": "^2.11.8",
+        "@vue/compiler-sfc": "^3.5.13",
         "axios": "^1.6.1",
         "bootstrap": "^4.0.0",
         "codemirror": "^6.0.1",
+        "dayjs": "^1.11.13",
         "jquery": "^3.7.0",
         "laravel-mix": "^6.0.49",
         "lodash": "^4.17.19",
@@ -28,8 +30,7 @@
         "sass": "^1.62.1",
         "sass-loader": "^12.6.0",
         "sortablejs": "^1.15.2",
-        "vue": "^2.5.7",
-        "vue-loader": "^17.3.0",
-        "vue-template-compiler": "^2.7.14"
+        "vue": "^3.5.13",
+        "vue-loader": "^17.3.0"
     }
 }

public/js/app.js.LICENSE.txt

@@ -5,7 +5,7 @@
   */
 
 /*!
-  * Tempus Dominus v6.10.0 (https://getdatepicker.com/)
+  * Tempus Dominus v6.10.2 (https://getdatepicker.com/)
   * Copyright 2013-2025 Jonathan Peterson
   * Licensed under MIT (https://github.com/Eonasdan/tempus-dominus/blob/master/LICENSE)
   */
@@ -17,12 +17,6 @@
  * @license  MIT
  */
 
-/*!
- * Vue.js v2.7.16
- * (c) 2014-2023 Evan You
- * Released under the MIT License.
- */
-
 /*!
  * jQuery JavaScript Library v3.7.1
  * https://jquery.com/
@@ -34,7 +28,9 @@
  * Date: 2023-08-28T13:37Z
  */
 
-/*! Axios v1.8.4 Copyright (c) 2025 Matt Zabriskie and contributors */
+/*! #__NO_SIDE_EFFECTS__ */
+
+/*! Axios v1.9.0 Copyright (c) 2025 Matt Zabriskie and contributors */
 
 /*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
 
@@ -47,6 +43,24 @@
  * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
  */
 
+/**
+* @vue/runtime-core v3.5.13
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/
+
+/**
+* @vue/runtime-dom v3.5.13
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/
+
+/**
+* @vue/shared v3.5.13
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/
+
 /**!
  * @fileOverview Kickass library to create and place poppers near their reference elements.
  * @version 1.16.1

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=241c9aed31c079b16abc7905dd6cd802",
+    "/js/app.js": "/js/app.js?id=1f67c2d128fcdec20231aa57d030e779",
     "/css/app.css": "/css/app.css?id=94110667e125790f9646ca8f0c9d2382"
 }

resources/js/bootstrap.js

@@ -55,12 +55,12 @@ if (token) {
 // });
 
 
-// Tempus Dominus Date/Time Picker
+// --- Tempus Dominus Date/Time Picker
 window.tempusDominus = require('@eonasdan/tempus-dominus');
 // 下記でapp.jsに含めると、日付入力時に1度画面上部に飛ばされる動作をするため、含めない
 // window.Popper = require('@popperjs/core');
 
-// Default SortableJS
+// --- Default SortableJS
 window.Sortable = require('sortablejs').default;
 
 // --- codemirror 6
@@ -71,11 +71,23 @@ import { basicSetup } from "codemirror"
 window.basicSetup = basicSetup;
 // 言語モード
 // ※ 対応言語はgithubのcodemirrorでlang-xxxを確認 https://github.com/codemirror?q=lang-&type=all&language=&sort=
-import {javascript} from "@codemirror/lang-javascript"
+import { javascript } from "@codemirror/lang-javascript"
 window.javascript = javascript;
-import {css} from "@codemirror/lang-css"
+import { css } from "@codemirror/lang-css"
 window.css = css;
-import {java} from "@codemirror/lang-java"
+import { java } from "@codemirror/lang-java"
 window.java = java;
-import {php} from "@codemirror/lang-php"
+import { php } from "@codemirror/lang-php"
 window.php = php;
+
+// --- Vue.js 3
+import { createApp } from 'vue';
+window.createApp = createApp;
+
+// --- dayjs(日付フォーマット)
+let dayjs = require('dayjs');
+let utc = require("dayjs/plugin/utc");
+let timezone = require("dayjs/plugin/timezone");
+dayjs.extend(utc);
+dayjs.extend(timezone);
+window.dayjs = dayjs;

resources/views/core/cms_frame_edit.blade.php

@@ -333,13 +333,14 @@ class="form-control datetimepicker-input {{ $errors->has('content_open_date_to')
 <script>
     let content_open_type = '{{ old('content_open_type', $frame->content_open_type) }}';
 
-    new Vue({
-      el: "#app_{{ $frame->id }}",
-      data: {
-        // コンテンツ公開区分
-        v_content_open_type: content_open_type
+    createApp({
+      data: function() {
+        return {
+          // コンテンツ公開区分
+          v_content_open_type: content_open_type
+        }
       }
-    })
+    }).mount('#app_{{ $frame->id }}');
 </script>
 
 {{-- DateTimePicker 呼び出し --}}

resources/views/layouts/app.blade.php

@@ -57,9 +57,6 @@
 
     <!-- Scripts -->
     <script src="{{ url('/') }}{{ mix('/js/app.js') }}"></script>
-@if( App::environment(['local', 'staging']) )
-    <script>Vue.config.devtools = true;</script>
-@endif
 
     {{-- (下記は Tempus Dominus Date/Time Pickerで使用。ディレクトリインストールで動作させるため、ここで読み込み) --}}
     <!-- @popperjs/core Scripts -->

resources/views/plugins/common/like.blade.php

@@ -30,14 +30,12 @@
     {{-- いいねボタン --}}
     <span id="app_like_{{$frame->id}}_{{$contents_id}}">
         <button class="btn btn-sm btn-link border font-weight-light" v-bind:disabled="is_disabled" v-on:click="like">
-            {{-- JS描画でカウント数の初期表示がちょっと遅く一瞬消えるため、laraveの変数表示＆v-htmlでバインディング --}}
-            {{$like_button_name}} <span class="badge badge-light font-weight-light" v-text="like_count">{{$like_count}}</span>
+            {{$like_button_name}} <span class="badge badge-light font-weight-light" v-text="like_count"></span>
         </button>
     </span>
 
     <script>
-        const app_like_{{$frame->id}}_{{$contents_id}} = new Vue({
-            el: "#app_like_{{$frame->id}}_{{$contents_id}}",
+        const app_like_{{$frame->id}}_{{$contents_id}} = createApp({
             data: function() {
                 return {
                     like_count: {{ $like_count }},
@@ -59,6 +57,6 @@
                         });
                 }
             },
-        });
+        }).mount('#app_like_{{$frame->id}}_{{$contents_id}}');
     </script>
 @endif

resources/views/plugins/manage/group/edit.blade.php

@@ -138,7 +138,7 @@ function removeUser(user_id, user_name) {
             </div>
             <ul class="list-group" id="users">
                 <li class="list-group-item" v-for="user in users">
-                    <button class="btn btn-primary btn-sm" v-on:click="joinUser(user.id, user.name)">参加</button>
+                    <button class="btn btn-primary btn-sm mr-1" v-on:click="joinUser(user.id, user.name)">参加</button>
                     <span>@{{ user.name }}</span>
                 </li>
             </ul>
@@ -190,11 +190,12 @@ function removeUser(user_id, user_name) {
     </div>
 
     <script>
-        new Vue({
-            el: '#list',
-            data: {
-                keyword: '',
-                users: [],
+        createApp({
+            data: function() {
+                return {
+                    keyword: '',
+                    users: [],
+                }
             },
             methods: {
                 // ユーザーを取得する
@@ -225,7 +226,7 @@ function removeUser(user_id, user_name) {
                     }
                 }
             }
-        })
+        }).mount('#list');
     </script>
 @endif
 @endsection

resources/views/plugins/manage/page/page_form.blade.php

@@ -547,11 +547,13 @@
     </div>
 </form>
 <script>
-    new Vue({
-        el: "#app",
-        data: {
-            v_background_color: document.getElementById('background_color').value,
-            v_header_color: document.getElementById('header_color').value
+    createApp({
+        data: function() {
+            return {
+                v_background_color: '{{old('background_color', $page->background_color)}}',
+                v_header_color: '{{old('header_color', $page->header_color)}}'
+
+            }
         },
-    })
+    }).mount('#app');
 </script>

resources/views/plugins/manage/site/site.blade.php

@@ -410,13 +410,14 @@ class="custom-control-input"
     </div><!-- /card-body -->
 </div><!-- /card -->
 <script>
-    new Vue({
-        el: "#app",
-        data: {
-            v_base_background_color: document.getElementById('base_background_color').value,
-            v_base_header_color: document.getElementById('base_header_color').value
+    createApp({
+        data: function() {
+            return {
+                v_base_background_color: '{{Configs::getConfigsValueAndOld($configs, "base_background_color")}}',
+                v_base_header_color: '{{Configs::getConfigsValueAndOld($configs, "base_header_color")}}'
+            }
         },
-    })
+    }).mount('#app');
 </script>
 
 @endsection

resources/views/plugins/user/blogs/default/blogs_setting_frame.blade.php

@@ -197,27 +197,28 @@ class="form-control col-sm-3 @if ($errors->has(BlogFrameConfig::blog_view_count)
     </form>
 
     <script>
-        new Vue({
-          el: "#app_{{ $frame->id }}",
-          data: {
-            // 表示条件
-            v_scope_radio: '{{ old('scope', $blog_frame_setting->scope) }}',
-            // 指定年
-            v_scope_value: '{{ old('scope_value', $blog_frame_setting->scope_value) }}'
+        createApp({
+          data: function() {
+            return {
+              // 表示条件
+              v_scope_radio: '{{ old('scope', $blog_frame_setting->scope) }}',
+              // 指定年
+              v_scope_value: '{{ old('scope_value', $blog_frame_setting->scope_value) }}'
+            }
           },
           computed: {
             // 表示条件と指定年に応じた抽出範囲のテキストを返す
             showTargetYmd: function () {
-                let target_range_text = '-';
-                if(this.v_scope_radio == ""){
-                    target_range_text = '全件';
-                }else if(this.v_scope_radio == "year" && this.isNumber(this.v_scope_value) && this.v_scope_value.length == 4){
-                    target_range_text = this.v_scope_value + '年1月1日 00:00:00 ~ ' + this.v_scope_value + '年12月31日 23:59:59';
-                }else if(this.v_scope_radio == "fiscal" && this.isNumber(this.v_scope_value) && this.v_scope_value.length == 4){
-                    target_range_text = this.v_scope_value + '年4月1日 00:00:00 ~ ' + (Number(this.v_scope_value) + 1) + '年3月31日 23:59:59';
-                }else if(this.v_scope_radio == "created_id"){
-                    target_range_text = '自身の投稿のみ';
-                }
+              let target_range_text = '-';
+              if (this.v_scope_radio == ""){
+                target_range_text = '全件';
+              } else if (this.v_scope_radio == "year" && this.isNumber(this.v_scope_value) && this.v_scope_value.length == 4){
+                target_range_text = this.v_scope_value + '年1月1日 00:00:00 ~ ' + this.v_scope_value + '年12月31日 23:59:59';
+              } else if (this.v_scope_radio == "fiscal" && this.isNumber(this.v_scope_value) && this.v_scope_value.length == 4){
+                target_range_text = this.v_scope_value + '年4月1日 00:00:00 ~ ' + (Number(this.v_scope_value) + 1) + '年3月31日 23:59:59';
+              } else if (this.v_scope_radio == "created_id"){
+                target_range_text = '自身の投稿のみ';
+              }
               return target_range_text;
             }
           },
@@ -228,7 +229,7 @@ class="form-control col-sm-3 @if ($errors->has(BlogFrameConfig::blog_view_count)
               return regex.test(value);
             }
           }
-        })
+        }).mount('#app_{{ $frame->id }}');
     </script>
 @endif
 @endsection

resources/views/plugins/user/databases/default/databases_edit_view.blade.php

@@ -145,8 +145,8 @@ class="custom-control-input" @if ($database_show_trend_words == $key) checked="c
                 <div class="card-body">
                     <h6 class="card-title">更新する値</h6>
                     <div class="mb-2">
-                        <button type="button" class="btn btn-sm btn-primary" v-on:click="fetchTrendWordsDaily">最新化（日間）</button>
-                        <button type="button" class="btn btn-sm btn-primary" v-on:click="fetchTrendWordsWeekly">最新化（週間）</button>
+                        <button type="button" class="btn btn-sm btn-primary mr-1" v-on:click="fetchTrendWordsDaily">最新化（日間）</button>
+                        <button type="button" class="btn btn-sm btn-primary mr-1" v-on:click="fetchTrendWordsWeekly">最新化（週間）</button>
                         <button type="button" class="btn btn-sm btn-primary" v-on:click="fetchTrendWordsMonthly">最新化（月間）</button>
                     </div>
                     <div class="mb-2">
@@ -431,8 +431,7 @@ class="custom-control-input" @if(old('database_destination_frame', $database_des
 </div>
 
 <script>
-    const app_{{ $frame->id }} = new Vue({
-        el: "#app_{{ $frame->id }}",
+    const app_{{ $frame->id }} = createApp({
         data: function() {
             return {
                 trend_words: [],
@@ -468,7 +467,7 @@ class="custom-control-input" @if(old('database_destination_frame', $database_des
         mounted: function () {
             this.fetchTrendWordsOld();
         }
-    });
+    }).mount('#app_{{ $frame->id }}');
 </script>
 
 @endif

resources/views/plugins/user/forms/default/forms_edit_form.blade.php

@@ -563,12 +563,13 @@
     </div>
 </div>
 <script>
-    new Vue({
-      el: "#app_numbering_prefix_{{ $frame->id }}",
-      data: {
-        v_numbering_prefix: document.getElementById('numbering_prefix').value
+    createApp({
+      data: function() {
+        return {
+          v_numbering_prefix: '{{old('numbering_prefix', $form->numbering_prefix)}}'
+        }
       }
-    })
+    }).mount('#app_numbering_prefix_{{ $frame->id }}');
 
     {{-- 初期状態で開くもの --}}
     @php $access_limit_type = $form->access_limit_type ?? FormAccessLimitType::getDefault(); @endphp

resources/views/plugins/user/slideshows/default/slideshows_edit.blade.php

@@ -176,8 +176,7 @@ function submit_display_sequence(item_id, display_sequence, display_sequence_ope
             /**
              * 新規追加行・更新行のimgのsrc、及び、モーダルのヘッダーに表示しているファイル名をイベントから抽出して動的に書き換える
              */
-             const app_{{ $frame->id }} = new Vue({
-                el: "#app_{{ $frame->id }}",
+            const app_{{ $frame->id }} = createApp({
                 data: function() {
                     return {
                         // 更新行用の変数
@@ -193,7 +192,7 @@ function submit_display_sequence(item_id, display_sequence, display_sequence_ope
                 },
                 methods: {
                     // 受け取ったイベントから画像オブジェクトのURL、ファイル名を生成してHTMLにセットする
-                    setImageResource(items_id, event){
+                    setImageResource(event, items_id){
                         const file = event.target.files[0];
                         // console.log(file);
                         eval("this.image_url_" + items_id + " = URL.createObjectURL(file);");
@@ -208,7 +207,7 @@ function submit_display_sequence(item_id, display_sequence, display_sequence_ope
                         this.selected_pdf = file.name;
                     }
                 }
-            });
+            }).mount('#app_{{ $frame->id }}');
         </script>
     @endauth
 @endsection