Vue js Customer Manager App Frontend

The text is hard to read on mobile. I’ll have to watch another time on my desktop.

How to remove port no 8080 from url

Adding customer is not working..
How to fix?

How do you deploy the backend from prev video and this front-end to a web-hosting? Please, sir, need it!

Great video, but I am stuck at not being able to display the data from database on the customers page, I have this error - Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1, any one had the same, or any help fixing it , i have been looking with no luck. Thanks

Great

it's not a managing system, it's just a crud

Hey,
Just a randon tip. Type cmd on File Explorer's path bar and it will open the cmd in the current directory of File Explorer. It's really helpful! 🤟🏻

Your console log errors are on steroids ..

Very nice video ! Can you please tell us how to handle cors error on post request ? Thanks!!!!

vue.esm.js?efeb:628 [Vue warn]: Missing required prop: "to"


found in


---> <RouterLink>
<Customers> at src/components/Customers.vue
<Root>
warn @ vue.esm.js?efeb:628
assertProp @ vue.esm.js?efeb:1690
validateProp @ vue.esm.js?efeb:1641
loop @ vue.esm.js?efeb:4668
initProps @ vue.esm.js?efeb:4701
initState @ vue.esm.js?efeb:4642
Vue._init @ vue.esm.js?efeb:5009
VueComponent @ vue.esm.js?efeb:5157
createComponentInstanceForVnode @ vue.esm.js?efeb:3292
init @ vue.esm.js?efeb:3123
createComponent @ vue.esm.js?efeb:5983
createElm @ vue.esm.js?efeb:5930
createChildren @ vue.esm.js?efeb:6058
createElm @ vue.esm.js?efeb:5959
createChildren @ vue.esm.js?efeb:6058
createElm @ vue.esm.js?efeb:5959
addVnodes @ vue.esm.js?efeb:6111
updateChildren @ vue.esm.js?efeb:6238
patchVnode @ vue.esm.js?efeb:6324
updateChildren @ vue.esm.js?efeb:6198
patchVnode @ vue.esm.js?efeb:6324
updateChildren @ vue.esm.js?efeb:6198
patchVnode @ vue.esm.js?efeb:6324
patch @ vue.esm.js?efeb:6487
Vue._update @ vue.esm.js?efeb:3951
updateComponent @ vue.esm.js?efeb:4069
get @ vue.esm.js?efeb:4482
run @ vue.esm.js?efeb:4557
flushSchedulerQueue @ vue.esm.js?efeb:4313
(anonymous) @ vue.esm.js?efeb:1989
flushCallbacks @ vue.esm.js?efeb:1915
Promise.then (async)
timerFunc @ vue.esm.js?efeb:1942
nextTick @ vue.esm.js?efeb:1999
queueWatcher @ vue.esm.js?efeb:4405
update @ vue.esm.js?efeb:4547
notify @ vue.esm.js?efeb:739
reactiveSetter @ vue.esm.js?efeb:1064
proxySetter @ vue.esm.js?efeb:4634
(anonymous) @ Customers.vue?898a:51
Promise.then (async)
p$1.then @ vue-resource.esm.js?f3ef:235
fetchCustomers @ Customers.vue?898a:49
created @ Customers.vue?898a:61
invokeWithErrorHandling @ vue.esm.js?efeb:1863
callHook @ vue.esm.js?efeb:4222
Vue._init @ vue.esm.js?efeb:5011
VueComponent @ vue.esm.js?efeb:5157
createComponentInstanceForVnode @ vue.esm.js?efeb:3292
init @ vue.esm.js?efeb:3123
merged @ vue.esm.js?efeb:3310
createComponent @ vue.esm.js?efeb:5983
createElm @ vue.esm.js?efeb:5930
createChildren @ vue.esm.js?efeb:6058
createElm @ vue.esm.js?efeb:5959
patch @ vue.esm.js?efeb:6521
Vue._update @ vue.esm.js?efeb:3948
updateComponent @ vue.esm.js?efeb:4069
get @ vue.esm.js?efeb:4482
Watcher @ vue.esm.js?efeb:4471
mountComponent @ vue.esm.js?efeb:4076
Vue.$mount @ vue.esm.js?efeb:9057
Vue.$mount @ vue.esm.js?efeb:11953
(anonymous) @ main.js?1c90:33
./src/main.js @ app.js:1456
_webpack_require_ @ app.js:679
fn @ app.js:89
0 @ app.js:1465
_webpack_require_ @ app.js:679
(anonymous) @ app.js:725
(anonymous) @ app.js:728
vue.esm.js?efeb:628 [Vue warn]: Error in render: "TypeError: Cannot read property '_normalized' of undefined"


