kaygero

kaygero

Member Since 2 Weeks Ago

Experience Points 270
Experience Level 1

4,730 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed 0
Lessons
Completed
Best Reply Awards 0
Best Reply
Awards
  • Start Your Engines Achievement

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • First Thousand Achievement

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • One Year Member Achievement

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • Two Year Member Achievement

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • Three Year Member Achievement

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • Four Year Member Achievement

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • Five Year Member Achievement

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • School In Session Achievement

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • Welcome To The Community Achievement

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • Full Time Learner Achievement

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • Pay It Forward Achievement

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • Subscriber Achievement

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • Lifer Achievement

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • Laracasts Evangelist Achievement

    Laracasts Evangelist

    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.

  • Chatty Cathy Achievement

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • Laracasts Veteran Achievement

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • Ten Thousand Strong Achievement

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • Laracasts Master Achievement

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • Laracasts Tutor Achievement

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • Laracasts Sensei Achievement

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • Top 50 Achievement

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

19 May
3 days ago
15 May
1 week ago

kaygero started a new conversation Laravel + Vue.js: [Vue Warn]: Failed To Mount Component: Template Or Render Function Not Defined.

Hi, I am trying to use vue-router links to load my register and login.vue but I get this error:

Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <Root>
warn @ app.js:41459
mountComponent @ app.js:44856
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:49863
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:52748
init @ app.js:43950
merged @ app.js:44133
createComponent @ app.js:46792
createElm @ app.js:46739
createChildren @ app.js:46867
createElm @ app.js:46768
createChildren @ app.js:46867
createElm @ app.js:46768
patch @ app.js:47328
Vue._update @ app.js:44765
updateComponent @ app.js:44886
get @ app.js:45297
Watcher @ app.js:45286
mountComponent @ app.js:44893
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:49863
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:52748
Vue._init @ app.js:45831
Vue @ app.js:45897
./resources/js/app.js @ app.js:52931
__webpack_require__ @ app.js:20
0 @ app.js:53305
__webpack_require__ @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87

app.js:

require('./bootstrap');
window.Vue = require('vue');

import Vue from 'vue'
import VueRouter from 'vue-router'
import Navbar from './components/Navbar'
import Customers from './components/Customers'

require('./components/Navbar.vue').default
require('./components/Customers.vue').default

Vue.use(VueRouter)

// let Navbar =  require('./components/Navbar.vue');
// let Customers =  require('./components/Customers.vue');

let Login =  require('./components/auth/Login.vue');
let Register =  require('./components/auth/Register.vue');

const routes = [
    { path: '/login', component: Login },
    { path: '/register', component: Register }
  ]

  const router = new VueRouter({
    routes // short for `routes: routes`
  })

const app = new Vue({
    el: '#app',
    router,
    components:{Navbar, Customers}

});

welcome.blade.php:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta http-equipv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <script>window.Laravel = { csrfToken: '{{ csrf_token() }}' }</script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <title>PSD System</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    </head>
    <body>
            <div id="app">
                <Navbar></Navbar>
                <div class="container">
                <router-view></router-view>
                    <Customers></Customers>
                </div>
            </div>

            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
            
            <script src="{{ asset('js/app.js') }}"></script>

    </body>
</html>

Navbar.vue:

<template>
  <div id="app">
    <nav class="navbar navbar-expand-sm navbar-light mb-2 " style="background-color: #007E33;">
        <div class="container">
            <div class="container">
           
            </div>
            <form class="form-inline my-2 my-lg-0 navbar-nav ml-auto">
            <ul class="nav" >
            
                
                <router-link to="/login" style="color: #fafafa;">Login</router-link>
                <router-link to="/register" style="color: #fafafa;">Register</router-link>

            </ul>
        </form>
        </div>
    </nav>
  </div>
</template>

Thanks!

14 May
1 week ago

kaygero left a reply on App.js:40853 [Vue Warn]: Unknown Custom Element: <navbar> - Did You Register The Component Correctly?

@YEZAWHEIN - Can I ask one last question? about my navbar? It seems the links aren't showing (login & register). Thanks again mate!

kaygero left a reply on App.js:40853 [Vue Warn]: Unknown Custom Element: <navbar> - Did You Register The Component Correctly?

