app_dev

I want to prepare a question-answer system. Show your code and ask about the problem. People who know the answers. How can I get started? It's like a simplified version of Stackoverflow and laracast. Do you know of an application written before?

I feel very good. Come on show your project.

https://laracasts.com -> Do you think this is a SPA?

Come on man. Google uses Jquery in most places. But there is a place where you are right I will not use vue. It's that easy.

Ok come on show me a project. theme uniquely coded. with vue ...

He runs the so-called dom. It has nothing to do. Not responsive. Jquery is easier. I stop developing VUE. Laravel and PHP are sufficient. It wastes time. Everything is individually packaged as if the manufacturer has endured a lot of trouble. Fullstack is a complete nuisance for a developer. Sorry Evan You. Rasmus Lerdorf and Taylor Otwell is much better. Ex. Jquery to : $dom.slideUp() but vue to: packet download and import. Bullshit. Nobody can improve the responsive site. You impose on people. VUE you are nothing. If you use VUE, think twice. "Evan You" show me your project that works perfectly. Prove me wrong. But you can't. Because you do not even believe what it produced.

Could you please suggest a method? Vue is not at all suitable for responsive.

fragment use

<template>
    <fragment>
    <HEADER v-if="screen"></HEADER>
    <MHEADER v-else></MHEADER>
        <div class="container-fluid viewContainer">
            <router-view></router-view>
        </div>
    <FOOTER></FOOTER>
    </fragment>
</template>
<script>
import HEADER from "./Main/Header.vue"
import FOOTER from "./Main/Footer.vue"
import MHEADER from "./Mobile/mHeader.vue"

export default {
    data () {
      return {
          baseUrl: "https://example.com/",
          screen: this.scWidth()
      }
    },
    components: {
      HEADER,
      FOOTER,
      MHEADER
    },
    beforeCreate(){
        
    },
    created(){
      window.addEventListener("resize", this.myEventHandler);
    },
    beforeMount(){

    },
    mounted(){

    },
    beforeUpdate(){

    },
    updated(){
      
    },
    beforeDestroy(){

    },
    destroyed(){
      window.removeEventListener("resize", this.myEventHandler);
    },
    methods: {
        scWidth(){
          if(window.innerWidth >= 992){
            return true;
          }else{
            return false;
          }
        },
        myEventHandler(e) {
          if(window.innerWidth >= 992){
            this.screen = true;
          }else{
            this.screen = false;
          }
        }
    }
}
</script>

Error;

[Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node."

How can I delete a single root element. I am using Bootstrap 5 and this is confusing.

I need properly coded vue components. Where can I get them?

"document ready" and "window.resize".

As you know, we want to develop websites that will work with all screens. Before coding the application, we need to create the main frame. Is it possible to combine the events I have mentioned ?

I want to combine these two events and get the screen width. Then I want to design for bootstrap's breakpoints. So I will have a responsive framework.

        data () {
            return {
                scsize: window.innerWidth, //ready default size
            };
        },

	//event listener component add and remove
        created() {
        window.addEventListener("resize", this.myEventResize);
        },
        destroyed() {
        window.removeEventListener("resize", this.myEventResize);
        },

            myEventResize(e) {
                this.scsize= window.innerWidth; // re-size and data update
            },

This works. But I'm not sure I'm doing it right. Because when I query it with "if" it only acts according to the default value. Whereas I want it to be alive.

Do we have to constantly parse these two events in order for screens to always work responsibly ?

Can't we build our code on it ?

        data () {
            return {
		mchck: false;
            };
        },

"this.mchck" variable is recognized outside, not inside. But what is the solution?

		    console.log(this.mchck); //it's good work.
                    $(document).mouseup(function(e) 
                    {
                        var container = $("#menu");
                        
                        if (!container.is(e.target) && container.has(e.target).length === 0) 
                        {
                            container.slideUp();
			    console.log(this.mchck); //loss. tired. not work :( why ?
			    //what i want to do: after slide up this.mchck = true;
                        }
                       
                    });

Command; php artisan down --allow=11.111.5.224

Response; The "--allow" option does not exist.

I am developing e-commerce software. I need a UI for the front end that will speed me up. What do you suggest me? I use vue, vuerouter. I will use Axios for my APIs. Using Bootstrap with vue is a waste of time. Vue compatible UI is required.

I found the solution somewhere for those who are curious, friends; https://stackoverflow.com/questions/32498328/how-to-add-jquery-in-laravel-project

But in its most abstract form; npm i -D jquery

I found the solution somewhere for those who are curious, friends; https://stackoverflow.com/questions/32498328/how-to-add-jquery-in-laravel-project

But in its most abstract form; npm i -D jquery

My resources/js/app.js

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');
    require('bootstrap');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo';

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     forceTLS: true
// });

Mix compile working success but this warning;

WARNING in ./resources/js/bootstrap.js
Module not found: Error: Can't resolve 'jquery' in '/home/example.com/e-commerce/resources/js'
 @ ./resources/js/bootstrap.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/scss/app.scss ./resources/sass/style.sass

I installed jquery with npm. Still jQuery Why it not find ?

@jlrdw @tray2 You are right. But let me give a detail; each website has its own php version. If you are working on the main server like me, change the php version of both the website and CLI.

Gives 5.8. Not installed 8.0.

"dev-develop" not the project name. A reference to the 8.0 installation. Project name: "e-commerce"

it is use. "composer create-project --prefer-dist laravel/laravel e-commerce dev-develop"

error: "

[InvalidArgumentException]

Could not find package laravel/laravel with version dev-develop in a version installable using your PHP version, PHP extensions and Composer version.

"

But WHY ???

I want user roles.

admin/moderator/onlogged/offlogged

Is there a document to require which changes ?

I will arrange;

Model file, Migration file,

What other files should I edit ? Can you give me a clue ?

@paulmaxos Pre-made. But now seems impossible. In the past, it has been used by bad people in methods such as XSS.

@paulmaxos Pre-made. But now seems impossible. In the past, it has been used by bad people in methods such as XSS.

demo With this suggestion, the page does not open in a new tab. This can be used for the current tab.

Can users of Github help ?

I want the page to be run in a new tab to view the demo. Here's what I've tried for markdown (README.md) syntax.

Live Demo: [demo](https://example.com){:target="_blank"} //kramdown

Live Demo: [demo](https://example.com){target="_blank"} //markdown

Live Demo: <a href="https://example.com" target="_blank">demo</a> //html

{:target="_blank"} and {target="_blank"} It was marked as plain text by markdown.

I have read some sources. He talks about removing the target attribute. Is this true? Isn't there really a way to run it in new page?

Hello dear friends, where can I get clean coded front-end starter templates? It could be VUE. Could be Bootstrap. It may be paid. It can be free. As you know, front-end templates generally don't meet the back-end logic as expected.

Laravel uses bootstrap 4 to start. How do I upgrade to Bootstrap 5.0 ?

I am having a problem on responsive. Let's see what a solution you suggest for this situation.

I have a "rezise" method in Vue.

            reziseHandler(e) {
                if(screen.width >= 992){
                    $(".sideTab").show();
                }else if(screen.width <= 991){
                    $(".sideTab").hide();
                }
            }

You know what I'm aiming for here. The screen will enlarge when the screen is resized, ie when the mobile view is turned sideways. For example iPad. According to Bootstrap grid, I need to have the "sidebar" menu displayed again.

There seems to be no problem. But the problem is big. As you know, safari is installed on devices like iPhone. And I detonate the bomb; "Address bar".

My dear friends; this address bar is idiot. Bother! I am rebelling. "APPLE" listen here. Why don't you respect the code we write ? Look at the photo. See it there.

https://imagesharing.com/uploads/20201228/f8e2815cda7533f66ab4332b0e0c9bb059db5746.png

The address bar gets smaller when there is something to scroll on the page. Isn't that a good thing for users? It enlarges the area on the screen.

I think this is unnecessary and complicates the developers' job. This address bar should be fixed small.

And you my friend What do you think about this subject ? Can you offer a solution? What would you do if you were?

I cant believe. There is no solution. There's no way to reduce or pin the address bar size. The only remedy is to change the header from "sticky-top" to "fixed-top".

How to fix it iOS safari web browser URL Bar => Width/Height ?

Because when the "scrool" moves up and down, the "URL Bar" gets smaller and larger. With what technologies is it possible to fix this small?

CSS OR JAVASCRİPT (VUE / javascript only)

Here is the solution. I do some research. Not the most accurate method. But for now I can use this.

Codes after changes:

<template>
                <li>
                    <a href="#" class="subMenu">Test Link</a>
                        <ul>
                        <li><a href="#">Sub 1</a></li>
                        <li><a href="#">Sub 2</a></li>
                        <li><a href="#">Sub 3</a></li>
                        </ul>
                </li>
</template>

<script>

    export default {

        created() {
        this.$nextTick(() => {
            $(".subMenu").click(function(){
                $(this).parent().children("ul").slideToggle();
            });
        });
        },
        methods: {
		
        },
        computed:{
            baseUrl(){
                return window.Laravel.baseUrl
            }
        },
        mounted: function(){
            
        }

    }
</script>

Here is the solution. I do some research. Not the most accurate method. But for now I can use this.

Codes after changes:

<template>
                <li>
                    <a href="#" class="subMenu">Test Link</a>
                        <ul>
                        <li><a href="#">Sub 1</a></li>
                        <li><a href="#">Sub 2</a></li>
                        <li><a href="#">Sub 3</a></li>
                        </ul>
                </li>
</template>

<script>

    export default {

        created() {
        this.$nextTick(() => {
            $(".subMenu").click(function(){
                $(this).parent().children("ul").slideToggle();
            });
        });
        },
        methods: {
		
        },
        computed:{
            baseUrl(){
                return window.Laravel.baseUrl
            }
        },
        mounted: function(){
            
        }

    }
</script>

It can happen. You are still interested. Thank you for that.

This component "App.vue". Think like index. And ı use vue router. The "handleSubMenu" function is installed by default in the "Mounted" section. So when a click event is triggered on the css class, the "DOM" works as expected. In jquery the selector works correctly. But vue doesn't run this.

@spyworld I shared the Vue template. How can I explain it more clearly?

I'm developing a menu. I've completed the CSS and HTML sections. Now it is necessary to run the "slideToggle" function. But it doesn't react at all. You can check it out below. I think the "this" selector doesn't work properly. "parent" cannot be selected.

<template>
                <li>
                    <a href="#" class="subMenu">Test Link</a>
                        <ul>
                        <li><a href="#">Sub 1</a></li>
                        <li><a href="#">Sub 2</a></li>
                        <li><a href="#">Sub 3</a></li>
                        </ul>
                </li>
</template>

<script>

    export default {
        methods: {
            handleSubMenu(){
                $(".subMenu").click(function(){
                    $(this).parent('ul').slideToggle();
                });
            }
        },
        computed:{
            baseUrl(){
                return window.Laravel.baseUrl
            }
        },
        mounted: function(){
            this.handleSubMenu();
        }

    }
</script>

How can I get the screen width on "methods" in Vue template ?

    export default {
        methods: {
            handleSearch(){
                //get the screen size. (Always)
            }
        },
        computed:{
            baseUrl(){
                return window.Laravel.baseUrl
            }
        },

    }

Yeah that's bad idea. I guess I should try another way.

The VUE Router works fine. But can we only refresh the component when the page is refreshed with "F5" or with the browser button? Is this possible ?

Is this the only solution? So is it the shortest solution? Do you have a more creative idea?

I don't want the component to display without Axios returning the result. How can I do this according to my codes below?

<template>
    <div v-if="auth">
    user component
    </div>
    <div v-else>
    login component
    </div>
</template>
<script>
    export default {
        data: function (){
            return {
                auth: this.initauth
            }
        },
        props: {
            initauth: Boolean
        },
        methods: {
            queryAuthInfos(){
                axios.get('/user-api/authinfos')
                .then(response => this.auth = response.data.auth);
            }
        },
        created(){
            this.queryAuthInfos();
        },
    }
</script>

Yes, use data()

How do I apply transition effects? I tried "vue-progress-path" but it didn't work. I guess I don't know where to put it.

//APP.VUE

<template>

        <p>
            <router-link :to="{ name: 'home' }">Home</router-link> |
            <router-link :to="{ name: 'user' }">User Page</router-link>
        </p>

        <div class="container">
            <router-view></router-view>
        </div>

</template>

<script>

    export default {

        computed:{
            baseUrl(){
                return window.Laravel.baseUrl
            }
        },

    }
</script>

This document could not help.

How can I fix the error?

<template>
    <div v-if="auth">
    user component
    </div>
    <div v-else>
    login component
    </div>
</template>
<script>
    export default {
        props: {
            auth: Boolean
        },
        methods: {
            queryAuthInfos(){
                axios.get('/user-api/authinfos')
                .then(response => (this.auth = response.data.auth));
            }
        },
        beforeMount(){
            this.queryAuthInfos();
        },
    }
</script>

/*

Console Error;

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "auth"

found in

---> <User> at resources/js/views/User.vue
       <App> at resources/js/views/App.vue
         <Root>

*/

what if there is a build that uses "beforeMount"?

        beforeMount(){
            this.initialpropUpdate();
        },

Why am I getting such an error ?

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "auth"

found in

---> <User> at resources/js/views/User.vue
       <App> at resources/js/views/App.vue
         <Root>

I use laravel to authenticate users. I trust PHP. I'm getting a json response using axios that returns verification pass / fail states. And I am using a vue router. Accordingly, a boolean type of data is returned "true/false". I keep this in a variable in the props part of Vue.

Now I have to write a condition. Can you help me with this? My condition looks like this;

If "props value" == "false" run "login.vue" else "user.vue". How am I going to achieve this? I'm very new to Vue yet.