found in


---> <RouterLink>
<Customers> at src/components/Customers.vue
<Root>
warn @ vue.esm.js?efeb:628
logError @ vue.esm.js?efeb:1893
globalHandleError @ vue.esm.js?efeb:1888
handleError @ vue.esm.js?efeb:1848
Vue._render @ vue.esm.js?efeb:3553
updateComponent @ vue.esm.js?efeb:4069
get @ vue.esm.js?efeb:4482
Watcher @ vue.esm.js?efeb:4471
mountComponent @ vue.esm.js?efeb:4076
Vue.$mount @ vue.esm.js?efeb:9057
Vue.$mount @ vue.esm.js?efeb:11953
init @ vue.esm.js?efeb:3127
createComponent @ vue.esm.js?efeb:5983
createElm @ vue.esm.js?efeb:5930
createChildren @ vue.esm.js?efeb:6058
createElm @ vue.esm.js?efeb:5959
createChildren @ vue.esm.js?efeb:6058
createElm @ vue.esm.js?efeb:5959
addVnodes @ vue.esm.js?efeb:6111
updateChildren @ vue.esm.js?efeb:6238
patchVnode @ vue.esm.js?efeb:6324
updateChildren @ vue.esm.js?efeb:6198
patchVnode @ vue.esm.js?efeb:6324
updateChildren @ vue.esm.js?efeb:6198
patchVnode @ vue.esm.js?efeb:6324
patch @ vue.esm.js?efeb:6487
Vue._update @ vue.esm.js?efeb:3951
updateComponent @ vue.esm.js?efeb:4069
get @ vue.esm.js?efeb:4482
run @ vue.esm.js?efeb:4557
flushSchedulerQueue @ vue.esm.js?efeb:4313
(anonymous) @ vue.esm.js?efeb:1989
flushCallbacks @ vue.esm.js?efeb:1915
Promise.then (async)
timerFunc @ vue.esm.js?efeb:1942
nextTick @ vue.esm.js?efeb:1999
queueWatcher @ vue.esm.js?efeb:4405
update @ vue.esm.js?efeb:4547
notify @ vue.esm.js?efeb:739
reactiveSetter @ vue.esm.js?efeb:1064
proxySetter @ vue.esm.js?efeb:4634
(anonymous) @ Customers.vue?898a:51
Promise.then (async)
p$1.then @ vue-resource.esm.js?f3ef:235
fetchCustomers @ Customers.vue?898a:49
created @ Customers.vue?898a:61
invokeWithErrorHandling @ vue.esm.js?efeb:1863
callHook @ vue.esm.js?efeb:4222
Vue._init @ vue.esm.js?efeb:5011
VueComponent @ vue.esm.js?efeb:5157
createComponentInstanceForVnode @ vue.esm.js?efeb:3292
init @ vue.esm.js?efeb:3123
merged @ vue.esm.js?efeb:3310
createComponent @ vue.esm.js?efeb:5983
createElm @ vue.esm.js?efeb:5930
createChildren @ vue.esm.js?efeb:6058
createElm @ vue.esm.js?efeb:5959
patch @ vue.esm.js?efeb:6521
Vue._update @ vue.esm.js?efeb:3948
updateComponent @ vue.esm.js?efeb:4069
get @ vue.esm.js?efeb:4482
Watcher @ vue.esm.js?efeb:4471
mountComponent @ vue.esm.js?efeb:4076
Vue.$mount @ vue.esm.js?efeb:9057
Vue.$mount @ vue.esm.js?efeb:11953
(anonymous) @ main.js?1c90:33
./src/main.js @ app.js:1456
_webpack_require_ @ app.js:679
fn @ app.js:89
0 @ app.js:1465
_webpack_require_ @ app.js:679
(anonymous) @ app.js:725
(anonymous) @ app.js:728
Show 3 more frames
vue.esm.js?efeb:1897 TypeError: Cannot read property '_normalized' of undefined

