vuejs3 - Why adding heroiconsvue package on my LaravelTailwindcss site I got error using it? - Stack Overflow

admin管理员组

文章数量:1322838

I added heroicons/vue package on my Laravel/Tailwindcss site and try to use in my Vue page with Composition API :

<BeakerIcon class="size-6 text-blue-500" />
    
<script>

    import axios from 'axios'
    import { BeakerIcon } from '@heroicons/vue/24/solid'

    import { defineComponent } from 'vue'

    ...

    export default defineComponent({
        name: 'personalTicketsList',
        components: {
            Multiselect,
            ...
        },
        setup() {

            function personalTicketsListOnMounted() {
                ...
                loadTickets()
            } // function personalTicketsListOnMounted() {

            onMounted(personalTicketsListOnMounted)

            return { // setup return
                // Listing Page state
                ...
                BeakerIcon,

            }
        }, // setup() {

    })
</script>

I have an error in my browser's console :

Index.vue:266 [Vue warn]: Failed to resolve component: BeakerIcon
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
  at <PersonalTicketsList errors= {} auth= {user: null} ziggy=

Searching in net I found How to set compilerOptions.isCustomElement for VueJS 3 in Laravel project branch :

I modified vite.config.js file :

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

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                compilerOptions: {
                    isCustomElement: (tag) => ['md-linedivider'].includes(tag),
                },
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'resources/js'),
        },
    }

});

But even I removed node_modules directory and reinstalled all packages I have the same error ?

How to fix it ?"

"devDependencies": {
        "@inertiajs/vue3": "^2.0.0",
        "@tailwindcss/forms": "^0.5.3",
        "@vitejs/plugin-vue": "^5.0.0",
        "@vue/server-renderer": "^3.4.0",
        "laravel-vite-plugin": "^1.0",
        "postcss": "^8.4.31",
        "tailwindcss": "^3.2.1",
        "vite": "^6.0",
        "vue": "^3.4.0"
    },
    "dependencies": {
        "@heroicons/vue": "^2.2.0",
        "@vueform/multiselect": "^2.6.11",
        "flowbite": "^2.5.2",

本文标签： vuejs3Why adding heroiconsvue package on my LaravelTailwindcss site I got error using itStack Overflow