After installing vue3-select2-component with their document when i implementing that. it doesn't show in output on html but i have the html of that in source code

BTW: i'm using inertiajs on Laravel framework

install:

// npm install
npm install vue3-select2-component --save

Use as component:

import {createApp, h} from 'vue'
import BootstrapVue3 from 'bootstrap-vue-3'
import IconsPlugin from 'bootstrap-vue-3'
import {InertiaProgress} from "@inertiajs/progress";
import {createInertiaApp, Head} from '@inertiajs/inertia-vue3'
import {Link} from "@inertiajs/inertia-vue3"
///...
import Select2 from 'vue3-select2-component';

import {createStore} from "vuex"

///...

createInertiaApp({
    resolve: async name => {
        return (await import(`./pages/${name}`)).default;
    },
    setup({el, App, props, plugin}) {
        createApp({render: () => h(App, props)})
            .use(plugin)
            .use(bootstrap)
            .use(BootstrapVue3)
            .use(IconsPlugin)
            .use(VueSweetalert2)
            .component('Link', Link)
            .component('Select2', Select2)
            .mount(el)
    },
    title: title => 'azizam - '   title
}).then(r => {
});

vuejs page which i want to use into that:

<template>
<Select2 v-model="myValue" :options="myOptions"
         :settings="{ settingOption: value, settingOption: value }"
         @change="myChangeEvent($event)"
         @select="mySelectEvent($event)" />
</template>

<script>
import menubar from "./menubar";
import emulator from "./emulator";
import {mapActions} from "vuex";
import notification from "../../../partials/notification";
export default {
    name: "image",
    data() {
        return {
            caption: '',
            myValue: '',
            myOptions: ['op1', 'op2', 'op3']
        }
    },
    components: {
        menubar,
        emulator,
        notification
    },
    methods: {
        ...mapActions([
            'changeBreadcrumb'
        ]),
        myChangeEvent(val){
            console.log(val);
        },
        mySelectEvent({id, text}){
            console.log({id, text})
        }
    },
    mounted() {
        const payload = {
            title: 'محصولات',
            subTitle: 'ایجاد محصول تک عکس در سامانه'
        };
        this.changeBreadcrumb(payload);
    }
}
</script>

console log:

Warning - slinky.min.js is not loaded. application.js:336:21
[Vue warn]: A plugin must either be a function or an object with an "install" function. vendor.js:10544:17
[Vue warn]: Plugin has already been applied to target app. vendor.js:10544:17

Use of Mutation Events is deprecated. Use MutationObserver instead. content.js:19:11
Source map error: Error: request failed with status 404
Resource URL: http://127.0.0.1:8000/js/vendor.js?id=594b688c9609a79fb52afd907a69c736
Source Map URL: tooltip.js.map

in console as you can see i don't get any error for this component

html source code:

<select2 options="op1,op2,op3" settings="[object Object]"></select2>

and then webpack:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    //.sass('resources/scss/app.scss','public/css')
    .extract()
    .vue({
        version: 3,
        options: {
            compilerOptions: {
                isCustomElement: (tag) => ['Select2'].includes(tag),
            },
        },
    })
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])
    .version();

CodePudding user response：

The problem is you've configured Vue to treat <Select2> as a custom element, so the actual component does not get rendered.

The fix is to remove that configuration:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    //.sass('resources/scss/app.scss','public/css')
    .extract()
    .vue({
        version: 3,

        //options: {
        //    compilerOptions: {
        //        isCustomElement: (tag) => ['Select2'].includes(tag), ❌ remove this
        //    },
        //},
    })
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])
    .version();