Component Registration

I found this file on an ecommerce for component registration. I wonder if there is any reference to create this whole scripts? I don't know what are all the neccessary scripts for component registration?

This is the only reference I found: ref: https://vuejs.org/v2/guide/components-registration.html

app.js

import Vue from 'vue'
import SuiVue from 'semantic-ui-vue'
import axios from 'axios'
import numeral from 'numeral-es6'
import Autocomplete from 'vuejs-auto-complete'
import VueContentPlaceholders from 'vue-content-placeholders'

Vue.use(SuiVue)
Vue.use(VueContentPlaceholders)

// Carts
Vue.component('cart-total-price', require('./components/carts/TotalPrice').default);
Vue.component('cart-button-global', require('./components/carts/buttons/Global').default);
Vue.component('cart-button-wishlist', require('./components/carts/buttons/Wishlist').default);

Vue.component('cart-select-maturities', require('./components/carts/SelectMaturities').default);
Vue.component('cart-select-variants', require('./components/carts/SelectVariants').default);
Vue.component('cart-detail-action-button-wrapper', require('./components/carts/DetailActionButtonWrapper').default);

// MasterData
Vue.component('master-nutrition', require('./components/master/MasterNutrition').default);
Vue.component('master-benefit', require('./components/master/MasterBenefit').default);
Vue.component('master-format', require('./components/master/MasterFormat').default);

Object.defineProperty(Vue.prototype, '$bus', {
		get() {
    		return this.$root.bus;
		}
});

window.bus = new Vue();

window.axios = axios;
window.numeral = numeral;

Vue.prototype.$axios = window.axios;
Vue.prototype.$numeral = window.numeral;

window.Vue = Vue

window.app = new Vue({
		el: '#app',
		data: {
    	bus: bus // Here we bind our event bus to our $root Vue model.
		}
});

I also wonder where is the main.js that I normally created when building vue files?

bobbybouwmann

6 years ago

Level 88

What do you mean with main.js? It doesn't matter what filename you use. You need to make sure the file name you give it is used in the webpack (Laravel mix) configuration and is included on the page. That's it ;)

davy_yg

6 years ago

Level 27

Okay this is my my:

webpack.config.js

/**
 * As our first step, we'll pull in the user's webpack.mix.js
 * file. Based on what the user requests in that file,
 * a generic config object will be constructed for us.
*/
let mix = require('../src/index');

let ComponentFactory = require('../src/components/ComponentFactory');

new ComponentFactory().installAll();

require(Mix.paths.mix());

/**
* Just in case the user needs to hook into this point
* in the build process, we'll make an announcement.
*/

Mix.dispatch('init', Mix);

/**
* Now that we know which build tasks are required by the
* user, we can dynamically create a configuration object
* for Webpack. And that's all there is to it. Simple!
*/

let WebpackConfig = require('../src/builder/WebpackConfig');

module.exports = new WebpackConfig().build();

There is no app.js in it.

I normally have to run: npm install -g vue-cli

to create vue files.

bobbybouwmann

6 years ago

Level 88

You need to create a webpack.mix.js file in the root of your project directory and it should contain the following code

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix
    .js('resources/js/app.js', 'public/js');

This is the default setup with Laravel. However, it sounds to me that you're working with something you didn't create yourself. It could be the setup is different because of that.

Please or to participate in this conversation.