Vue-select: Failed to mount component: template or render function not defined.

[jessiesiat]

I am using laravel elixer (webpack) in compiling this but i got this error.
Did i missed something??? I am using v2

Vue.component('v-select', require('vue-select'))

[sagalbot]

My guess is that it'd have to do with standalone vs runtime only builds..

Can you post your full build setup?

[jessiesiat]

I am using laravel elixir so the exported vue is only runtime build . Vue runtime build does not support
template option only render function. I guest you have to provide runtime build of vue-select when using
npm and that is using render function.

my gulpfile.js
elixir(mix => { mix.webpack('app.js', './public/js/vue.js'); })

app.js
window.Vue = require('vue'); Vue.component('v-select', require('vue-select'))

[Johnathan]

Getting the same issue using the latest version of Vue 2 and Laravel mix https://laravel.com/docs/5.4/mix#running-mix

Using default configuration.

---

EDIT - Should have just done what the docs said. Sorted now.

@jessiesiat instead of doing require(...) try

import vSelect from 'vue-select';
Vue.component( 'v-select', vSelect );

[jessiesiat]

It works now @Johnathan using import instead of require
Thanks!

[sagalbot]

That's a really odd fix but I'm glad it's working for you!

[imranrbx]

Worked for me in as well using with laravel 5.5 LTS

[xavierpena]

I am using the solution proposed by @Johnathan but Typescript tells me:

TS7016: Could not find a declaration file for module 'vue-select'. 'path/to/proj/node_modules/vue-select/dist/vue-select.js' implicitly has an 'any' type.

If I use it like this:

const vSelect = require('vue-select');
Vue.component('v-select', vSelect);

...it compiles, but the console tells me:

Failed to mount component: template or render function not defined.

found in

---> <VSelect>

[Johnathan]

@xavierpena You need to import instead of require

import vSelect from 'vue-select';
Vue.component( 'v-select', vSelect );

[xavierpena]

@Johnathan When I do that, my typescript app breaks saying:

TS7016: Could not find a declaration file for module 'vue-select'. 'path/to/project/node_modules/vue-select/dist/vue-select.js' implicitly has an 'any' type.

And for the life of me I can not find a solution to that.

This typescript issue suggests that using "require" should work (but it does not, it just generates a different error):
https://github.com/microsoft/typescript/issues/3019

[xavierpena]

I have finally found a way to solve it.

The solution uses '@riophae/vue-treeselect' (instead of 'vue-select') but the procedure is exactly the same:

---

Quick & dirty solution (when one does not care about the type and just wants to import the library)

Steps:

1. Change tsconfig.json (the Typescript configuration of your project) to allow import Treeselect from '@riophae/vue-treeselect';:

   "noImplicitAny": false

(without this step you get an error that states: TS7016: Could not find a declaration file for module '@riophae/vue-treeselect'. 'path/to/project/node_modules/@riophae/vue-treeselect/dist/vue-treeselect.min.js' implicitly has an 'any' type.)

1. Import module and register as 'treeselect':

   import Treeselect from '@riophae/vue-treeselect';

   Vue.component('treeselect', Treeselect);

(without this step you get an error that states: Unknown custom element: <treeselect> - did you register the component correctly? For recursive components, make sure to provide the "name" option.)

1. Use it in the view:

   <treeselect v-model="value" :multiple="true" :options="source" />

2. Rember to set the style at the bottom of the .vue.html page:

   <style src="@riophae/vue-treeselect/dist/vue-treeselect.min.css"></style>

---

If you want to do things properly, I highly recommend this article:

"Write a declaration file for a third-party NPM module"

https://medium.com/@chris_72272/migrating-to-typescript-write-a-declaration-file-for-a-third-party-npm-module-b1f75808ed2

[Andrei0401]

Please, try this
var VSelect = require('vue-select/dist/vue-select').VueSelect;

[davyzhang]

@Andrei0401 you just saved my day!

[robertsheacole]

You can also use this plugin so you don't have to put .default on the end of your requires. https://github.com/59naga/babel-plugin-add-module-exports

[mota57]

Non of the solutions are working