@YEZAWHEIN - app.js:

require('./bootstrap');
import Vue from "vue";
import VueRouter from "vue-router";
import router from "./routes";

Vue.use(VueRouter);


const app = new Vue({
  el: "#app",

  router: router
});

kaygero started a new conversation App.js:40853 [Vue Warn]: Unknown Custom Element: <navbar> - Did You Register The Component Correctly?

Hi, I'm trying out vue-router and laravel and trying out custom components. But I am getting this error:

[Vue warn]: Unknown custom element: <navbar> - did you register the component correctly?

and

[Vue warn]: Unknown custom element: <navbar> - did you register the component correctly?

I only put two custom components for my navbar and main vue apps. These worked before, but since I imported and used vue-router these errors appear.

Navbar.vue:

<template>
  <div id="app">
    <nav class="navbar navbar-expand-sm navbar-light mb-2 " style="background-color: #007E33;">
        <div class="container">
            <div class="container">
            </div>
            <form class="form-inline my-2 my-lg-0 navbar-nav ml-auto">
            <ul class="nav" >
                <li class="form-inline" v-if="!loggedIn"><router-link :to="{ 'name': 'login' }" style="color: #fafafa;"> Login </router-link></li>
                <li v-if="!loggedIn"><router-link :to="{ 'name': 'register' }" style="color: #fafafa;"> Register </router-link></li>
                <li v-if="loggedIn"><router-link :to="{ 'name': 'logout' }" style="color: #fafafa;"> Logout </router-link></li>
            </ul>
        </form>
        </div>
    </nav>
  </div>
</template>

Customers.vue

