Major version dependency updates

.eslintrc.cjs

@@ -29,6 +29,7 @@ module.exports = {
     'vue/no-unused-vars': 0,
     'vue/html-self-closing': 0,
     'vue/multi-word-component-names': 0,
+    'vue/no-reserved-component-names': 0,
   },
   globals: {
     'describe': true,

package.json

@@ -74,15 +74,16 @@
     "core-js": "^3.23.4",
     "duplicate-package-checker-webpack-plugin": "^3.0.0",
     "eslint": "^8.19.0",
-    "eslint-plugin-vue": "^8.7.1",
+    "eslint-plugin-vue": "^9.2.0",
     "esm": "^3.2.25",
-    "jest": "^27.5.1",
+    "jest": "^28.1.2",
+    "jest-environment-jsdom": "^28.1.2",
     "node-fetch": "^3.2.6",
     "postcss": "^8.4.14",
     "sass": "^1.53.0",
-    "sass-loader": "^12.6.0",
+    "sass-loader": "^13.0.2",
     "stylelint": "^14.9.1",
-    "stylelint-config-standard-scss": "^3.0.0",
+    "stylelint-config-standard-scss": "^4.0.0",
     "stylelint-order": "^5.0.0",
     "vue-template-compiler": "^2.7.4",
     "webpack": "^5.73.0",

src/nginxconfig/templates/app.vue

@@ -100,8 +100,8 @@ THE SOFTWARE.
                     <h2>{{ $t('templates.app.configFiles') }}</h2>
                     <div ref="files" class="columns is-multiline files">
                         <component
-                            v-for="confContents in confFilesOutput"
                             :is="getPrismComponent(confContents[0])"
+                            v-for="confContents in confFilesOutput"
                             :key="confContents[2]"
                             :name="confContents[0]"
                             :conf="confContents[1]"
@@ -119,6 +119,7 @@ THE SOFTWARE.
 </template>
 
 <script>
+    import { defineAsyncComponent } from 'vue';
     import clone from 'clone';
     import sha2_256 from 'simple-js-sha2-256';
     import escape from 'escape-html';
@@ -158,8 +159,8 @@ THE SOFTWARE.
             ContributeCallout,
             Setup,
             NginxPrism,
-            YamlPrism: () => import('./prism/yaml'),
-            DockerPrism: () => import('./prism/docker'),
+            YamlPrism: defineAsyncComponent(() => import('./prism/yaml')),
+            DockerPrism: defineAsyncComponent(() => import('./prism/docker')),
         },
         data() {
             return {