Bagaimana untuk menetapkan compilerOptions.isCustomElement untuk VueJS 3 dalam projek Laravel

Question

Saya sedang membangunkan VueJS 3 dalam projek Laravel dan saya menggunakan fail JS yang memberikan saya elemen untuk bar alat Markdown. Pada asasnya ia adalah satu set fungsi yang memberi saya butang untuk menggunakan pilihan penurunan harga yang dipilih. Semuanya berfungsi dengan baik, tetapi saya mendapat ralat konsol yang saya mahu ia hilang.

Semuanya serupa dengan ini:

Failed to resolve component: md-linedivider
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Markdowntoolbar> 
  at <Article onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition enter-active-class="animate__animated animate__fadeInLeft" leave-active-class="animate__animated animate__bounceOutUp" mode="out-in" > 
  at <RouterView> 
  at <App> 
  at <Bodycomponent> 
  at <App>

Ini bermakna elemen md-linedivider harus dikecualikan daripada resolusi komponen melalui compilerOptions.isCustomElement. Saya memang mencari penyelesaian dan hanya menemui ini, tetapi saya tidak mempunyai vue.config.js dalam projek laravel saya untuk menggunakannya. Saya cuba melakukan ini dalam webpack.mis.js dan app.js tanpa berjaya.

Ada sesiapa tahu?

Answer 1

Untuk Nuxt3, anda boleh menetapkan nilai dalam nuxt.config.ts seperti yang ditunjukkan di bawah.

export default defineNuxtConfig({
  vue: {  
    compilerOptions: {
      isCustomElement: (tag) => ['lite-youtube'].includes(tag),
    },
  }
})

Answer 2

Cuba dalam webpack.mix.js

anda

mix.js('resources/assets/js/app.js', 'public/js').vue({
  options: {
    compilerOptions: {
      isCustomElement: (tag) => ['md-linedivider'].includes(tag),
    },
  },
});

---

Kemas kini 4.8.22 - Untuk projek Vite: vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => ['md-linedivider'].includes(tag),
        }
      }
    })
  ]
})