Sage 10 uses Vue 3 to automatically load all components in the folder

[guugg]

• I don’t know if this setting is correct

1. my webpack.mix.js

mix
  .js('resources/scripts/app.js', 'scripts').vue({ version: 3 }).extract();

2. my app.js

//我在主题的`resources`里创建`components`文件夹，用来存放我的`vue`文件

import {
  createApp
} from 'vue'
const app = createApp({});

// 导入components文件夹下的所有组件
// 参数：1. 目录  2. 是否加载子目录  3. 加载的正则匹配
//匹配当前文件夹下的所有.vue文件 注册全局组件
const requireComponent = require.context('../components', false, /\.vue$/)


// console.log('查看匹配到的文件名数组', requireComponent.keys()) 

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName);
  const componentName = fileName.substring(fileName.lastIndexOf('/') + 1, fileName.lastIndexOf('.'));
  app.component(
    componentName,
    componentConfig.default || componentConfig
  );
});

app.mount('#app');

2. my package.json

  "devDependencies": {
    "@tailwindcss/typography": "^0.4.1",
    "@tinypixelco/laravel-mix-wp-blocks": "^1.1.0",
    "@wordpress/babel-preset-default": "^6.1.0",
    "@wordpress/browserslist-config": "^4.0.0",
    "@wordpress/dependency-extraction-webpack-plugin": "^3.1.3",
    "babel-eslint": "^10.1.0",
    "browser-sync": "^2.26.14",
    "browser-sync-webpack-plugin": "^2.3.0",
    "eslint": "^7.27.0",
    "eslint-plugin-import": "^2.23.3",
    "laravel-mix": "^6.0.19",
    "postcss": "^8.3.0",
    "sass": "^1.34.0",
    "sass-loader": "11.1.1",
    "stylelint": "^13.13.1",
    "stylelint-config-standard": "^22.0.0",
    "tailwindcss": "^2.1.2",
    "@vue/compiler-sfc": "^3.2.26",
    "vue-loader": "16.1.0"
  },
  "peerDependencies": {
    "jquery": "^3.5.1"
  },
  "dependencies": {
    "naive-ui": "^2.23.0",
    "vue": "^3.2.26"
  }

3. my ***.blade.php

 <div id="app">
      ....
        <abc-def></abc-def>
      ....
 </div>

I can use vue 3 to work normally like this. I am a newcomer to vue and a novice of sage 10. Not sure if it will affect the code behind.

Would you like to ask if there is any conflict in using vue on the blade of sage?

[ben]

Is something broken?

[guugg]

No errors, it still works so far