<template>
    <div>
        <h2>Customer Details</h2>
        <form @submit.prevent="addCustomer" class="mb-1">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="AccountName" v-model="customer.Customer">
        </div>
         <div class="form-group">
            <input type="text" class="form-control" placeholder="Contact's Last Name" v-model="customer.ContactLastName">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Contact's First Name" v-model="customer.ContactFirstName">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Contact's Middle Name" v-model="customer.ContactMiddleName">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Customer Contact No." v-model="customer.CustomerContactNo">
        </div>
        <div class="form-group">
            <textarea  class="form-control" placeholder="Address" v-model="customer.Address"></textarea>
            <hr>
        
        
        <button type="submit" class="btn btn-success">Save</button>
        
        </div>
        </form>
            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    <li v-bind:class="[{disabled: !pagination.prev_page_url}]" class="page-item"><a class="page-link" href="#" @click="fetchCustomers(pagination.prev_page_url)">Previous</a></li>

                    <li class="page-item disabled"><a class="page-link text-dark" href="#">Page {{ pagination.current_page }} of {{ pagination.last_page }}</a></li>

                    <li v-bind:class="[{disabled: !pagination.next_page_url}]"  class="page-item"><a class="page-link" href="#" @click="fetchCustomers(pagination.next_page_url)">Next</a></li>
                </ul>
            </nav>
        <div class="table table-hover table-bordered table-responsive-lg ">
        <tr> 
            <!-- <th>ID</th>  -->
            <th>Account Name</th>
            <th>Address</th>
            <th>Contact No.</th>
            <th>Contact Person</th>
            <th>Action</th>
            
        </tr>
            <tr v-for="customer in customers" v-bind:key="customer.CustomerID">
                <!-- <td>{{customer.CustomerID}}</td> -->
                <td>{{customer.Customer}}</td>
                <td>{{customer.Address}}</td>
                <td>{{customer.CustomerContactNo}}</td> 
                <td>{{customer.ContactLastName}}, {{customer.ContactFirstName}} {{customer.ContactMiddleName}}</td>
                <td class="btn-group">
                <button @click="editCustomer(customer)" class="btn btn-outline-warning mt-1 mr-2 ml-2">Edit </button>
                <button @click="deleteCustomer(customer.CustomerID)" class="btn btn-outline-danger mt-1">Delete</button>
                </td>
            </tr>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            customers: [],
            customer: {
                CustomerID: '',
                Customer: '',
                Address: '',
                CustomerContactNo: '',
                ContactLastName: '',
                ContactFirstName: '',
                ContactMiddleName: ''
            }, 
            customer_CustomerID:'',
            pagination: {},
            edit: false
        }
    },

    created (){
        this.fetchCustomers();
    },

    methods: {
        fetchCustomers(page_url) {
            let vm = this;
            page_url = page_url || '/api/customers'
            fetch(page_url)
                .then(res  => res.json())
                .then(res => {
                   this.customers = res.data;
                   vm.makePagination(res.meta, res.links);
                })
                .catch(err => console.log(err));
        },
        makePagination(meta, links) {
            let pagination = {
                current_page: meta.current_page,
                last_page: meta.last_page,
                next_page_url: links.next,
                prev_page_url: links.prev
            };

            this.pagination = pagination;
        },
        deleteCustomer(CustomerID) {
            if (confirm('Are you sure?')) {
                fetch(`api/customer/${CustomerID}`, {
                    method: 'delete'
                })
                .then(res => res.json())
                .then(data => {
                    alert('Details deleted');
                    this.fetchCustomers();
                })
                .catch(err => console.log(err));
            }
        },
        addCustomer() {
            if(this.edit === false) {
                //Add
                fetch('api/customer', {
                    method: 'post',
                    body: JSON.stringify(this.customer),
                    headers: {
                        'content-type': 'application/json'
                    }
                })
                .then(res => res.json())
                .then(data => {
                    this.customer.Customer = '';
                    this.customer.Address = '';
                    this.customer.CustomerContactNo = '';
                    this.customer.ContactLastName = '';
                    this.customer.ContactFirstName = '';
                    this.customer.ContactMiddleName = '';
                    alert('Customer Added');
                    this.fetchCustomers();
                })
                .catch(err => console.log(err));
            } else {
                //Update
                fetch('api/customer', {
                    method: 'put',
                    body: JSON.stringify(this.customer),
                    headers: {
                        'content-type': 'application/json'
                    }
                })
                .then(res => res.json())
                .then(data => {
                    this.customer.Customer = '';
                    this.customer.Address = '';
                    this.customer.CustomerContactNo = '';
                    this.customer.ContactLastName = '';
                    this.customer.ContactFirstName = '';
                    this.customer.ContactMiddleName = '';
                    alert('Customer Details Updated');
                    this.fetchCustomers();
                })
                .catch(err => console.log(err));
            }
        },
        editCustomer(customer) {
            this.edit  = true;
            this.customer.CustomerID = customer.CustomerID;
            this.customer.customer_CustomerID = customer.CustomerID;
            this.customer.Customer = customer.Customer;
            this.customer.Address = customer.Address;
            this.customer.CustomerContactNo = customer.CustomerContactNo;
            this.customer.ContactLastName = customer.ContactLastName;
            this.customer.ContactFirstName = customer.ContactFirstName;
            this.customer.ContactMiddleName = customer.ContactMiddleName;
        }
    }
};
</script>

web.php:

<?php

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

Route::get('/home', '[email protected]')->name('home');

Thanks! Any help is appreciated!

13 May
1 week ago

kaygero started a new conversation Laravel Vuejs Error: Uncaught ReferenceError: Login Is Not Defined

Hello Everyone! I'm trying to use vue-router links in this CRUD App to load both the Login and Register pages. But I Seem to be getting this error:

Uncaught ReferenceError: Login is not defined
    at Module../resources/js/app.js (app.js:52670)
    at __webpack_require__ (app.js:20)
    at Object.0 (app.js:52965)
    at __webpack_require__ (app.js:20)
    at app.js:84
    at app.js:87

I already imported vue-router in my app.js and put up the routes in routes.js app.js:

require('./bootstrap');

import VueRouter from 'vue-router'

Vue.use(VueRouter)

Vue.component('navbar', require('./components/Navbar.vue').default);
Vue.component('customers', require('./components/Customers.vue').default);
Vue.component('login', require('./components/auth/Login.vue').default);

const router = new VueRouter({
    routes: [
         { path: '/login', component: Login },
         { path: '/register', component: Register }
    ]
})

const app = new Vue({
    el: '#app',

    router: router
})

routes.js

import App from './App'
import Login from './components/auth/Login'
import Logout from './components/auth/Logout'
import Register from './components/auth/Register'

