Laravel如何导入通过NPM安装的vuejs软件包

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. [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.vue use 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 as 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