Laravel how do I import a vuejs package installed trough NPM

Question

(Disclaimer: I'm not very proficient in Vue)

What is the correct way to import/include a Vuejs package in my project? I somehow seem to not be able to import a file. I'm trying to import this package: https://github.com/sagalbot/vue-select

What I have done so far:

Ran the command: npm install vue-select

Tried adding the vue-select package to my Vue like so (in resources/assets/js/app.js):

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

Now when I use the v-select in my HTML file it gives this error in console: [Vue warn]: Unknown custom element: <v-select> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

What I've tried to fix this:

Instead of using this in app.js I used it in my *.vue file, I don't use webpack/browserify I think, so import doesnt work :/ I prefer not to use browserify.

I have vue-resource package aswell and that created a vue-resource.js file in my public/js directory which I can import to use vue-resource. It seems like vue-select doesn't create its own vue-select.js file.

If you have any suggestions, please let me know.

I have looked at this question: Import vue package in laravel but I don't understand what paths and files the lines should be added to.

Answer 1

I think this is hust your import statement. If you have installed it through npm, then you should import from vue-select. Also, use require instead of import, This way:

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

You may want to use it only in your Vue component, then you should load your own component as explained above, And in your own vue component say VueSelect.vueuse this:

<template>
    <!-- use it with name 'v-select' in your component -->
    <v-select></v-select>
</template>
<script>
export default {
    ...
    components: { vSelect: require('vue-select') },
    ...
}
</script>

Then you can register your own component a s global,

Vue.component('vue-select', require( './components/VueSelect.vue') );

And use it in your root component:

<vue-select></vue-select>

Update

If you are using laravel, it gives you laravel mix out of the box which compiles down your assets using webpack. All you need to do is run a compile script:

npm run dev

If you are making changes to your js files, you wouldn't want to run this over and over, so you can run watch command:

npm run watch

If this doesnt work for you, try watch-poll instead. Als, make sure you have installed all dependencies first:

npm install