vue js flash component not working when npm production works npm run dev

Hi all , The vuejs inside the forum episode https://laracasts.com/series/lets-build-a-forum-with-laravel/episodes/29

is not working when I run npm run production , but its working when I run npm run dev or watch

does any one has any ideas on this ? thanks

this is how my app.js look like

require('./bootstrap');

window.Vue = require('vue');


Vue.component('flash', require('./components/Flash.vue').default);

window.events = new Vue();

window.flash = function (message, level = 'success') {
    window.events.$emit('flash', { message, level });
};

let app = new Vue({
	el: '#app',
});

how I reder it

<flash message="{{ session('flash') }}"></flash>

my package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.1",
        "laravel-mix-purgecss": "^5.0.0",
        "lodash": "^4.17.19",
        "resolve-url-loader": "^3.1.0",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "algoliasearch": "^4.5.1",
        "dropzone": "^5.7.2",
        "instantsearch.js": "^4.8.3",
        "tailwindcss": "^1.8.10",
        "trix": "^1.3.0",
        "turbolinks": "^5.2.0",
        "vue": "^2.6.12",
        "vue-instantsearch": "^3.4.1",
        "vue-turbolinks": "^2.1.0",
        "vuex": "^3.5.1"
    }
}

my component :

        created() {
            if (this.message) {
                this.flash();
            }
            window.events.$on(
                'flash', data => this.flash(data),
                console.log('vue js flash created22')
//in production env , the console .log is working , I do not even know why the flash message its not working 
            );


        },

in production env , the console .log is working , I do not even know why its not working the flash message any help will be highly appreciated !

bobbybouwmann

5 years ago

Level 88

Mmh, that is very odd. npm run production is doing the same thing as npm run dev, but instead it just minifies everything.

Are you sure this.flash is correct here? I see that you assign window.flash, should you call window.flash in your component instead?

andiliang

5 years ago

Level 39

hi thanks for responding , the flash method is living inside the component

<script>
    export default {
        props: ['message'],
        data() {
            return {
                body: this.message,
                level: 'success',
                show: false
            }
        },
        created() {
            if (this.message) {
                this.flash();
            }
            window.events.$on(
                'flash', data => this.flash(data),
                console.log('vue js flash created22')
            );


        },
        methods: {
            flash(data) {
                if (data) {
                    this.body = data.message;
                    this.level = data.level;
                }
                this.show = true;
                this.hide();
            },
            hide() {
                setTimeout(() => {
                    this.show = false;
                }, 3000);
            }
        }
    };
</script>

that should not be the issue , since dev env is working.

Sinnbeck

5 years ago

Level 102

Any errors in console? F12

andiliang

5 years ago

Level 39

hi bro , no errors

andiliang

5 years ago

Level 39

after few days of thinking , I just reliaze this morning , maybe it caused by purgecss , because in production I used it minimize tailwind css

Don't use string concatenation to create class names

<div :class="text-{{ error ? 'red' : 'green' }}-600"></div>
Do dynamically select a complete class name

<div :class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

issue is above @sinnbeck @bobbybouwmann thanks all

bobbybouwmann

5 years ago

Level 88

@andiliang Aah great you found the solution. I didn't know you showed it based on a generated class ;)

1 like

Please or to participate in this conversation.