in customers.vue file i am having this error

<tr v-for="customer in customers">
[vue/require-v-for-key]
Elements in iteration expect to have 'v-bind:key' directives.eslint-plugin-vue

Hi? What do you think about Flutter? Is better Then vue?

Can this be considered as SPA since there is no page reload?

You SHOULD use the ESLint

I was having that same issue with the capitalization in the search field, and it was driving me crazy at first! I miss the search from Vue 1...

more on vue js with vex? any plans ?
:D

gave me a good solution.. great work

Very simple and useful, thank'u Brad

Vue free tutorial for advanced web development, please

I like the keyboard sound :D

First off, nice tutorial. I have a question though, what's the difference between 'vue create' and 'vue init'?

Can you make a video in adding a pagination

Very excellent tutorial. I've learnt more from this and the previous video than I did in an entire Uni module on this subject.

Very nice! Could you maybe do some login/authentication on this? Maybe with php sessions?

Thanks for this Tutorial :) . Any project to create Login page with token system with ur Slim API and this Vue site?

If you want to be able to filter by all letters in the last name, you can modify the function to look like this:

filterBy (list, value) {
value = value.charAt(0).toLowerCase() + value.slice(1);
return list.filter(function (customer) {
let name = customer.last_name.toLowerCase()
return name.indexOf(value) > -1
})
}

Great great great ......you are better than 100 teachers . Best !

Really trying to wrap my head around this tutorial. In this project, App.vue exists and is imported into main. Why? It doesn't seem to be doing anything. I removed it from my rendition of this project and the app still functions. Am I missing something? Does it need to be there for some reason like routing, etc?

Building an app for work that is pretty much identical in function to this one. Unfortunately, I have to cater to Internet Explorer as that's our company's standard/supported browser. The app I created behaves properly in Chrome, but does not in IE. I can add data with a form, but the component with the table does not update until I refresh the entire browser. Any tips or work arounds?

Brad, any chance you will build up on this app? It would be cool to see how to implement JWT authentication in this setup - Slim/Vue.

Como faço para gravar 1 hora com o APP vue

Great

Great tutorial. Could you do a video about a Login system in Vue.js? That would be great!

great tutorial!! i hope there will be laravel + vue from you in the future. cheers

Thanks a lot! Great tutorial.

Simple is the best, good tutorial. It easy for a newbie. Thank U !

when I run npm run dev I get the following error: Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin

Can we have an edit option?

Hey Brad, do you have working authentication (login and signup) using Vue Js? if you do, can you comment the refs . Thankyou in advance.

very nice app

I have a better filtering method for you (it'll match anything similar to the keyword / search term):
filterBy(customers, keyword) {
keyword = keyword.trim().toLowerCase();
return customers.filter(function(customer) {
return !(customer.last_name.toLowerCase().indexOf(keyword) >= 0 || keyword == "") ?: customer;
});
}

Thanks a lot for this tutorial, it really helped me. I've got a question. I used this project inside electron app, and when click on about link everthing works just fine but if refresh (cmd + R) the screen shows me this error "Cannot GET /src/renderer/about" could you help me please to figure this out? Thanks!