2

What is the corect way to import vue packages in laravel 5.6? It comes with vue and bootstrap preinstall. I see they are all compile in app.js from public directory but I can figure out how to import https://github.com/moreta/vue-search-select and use it. After I tried to import it on my own:

Error:

ncaught TypeError: Vue.component is not a function

At line:

Vue.component('search-user', __webpack_require__(42));

Until now I tried this:

assets/js/bootstrap.js:

import { BasicSelect } from 'vue-search-select';
window.BasicSelect = BasicSelect;

assets/js/app.js:

require('./bootstrap');

window.Vue = require('vue');
window.Vue = require('vue-search-select');

Vue.component('search-user', require('./components/SearchUser.vue'));

var app = new Vue({
   el: '#app'
})

components

<template>
    <basic-select :options="options"
                  :selected-option="item"
                  placeholder="select item"
                  @select="onSelect">
    </basic-select>
</template>

<script>

    export default {
        data() {
            return {
                keywords: null,
                options: []
            };
        },

        watch: {
            keywords(after, before) {
                if (this.keywords.length > 0)
                    this.fetch();
            }
        },

        methods: {
            fetch() {
                axios.get('/api/search', {params: {keywords: this.keywords}})
                    .then(response => this.options = response.data)
                    .catch(error => {
                    });
            },
            onSelect (item) {
                this.item = item
            },
            reset () {
                this.item = {}
            },
            selectOption () {
                // select option from parent component
                this.item = this.options[0]
            },
            components: {
                BasicSelect
            }
        }
    }

</script>

I ran: npm install and npm run watch:

"devDependencies": {
        "ajv": "^6.0.0",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.4",
        "popper.js": "^1.12",
        "uikit": "^3.0.0-beta.35",
        "vue": "^2.5.7",
        "vue-search-select": "^2.5.0"
    },
    "dependencies": {
        "axios": "^0.17.1",
        "jquery": "^3.3.1"
    }
Jarlio
  • 117
  • 1
  • 2
  • 11

2 Answers2

2

I think that the simple will do

window.Vue = require('vue');
require('vue-search-select');

Then in your components you can import what you need on top:

import { BasicSelect } from 'vue-search-select';

export default {
    data() {
        return {
            keywords: null,
            options: [],
            item: null
        };
    },
...
Nikola Gavric
  • 3,507
  • 1
  • 8
  • 16
  • [Vue warn]: Property or method "item" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. After this I deleted from bootstrap thinking that doesnt have sense anymore since I import it app.js: import { BasicSelect } from 'vue-search-select'; window.BasicSelect = BasicSelect; Same error as above. After I added window.Vue= require('vue-search-select') same error as in my post. – Jarlio Feb 22 '18 at 11:26
  • You import `BasicSelect` inside of your component (`*.vue`) and the main library `vue-search-select` inside of your `app.js`, just like I mentioned above, the issue you are getting now is that `this.item` is undefined in your `.vue` component, just create it – Nikola Gavric Feb 22 '18 at 11:28
0

One missing detail that tricked me with this one, you need to register the components like this, otherwise it won't be found:

components: {
  ModelSelect,
  BasicSelect
},
GiulioG
  • 369
  • 4
  • 15