Member Since 8 Months Ago
4,710 experience to go until the next level!
In case you were wondering, you earn Laracasts experience when you:
Earned once you have completed your first Laracasts lesson.
Earned once you have earned your first 1000 experience points.
Earned when you have been with Laracasts for 1 year.
Earned when you have been with Laracasts for 2 years.
Earned when you have been with Laracasts for 3 years.
Earned when you have been with Laracasts for 4 years.
Earned when you have been with Laracasts for 5 years.
Earned when at least one Laracasts series has been fully completed.
Earned after your first post on the Laracasts forum.
Earned once 100 Laracasts lessons have been completed.
Earned once you receive your first "Best Reply" award on the Laracasts forum.
Earned if you are a paying Laracasts subscriber.
Earned if you have a lifetime subscription to Laracasts.
Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.
Earned once you have achieved 500 forum replies.
Earned once your experience points passes 100,000.
Earned once your experience points hits 10,000.
Earned once 1000 Laracasts lessons have been completed.
Earned once your "Best Reply" award count is 100 or more.
Earned once your experience points passes 1 million.
Earned once your experience points ranks in the top 50 of all Laracasts users.
Earned once your experience points ranks in the top 10 of all Laracasts users.
Started a new Conversation How To Start With Laravel Suggestion?
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?
Replied to VUE Is Regret.
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.
Started a new Conversation VUE Is Regret.
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.
Replied to Vue 2.0 Resize Screen Error
Could you please suggest a method? Vue is not at all suitable for responsive.
Started a new Conversation Vue 2.0 Resize Screen Error
<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."
Started a new Conversation Vue JS 2.0 "div" Single Root Element Remove
How can I delete a single root element. I am using Bootstrap 5 and this is confusing.
Started a new Conversation Where Can I Find Paid Value Components?
I need properly coded vue components. Where can I get them?
Started a new Conversation VUE Screen Size And After Resize Is It Possible To Combine ?
"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 ?
Started a new Conversation Vue JS Change The Value Of The Variable In Data()
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;
}
});
Started a new Conversation Why Is There No "down Allow" In Laravel 8.0?
Command;
php artisan down --allow=11.111.5.224
Response;
The "--allow" option does not exist.
Started a new Conversation What Is Your UI Suggestion For Laravel And Vue?
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.
Awarded Best Reply on Laravel 9x-dev Jquery Warning!
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
Replied to Laravel 9x-dev Jquery Warning!
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
Started a new Conversation Laravel 9x-dev Jquery Warning!
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 ?
Replied to Why Error ? Laravel 8 Install
Replied to Why Error ? Laravel 8 Install
"dev-develop" not the project name. A reference to the 8.0 installation. Project name: "e-commerce"
Started a new Conversation Why Error ? Laravel 8 Install
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 ???
Started a new Conversation Laravel, How Do Control User Roles ?
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 ?
Awarded Best Reply on About Github Markdown Syntax For Link Target
@paulmaxos Pre-made. But now seems impossible. In the past, it has been used by bad people in methods such as XSS.
Replied to About Github Markdown Syntax For Link Target
@paulmaxos Pre-made. But now seems impossible. In the past, it has been used by bad people in methods such as XSS.
Replied to About Github Markdown Syntax For Link Target
demo
With this suggestion, the page does not open in a new tab. This can be used for the current tab.
Started a new Conversation About Github Markdown Syntax For Link Target
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?
Started a new Conversation Where I Find Clear Code Laravel Template ?
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.
Started a new Conversation How To Update Bootstrap 5 In Laravel?
Laravel uses bootstrap 4 to start. How do I upgrade to Bootstrap 5.0 ?
Started a new Conversation Sidebar Navs Issue.
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?
Replied to VUE On Run When IOS Safari Web Browser URL Bar Change Status.
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".
Started a new Conversation VUE On Run When IOS Safari Web Browser URL Bar Change Status.
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)
Awarded Best Reply on The "Vue Js" Function Is Not Responding At All.
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>
Replied to The "Vue Js" Function Is Not Responding At All.
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>
Replied to The "Vue Js" Function Is Not Responding At All.
It can happen. You are still interested. Thank you for that.
Replied to The "Vue Js" Function Is Not Responding At All.
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.
Replied to The "Vue Js" Function Is Not Responding At All.
@spyworld I shared the Vue template. How can I explain it more clearly?
Started a new Conversation The "Vue Js" Function Is Not Responding At All.
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>
Started a new Conversation How Do I Get Screen Width On Vue Component ?
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
}
},
}
Replied to When The Page Is Refreshed, Only The Component Is Refreshed To VUE Router?
Yeah that's bad idea. I guess I should try another way.
Started a new Conversation When The Page Is Refreshed, Only The Component Is Refreshed To VUE Router?
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 ?
Replied to How Does The Component Wait For The Axios Response Before It Is Shown?
Is this the only solution? So is it the shortest solution? Do you have a more creative idea?
Started a new Conversation How Does The Component Wait For The Axios Response Before It Is Shown?
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>
Started a new Conversation How Use Vue Page Loading Animation ?
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>
Started a new Conversation Laravel Vue Work But Have Error ?
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>
*/
Replied to Vue Props Directly Error ?
what if there is a build that uses "beforeMount"?
beforeMount(){
this.initialpropUpdate();
},
Started a new Conversation Vue Props Directly Error ?
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>
Started a new Conversation How Do Import Other Template On Vue Template ?
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.