How to use Vue.js plugins and components in Laravel

Question

I am using Vue.js (within the Laravel framework) and I'm new to both. I'm trying to understand some basic ideas about some code I"m trying to use:

App.js:

import Vue from 'vue';
import Toasted from 'vue-toasted';
Vue.component('toast-alert', require('./components/ToastAlert.vue'));
Vue.use(Toasted);

ToastAlert.vue:

<template>

</template>

<script>
export default {

    props: {

    },
    mounted() {
        this.showToast()
    },
    data() {
        return {
            message: 'Status Update',
        }
    },
    methods: {
        showToast() {
            this.$toasted.show(this.message, {
                duration: 3000
            });

        }
    }
}
</script>

Questions:

1) I understand the import tells the script that we ant to pull in certain node modules but I don't totally understand what use() is for. I have read documentation to see thats what you do with plugins (https://vuejs.org/v2/guide/plugins.html), but not really understanding more than that.

2) Again from the documentation, I see that when registering a Vue component, the second parameter is a list of options, ie: template, props, methods etc. I'm a bit confused about what require does and how it translates the vue file (which is a composed of tags and a tag exporting an object) into a final object which meets the standards of Vue.component.

Brandon Smith Brandon Smith · Accepted Answer · 2018-04-27T13:11:17

1) In Vue, calling Vue.use( Plugin, Options ) makes the plugin available throughout the application. It's basically a way to bootstrap a plugin i.e. Vue-Toasted, so you can use it throughout your application. You can define configuration options as well here.

2) Vue.component is used to register (your own) components in the application. It allows them to be used within each other component, without having to define them in each file. Think of the app.js file as the bootstrap file, it defines all of the plugins, components, etc. and registers them for use in Vue. require is importing the file and Vue is parsing the template and object. Note this is all compiled in webpack and cannot load in a browser as-is.

How to use Vue.js plugins and components in Laravel

1 Answers