laravel & vue.JS: 'component', 'import' and 'use' in app.js

Question

I'm using laravel together with VueJS and I never entirely understood the logic behind the 'import', 'use' and 'component' used in app.js. Maybe someone could give me a hint/link on how to use them correctly.

To use custom vue components (separate files) in a blade I need to define them in the root 'app.js' file.

Now here I'm kind of lost. Inside the app.js file there are:

window.Vue = require('vue');
[..]

Vue.component('my-vue-component', require('./components/my-vue-component.vue').default);
[..]

import Vue from 'vue';
import VueDraggableResizable from 'vue-draggable-resizable';
[..]

Vue.use(VueClipboard);

as well as:

const app = new Vue({
    el: '#app',
    components: {
        dropZone: vue2Dropzone,
        draggable, Hooper, Slide, HooperPagination,
        'my-vue-component': MyVueComponent,
        [..]
    },

What are 'component', 'import', 'use' and 'components:{' doing exactly?

'component' probably defines the component file with the template.
'import' -> I dont' know what that does.
'use' -> also no idea.
'components: {' -> probably makes the link back to the template file by passing the name of the component.

tony19 · Accepted Answer · 2022-07-15 01:44:51Z

2

1.import is not vue related. Its function is to bring another js module into current js module. If u know old js, it is similar to require(), it was introduced in es6.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
https://stackoverflow.com/questions/46677752/the-difference-between-requirex-and-import-x#:~:text=The%20major%20difference%20between%20require,act%20the%20same%20as%20require%20. this answer explained whats different between import and require.

2.Vue.use is vue's feature, to install vue plugin. Links below explained what's a vue plugin looks like and how to install it.

https://v2.vuejs.org/v2/guide/plugins.html

3.Vue.component and components both are the ways for vue to register vue component.

https://v2.vuejs.org/v2/guide/components-registration.html

edited Jul 15, 2022 at 1:44

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 10, 2020 at 13:19

LHJ

6925 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dominic Over a year ago

Nice, thank you for the links and explanation @HongJian, will check them out.

Collectives™ on Stack Overflow

laravel & vue.JS: 'component', 'import' and 'use' in app.js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related