export const routes = [
  {
    path: '/customers',
    name: 'customers',
    component: App,
    meta: {
      requiresAuth: true,
    }
  },
  {
    path: '/login',
    name: 'login',
    component: Login,
    meta: {
      requiresVisitor: true,
    }
  },
  {
    path: '/register',
    name: 'register',
    component: Register,
    meta: {
      requiresVisitor: true,
    }
  },
  {
    path: '/logout',
    name: 'logout',
    component: Logout
  }
]

export default routes
10 May
1 week ago

kaygero left a reply on Laravel Vuejs [Vue Warn]: Unknown Custom Element: <router-link>

@TYKUS - Thanks. But now this error appears when I use this as my app.js. app.js:

import VueRouter from 'vue-router'

Vue.use(VueRouter)

Vue.component('navbar', require('./components/Navbar.vue').default);
Vue.component('customers', require('./components/Customers.vue').default);
Vue.component('login', require('./components/auth/Login.vue').default);

const router = new VueRouter({
    routes: [
         { path: '/login', component: Login },
         { path: '/register', component: Register }
    ]
})

const app = new Vue({
    el: '#app',

    router: router
})

Error:

Uncaught ReferenceError: Customers is not defined
    at Module../resources/js/app.js (app.js:52670)
    at __webpack_require__ (app.js:20)
    at Object.0 (app.js:52965)
    at __webpack_require__ (app.js:20)
    at app.js:84
    at app.js:87

But when I comment out these two links:

   { path: '/login', component: Login },
   { path: '/register', component: Register }

I get the error

[vue-router] Route with name 'login' does not exist
[vue-router] Route with name 'register' does not exist

I already have a routes.js file here:

import App from './App'
import Login from './components/auth/Login'
import Logout from './components/auth/Logout'
import Register from './components/auth/Register'

export const routes = [
  {
    path: '/customers',
    name: 'customers',
    component: App,
    meta: {
      requiresAuth: true,
    }
  },
  {
    path: '/login',
    name: 'login',
    component: Login,
    meta: {
      requiresVisitor: true,
    }
  },
  {
    path: '/register',
    name: 'register',
    component: Register,
    meta: {
      requiresVisitor: true,
    }
  },
  {
    path: '/logout',
    name: 'logout',
    component: Logout
  }
]

export default routes

Thanks again, mate!

08 May
2 weeks ago

kaygero left a reply on Laravel Vuejs [Vue Warn]: Unknown Custom Element: <router-link>

@TYKUS - I tried adding this into my app.js:

require('./bootstrap');

window.Vue = require('vue');


Vue.component('navbar', require('./components/Navbar.vue').default);
Vue.component('customers', require('./components/Customers.vue').default);
Vue.component('login', require('./components/auth/Login.vue').default);

const router = new VueRouter({
    routes: [
        { path: '/customers', component: Customers },
        { path: '/login', component: Login }
    ]
})

const app = new Vue({
    el: '#app',

    router: router
});

But i get this error:

app.js:49978 Uncaught ReferenceError: VueRouter is not defined
    at Object../resources/js/app.js (app.js:49978)
    at __webpack_require__ (app.js:20)
    at Object.0 (app.js:50261)
    at __webpack_require__ (app.js:20)
    at app.js:84
    at app.js:87

kaygero left a reply on Laravel Vuejs [Vue Warn]: Unknown Custom Element: <router-link>

@TYKUS - Do i put this in my app.js file or just make a new file?

07 May
2 weeks ago

kaygero started a new conversation Laravel Vuejs [Vue Warn]: Unknown Custom Element: <router-link>

Hi everyone! I'm trying to make this crud app with authentication. But i'm experiencing this error:

app.js:38573 [Vue warn]: Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Navbar> at resources/js/components/Navbar.vue
       <Root>

I already installed vue router via npm and imported vue-router in my app.js

app.js:



require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router'

Vue.use(VueRouter)



 Vue.component('navbar', require('./components/Navbar.vue').default);
Vue.component('customers', require('./components/Customers.vue').default);
Vue.component('login', require('./components/auth/Login.vue').default);


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

Thanks and Cheers!