How register vue-select component in vue 3 options API app (no TypeScript)?

604 Views Asked by At

I try to use vue-select.

main.js:

import { createApp } from "vue";
import App from "./App.vue";

import { VueSelect } from "vue-select";

Then on npmjs.org the instruction is to register like:

createApp(App)
    .component("v-select", VueSelect)
    .mount("#app");

On vue-select.org the instruction to install is (in codepen template) (adapted):

const { createApp } = Vue;

createApp({
  components: {
    VueSelect: window["v-select"]
  }
}).mount("#app");

The first one gives runtime error:

Cannot read properties of undefined (reading 'mount')

The second one seems to work better but still results in just an empty page in the browser with warning message:

[Vue warn]: Component is missing template or render function.

Both errors point to the .mount() part of above code.

Without registering vue-select this code looks like this:

createApp(App).mount('#app')

and that works fine.

I use Vue 3 Options API style in this app.

What is wrong and how to solve this?

I tried different package for vue select: vue3-select but that turned out to require Typescript which I'm not using.

Edit: Tried now:

const app = createApp(App)
app.component('v-select', VueSelect)
app.mount('#app')

that gives a warning in the terminal running npm run serve: warning in ./src/main.js export 'VueSelect' (imported as 'VueSelect') was not found in 'vue-select' (possible exports: default)

Then the site shows up in the browser however with warning: [Vue warn]: Failed to resolve component: v-select If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at at and the webpage shows no select element. In the developer tools however the element appears to be rendered, but not correctly, like:

<v-select options="[object Object]" label="club"></v-select>
0

There are 0 best solutions below