How to include VUE2 Components in Laravel?

In the case of this package.

// first you import vue and the component package:

import Vue from 'vue';
import Toast from 'vue-easy-toast';

// then according to the doc you extend vue:
Vue.use(Toast);


// then you should be able to call it inside your vue instance:

new Vue({
    el: '#app',
    methods: {
        onClick() {
            this.$toast('hello world');
        }
    }
});

Works, thanks. But for my own understandig may I ask some questions.

When to use which import/require? Look at these lines

import Toast from 'vue-easy-toast';

Why "Toast" (class name?) and where does the script look for "vue-easy-toast" (node_modules?)?

Vue.component('task-list', require('./components/TaskList.vue'));

Why is this component plugged in this way and not like above with "import"?

And last question: this.$toast('hello world');

Where is this function "$toast()" defined?

@chrisbenjamin Just remember to call Vue.use() before declaring the Vue instance. It is the preferred way of letting Vue know of your packages.

When you use an es6 import statement, webpack will look for that import in your node_modules directory via package.json. If your import is not in node_modules (like a component), you need to give it the path to the file. Regardless, JS files do not need the .js in an import statement.

Toast is the export from the package's module.

When you write Vue.compoent(), you are registering the component with the Vue instance. It too has to be declared before the Vue instance.

When you import a module through es6 imports, you have the option to declare a variable name like Toast. You can call it whatever you want, it doesn't have to be called Toast.

$toast() is defined in the module at src/index.js and starts at line 10..

@ejdelmonico Hey thanks, that helps me a lot to dive in. It's a little bit overwhelming me handling so many different things in this context. Haven't programmed for years.

I tried to adopt this to another Vue component. But I don't get it.

The component is added to node_modules via yarn. This way works:

require('../../../node_modules/chart.js/dist/Chart.js');
require('../../../node_modules/hchs-vue-charts/dist/vue-charts.js');
...
Vue.use(VueCharts);

Then I tried with import, but without luck:

import VueCharts from 'hchs-vue-charts';

What did I miss?

Source: https://github.com/hchstera/vue-charts

Then I have another concern: When I want to split the work creating a platform, based on Laravel and Vue2. Is it possible to integrate afterwards a Vue-Only projekt into Laravel?

You should not need to give the path in the require statements as long as you installed them and saved them as a dependency in package.json. Webpack will find them.

    // chartjs package
    require('chart.js');
    // vue-charts package
    require('hchs-vue-charts');
    Vue.use(VueCharts);

makes it globally available as long as you put before the Vue instance declaration. Just use something like this in a blade file

<!--line chart component-->
<chartjs-line></chartjs-line>

On a side note, this is a good package to use http://vue-chartjs.org/#/home